diff --git a/src/components/datepicker/demoNgModelOptionsTimezone (setUTCHours to 23)/index.html b/src/components/datepicker/demoNgModelOptionsTimezone (setUTCHours to 23)/index.html new file mode 100644 index 0000000000..a800537de9 --- /dev/null +++ b/src/components/datepicker/demoNgModelOptionsTimezone (setUTCHours to 23)/index.html @@ -0,0 +1,32 @@ + + + + +
+
+

Calendar Values

+
+ Date in local timezone: + {{ctrl.calendarDate|date:"yyyy-MM-dd HH:mm Z"}} +
+
+ Date in UTC timezone: + {{ctrl.calendarDate|date:"yyyy-MM-dd HH:mm Z":"UTC"}} +
+
+ + + +
+

Datepicker Values

+
+ Date in local timezone: + {{ctrl.datepickerDate|date:"yyyy-MM-dd HH:mm Z"}} +
+
+ Date in UTC timezone: + {{ctrl.datepickerDate|date:"yyyy-MM-dd HH:mm Z":"UTC"}} +
+
+
+
diff --git a/src/components/datepicker/demoNgModelOptionsTimezone (setUTCHours to 23)/script.js b/src/components/datepicker/demoNgModelOptionsTimezone (setUTCHours to 23)/script.js new file mode 100644 index 0000000000..2f9f7e0799 --- /dev/null +++ b/src/components/datepicker/demoNgModelOptionsTimezone (setUTCHours to 23)/script.js @@ -0,0 +1,14 @@ +angular.module('ngModelTimezoneUsage', ['ngMaterial', 'ngMessages']) +.controller('AppCtrl', function() { + this.datepickerDate = new Date(0); + this.datepickerDate.setUTCFullYear(2020, 5, 19); + + // represents isssue: https://github.com/angular/material/issues/12149 , when input box initial values do not takes into account passed timezone option. + this.datepickerDate.setUTCHours(23, 0, 0, 0); + + this.calendarDate = new Date(0); + this.calendarDate.setUTCFullYear(2020, 5, 19); + + // represents isssue: https://github.com/angular/material/issues/12149 , when input box initial values do not takes into account passed timezone option. + this.datepickerDate.setUTCHours(23, 0, 0, 0); +}); diff --git a/src/components/datepicker/js/calendar.js b/src/components/datepicker/js/calendar.js index b30ae1d5d8..d080182388 100644 --- a/src/components/datepicker/js/calendar.js +++ b/src/components/datepicker/js/calendar.js @@ -364,11 +364,23 @@ CalendarCtrl.prototype.setNgModelValue = function(date) { var timezone = this.$mdUtil.getModelOption(this.ngModelCtrl, 'timezone'); var value = this.dateUtil.createDateAtMidnight(date); + + if (timezone != null && timezone != "") { + // If timezone is specified - then convert to midnight of specified timezone to display + var offset = value.getTimezoneOffset(); + if (offset < 0) { + // Convert negative offset to positive + value.setMinutes(-1*(offset), 0, 0); + } + else { + value.setMinutes(offset, 0, 0); + } + } + this.focusDate(value); this.$scope.$emit('md-calendar-change', value); - // Using the timezone when the offset is negative (GMT+X) causes the previous day to be - // selected here. This check avoids that. - if (timezone == null || value.getTimezoneOffset() < 0) { + + if (timezone == null || timezone == "") { this.ngModelCtrl.$setViewValue(this.ngDateFilter(value, 'yyyy-MM-dd'), 'default'); } else { this.ngModelCtrl.$setViewValue(this.ngDateFilter(value, 'yyyy-MM-dd', timezone), 'default');