add pfBootstrapDatepicker

[nicolethoen]

Description

fixes #711
Styled the Angular UI datepicker so that it looks more like the patternfly datepicker.
Mostly removing the week numbers from the beginning of each week and styling the various buttons.
The user can also still pass dateOptions to the Angular UI datepicker to customize its behavior.

PR Checklist

• Unit tests are included
• Screenshots are attached (if there are visual changes in the UI)
• A Designer (@beanh66) is assigned as a reviewer (if there are visual changes in the UI)
• A CSS rep (@cshinn) is assigned as a reviewer (if there are visual changes in the UI)

[beanh66]

@nicolethoen A couple of minor things:

• Seems like we need more spacing around the month name
• The fa-angle-double-left and right icons should be used for advancing through months
• The selected date should be shown in this format: 02/21/2018
• Today should not be bold and should match the font size of "February"

I can't tell by your images if you have hover states on the month selection and the "Today" selection but those should match the core implementation in PatternFly if possible.

Thanks!

[beanh66]

Requested minor visual changes

[jcaianirh]

Add description apropos for the control, eg.

Datepicker module for patternfly

[nicolethoen]

nice catch. and sublime use of apropos.

[jcaianirh]

As this is an object, some reference material might be helpful. See other object descriptions which describe the format/syntax of the options allowed for date.

[jcaianirh]

Same as above vis a vis the object description, but additionally, with this option it might be nice to see the allowance for different placements in the demo area below. ie a radio button for say above/below.

[jcaianirh]

Minor comments. Looks awesome Nicole!!

[dtaylor113]

That link isn't working for me, it goes to the top of Angular UI Bootstrap page. I think http://angular-ui.github.io/bootstrap/#datepickerPopup will be enough to link-n-launch to the correct part of the page.
Hmm..still not working in some cases. Funny, even their GitHub page's 'here' and 'inline datepicker' links do not work correctly for me.

[nicolethoen]

yeah - i've noticed the same problem as I've tried linking to the param documentation in response to Joe's comments... Not sure what to do about that.

[jeff-phillips-18]

This should be a color from the patternfly color palette.

[dtaylor113]

dateOptions is an object, not a string, so it needs to be defined as dateOptions: '<'. You'll notice when you make this change, your overrides in your example no longer work Ex:

$scope.dateOptions = {
        showWeeks : true
      };

:-(

This is because the $onInit() is actually called after the objects from the example are bound. Try adding this to your component:

    ctrl.$onChanges = function (changesObj) {
      console.log("on changes");
    };

Then in the browser, source tab, open up angular-patternfly.js, find the component, set breakpoints in $onInit() and $onChanges(). You may want to remove the first datepicker example, just to see how the lifecycle of one example works. You'll see that $onChanges() is called first with the objects from the example, then $onInit() is called afterwards -in this case overriding the $scope.dateOptions set by the user/example.

We typically have some sort of if (!angular.isDefined(...).. or 'defaulting' operation in the $onInit() to prevent overriding.

Here's some code which has some examples of $onInit(), $onChanges, and even $doCheck for deep comparisions.

Here is another code example where we use lodash ._defaults(...) to handle default props and user defined props.

[dtaylor113]

^^ I'd probably stick with the last example and lodash ._defaults(...) it's a nice solution.

[dtaylor113]

Pls see previous comment about bindings

[dtaylor113]

You also have to change your commit msg to be something like this. I think feat(pfBootstrapDatePicker): Initial Implementation

[beanh66]

@nicolethoen The visual changes look good based on your updated screenshot. Thanks!

[dtaylor113]

Hi @nicolethoen, latest code looks good! Here are my findings on updating attributes:

$timeout(function () {
  $scope.dateOptions.showWeeks = false;  // doesn't take effect on open popup, but does if re-opened
  $scope.popupPlacement = "upper-right"; // doesn't take effect on open popup, but does if re-opened
  // These do take effect immediately in open popup. 
  $scope.isOpen = "";
  $scope.date = new Date("Dec 1, 2000");
  $scope.format1 = "MM-dd-yy";
}, 2000);

So, for this particular component/usecase I think these are acceptable.

[dtaylor113]

Can you pls look into changing the selected color to match pf design:

PF Design:

Current Impl:

The pf core example is showing the correct color: http://www.patternfly.org/pattern-library/forms-and-controls/datepicker/#code

[dtaylor113]

Appreciate the unit tests! 👍

[nicolethoen]

The pf core example is showing the correct color: http://www.patternfly.org/pattern-library/forms-and-controls/datepicker/#code

so, the yellow color here is actually highlighting today's date - not the selected date.

For some reason, the angular ui component doesn't distinguish between todays date and your selected date. So it will show today's date as if it were selected in blue until you select a date and it will highlight that in blue. I've had a hard time getting the yellow to stick to todays date, but I'll keep trying.

[dtaylor113]

I've had a hard time getting the yellow to stick to todays date, but I'll keep trying.

Ok, sounds good. Not a show stopper :-)

[dtaylor113]

@nicolethoen The visual changes look good based on your updated screenshot. Thanks!

Hi @beanh66, could you please approve this PR if satisfied with the visuals. -thanks!

@jeff-phillips-18, pls review again, I think your issue(s) have been addressed -thanks!

[dtaylor113]

Assuming commits are squashed and commit msg is in the form of 'feat(...)'. Nice job, thanks!

[beanh66]

@dtaylor113 @nicolethoen Yes this satisfies the visuals from what I can tell. I can't see if there are hover colors on the month and the current date. Are those matching the design? And does the month selection open up to a display of all months? Not sure if there is somewhere I can check out the current implementation. If not, the screenshots work. Thanks!

[nicolethoen]

@beanh66 @dtaylor113

Here i've tried capturing the latest changes with hover states.

[beanh66]

Thanks @nicolethoen! Hover states look great. It looks like the version with years or months should have more space around them and in the PF core implementation the months are abbreviated. Is that possible here? Posted a screenshot below: