From 1615aaea7255013f1d9605af7cf89dc900949064 Mon Sep 17 00:00:00 2001
From: Vidmantas <vdrasutis@gmail.com>
Date: Sat, 19 Feb 2022 23:56:44 +0200
Subject: [PATCH] fixing one of issues (when same date is selected multiple
times) 12149: https://github.com/angular/material/issues/12149
---
.../index.html | 32 +++++++++++++++++++
.../script.js | 14 ++++++++
src/components/datepicker/js/calendar.js | 18 +++++++++--
3 files changed, 61 insertions(+), 3 deletions(-)
create mode 100644 src/components/datepicker/demoNgModelOptionsTimezone (setUTCHours to 23)/index.html
create mode 100644 src/components/datepicker/demoNgModelOptionsTimezone (setUTCHours to 23)/script.js
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 00000000000..a800537de96
--- /dev/null
+++ b/src/components/datepicker/demoNgModelOptionsTimezone (setUTCHours to 23)/index.html
@@ -0,0 +1,32 @@
+<md-content ng-controller="AppCtrl as ctrl" layout="row" layout-padding ng-cloak>
+ <md-calendar ng-model="ctrl.calendarDate" ng-model-options="{timezone: 'UTC'}">
+ </md-calendar>
+
+ <div layout="column" layout-padding>
+ <div>
+ <h4>Calendar Values</h4>
+ <div>
+ <strong>Date in local timezone:</strong>
+ {{ctrl.calendarDate|date:"yyyy-MM-dd HH:mm Z"}}
+ </div>
+ <div>
+ <strong>Date in UTC timezone:</strong>
+ {{ctrl.calendarDate|date:"yyyy-MM-dd HH:mm Z":"UTC"}}
+ </div>
+ </div>
+ <md-divider></md-divider>
+ <md-datepicker ng-model="ctrl.datepickerDate" ng-model-options="{timezone: 'UTC'}">
+ </md-datepicker>
+ <div>
+ <h4>Datepicker Values</h4>
+ <div>
+ <strong>Date in local timezone:</strong>
+ {{ctrl.datepickerDate|date:"yyyy-MM-dd HH:mm Z"}}
+ </div>
+ <div>
+ <strong>Date in UTC timezone:</strong>
+ {{ctrl.datepickerDate|date:"yyyy-MM-dd HH:mm Z":"UTC"}}
+ </div>
+ </div>
+ </div>
+</md-content>
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 00000000000..2f9f7e0799e
--- /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 b30ae1d5d89..d0801823881 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');