Support ng-model-options with datepicker

[wesleycho]

We should support ng-model-options with the datepicker

In particular, we should support

• allowInvalid
• updateOn
• timezone

[SandeepThomas]

I would really like to set UTC timezone instead of local or without time/timezone when setting a date using the datepicker!

[maxdeviant]

👍

[icfantv]

@maxdeviant, please don't add +1 to issue threads without providing further benefit to the conversation. All it does is add clutter to the thread. Thanks.

We know this is something users want and fully intend to implement it. We have a lot on our plates at the moment trying to get 1.0 out the door.

[icfantv]

I should also add that we welcome well-thought and well-developed PRs if you really want/need this feature sooner rather than later.

[maxdeviant]

My apologies. It's a bit of a force of habit, at this point.

timezone support is what I am particularly interested in.

[SandeepThomas]

I fixed my issue with timezone for now with this directive. Posting here in case any one needs.

https://gist.github.com/sandeepthomas/78f2de3f0f8f21869f91

It removes the timezone and converts the date to epoch/unix time.

[coryasilva]

For firebase timestamps I am using this directive.

  .directive('timestamp', function($filter) {
    return {
      restrict: 'A',
      require: ['ngModel'],
      link: function link(scope, element, attr, ctrls) {
        var ngModelController = ctrls[0];
        var format = attr.uibDatepickerPopup;
        if (format) {
          ngModelController.$parsers.push(function(viewValue) {
            if (!viewValue) {
              return undefined;
            }
            // Strip off timezone offset
            if (angular.isFunction(viewValue.getTime)) {
              viewValue.setMinutes(viewValue.getMinutes() - viewValue.getTimezoneOffset());
              return viewValue.getTime();
            } else {
              return undefined;
            }
          });
          ngModelController.$formatters.push(function(modelValue) {
            if (!modelValue) {
              return undefined;
            }
            // Display the actual time, not local time
            return $filter('date')(modelValue, format, '+00:00');
          });
        }
      }
    };
  })

[paulflo150]

@davious nice work sir, I just played with your timezone commit and I like it! There are a couple of issues I noticed: the calendar is ahead by one day, and the time moves ahead by one hour when you select a DST date (i.e.: March 7 vs March 14)

DST problem - it changed the time from 8 to 9:

[wesleycho]

I was working on the timezone issue locally as well, as it turns out to be quite tricky - I have it completely working for the inline datepicker, but not the one in the popup.

I also have to rejig the tests.

For anyone working on this issue - a new method should be added to the dateParser service that essentially copy/pastes this mechanism from Angular: https://github.com/angular/angular.js/blob/master/src/Angular.js#L1207-L1224

[tlk]

@paulflo150 according to http://stackoverflow.com/questions/16946002/javascript-time-zone-is-wrong-for-past-daylight-saving-time-transition-rules/16951442#16951442 there is a design flaw in ECMAScript that makes DST handling flaky. Perhaps this explains the issue you experienced.

[mlev]

Regarding updateOn: blur support - I also can’t update past 0.14.x now as our date-pickers stop working. The scenario we’d like is to have the blur functionality on the input field but still want the field updated when the user makes a selection from the popup. At the moment the same ng-model-options get used for both and the popup selection no longer works.

Happy to look at a PR but not sure what the preferred approach would be. A couple of potential solutions:

1. Would it make sense to always specify or add {updateOn: default} when constructing the popup? I’m struggling to think of a scenario where delaying date selection from the pop-up would be desirable. This might at least be a sensible interim solution before defining more comprehensive updateOn support.

2. Add additional config option for popupModelOptions that will override (or merge) the options used when creating the uib-datepicker-popup-wrap. Currently the ngModelOptions provided in datepicker-options are only used if they are not already set elsewhere.

Either of those sound acceptable?

[velvizhip]

I have a drop down containing various time zones. when i select a timezone, the datepicker should be updated automatically. Is it possible to adjust ui-datepicker for selected timezone

[czosel]

I was just following up on @mlev 's idea (1) for supporting updateOn: blur - for me everything works as expected when i just remove the line in popup.js where ng-model-options are passed to popupEl. Probably there is a use-case for having ng-model-options on the popup, but i dont see one for specifying updateOn.

I'd be happy to provide a PR, if there are no further concerns about this approach. What do you think, @wesleycho?

[Aaron-Pool]

Yes, please! This is causing some frustrating issues for me right now.
@czosel && @wesleycho

[wald-tq]

The timezone issue is fixed.
You can use:

ng-model-options="{timezone: 'utc'}"

To get a datepicker without timezone calculation.

[wesleycho]

I'm not sure what would be desired exactly for updateOn - would need to investigate.

I welcome any PRs that make sense though with tests to make it clear what is desired.

[czosel]

@wesleycho Alright, i'll try to come up with a PR containing some tests. If you find any use for updateOn, please let me know!

[wesleycho]

To give an update, updateOn support should be fixed as of #5933 in master, to be released for 2.0.0. getterSetter is the last piece of the puzzle, and shouldn't be too bad to implement if anyone wants to take a stab at it.

[wesleycho]

I took an investigation into implementing getterSetter, but came across a fundamental flaw with it given that we are allowing setting ng-model-options through alternative means, so we are feature complete as far as ng-model-options support goes for the datepicker.

[aplocher]

@wesleycho

"fundamental flaw with it given that we are allowing setting ng-model-options through alternative means, so we are feature complete as far as ng-model-options support goes for the datepicker."

What does that mean? Did getterSetter ever make it to 2.0?

Thanks

[aplocher]

It seems to work now, but users can only type into the text field if I also include "updateOn:Blur". e.g. ng-model-options="{ getterSetter: true, updateOn: 'blur' }" - otherwise partially typed dates won't work. Thanks! 😄

[pankajparkar]

@wald-tq the provided solution doesn't work for me :( , Any guess?

[wald-tq]

@pankajparkar : I am still using 1.2.x of angular-bootstrap. That's my only guess I with that much information.

[pankajparkar]

@wald-tq That's correct guess, I'm using 0.13.4 version. Any workaround for 0.13.X version?

[wald-tq]

@pankajparkar I can't help you. Consider a upgrade.