hsuanxyz · jhenriquemc · Feb 19, 2019
diff --git a/dev/package.json b/dev/package.json
@@ -24,9 +24,11 @@
     "@ionic-native/splash-screen": "4.4.0",
     "@ionic-native/status-bar": "4.4.0",
     "@ionic/storage": "2.1.3",
+    "@types/moment-timezone": "^0.5.10",
     "ionic-angular": "3.9.2",
     "ionicons": "3.0.0",
     "moment": "^2.20.1",
+    "moment-timezone": "^0.5.23",
     "rxjs": "5.5.2",
     "sw-toolbox": "3.6.0",
     "zone.js": "0.8.18"

diff --git a/dev/src/demos/demo-dst.ts b/dev/src/demos/demo-dst.ts
@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { ModalController } from 'ionic-angular';
+
+import {
+    CalendarComponentOptions
+} from '../ion2-calendar'
+
+import * as moment from 'moment';
+import 'moment-timezone';
+
+@Component({
+    selector: 'demo-dst',
+    template: `
+        <hr>
+        <h3 style="text-align: center;">DST (Daylight Savings Time)</h3>
+        <ion-calendar [(ngModel)]="date"
+                      (onChange)="onChange($event)"
+                      [options]="options"
+                      type="string"
+                      format="YYYY-MM-DD">
+        </ion-calendar>
+    `
+})
+export class DemoDstComponent {
+
+    date: string = '2018-10-01';
+    options: CalendarComponentOptions = {
+        from: new Date(2000, 9, 1),
+        weekStart: 1,
+    };
+
+    constructor(public modalCtrl: ModalController) {
+        moment.tz.setDefault(moment.tz.guess());
+    }
+
+    onChange($event) {
+        console.log($event)
+    }
+
+}
diff --git a/dev/src/demos/demo-modal-dst.ts b/dev/src/demos/demo-modal-dst.ts
@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { ModalController } from 'ionic-angular';
+import * as moment from 'moment';
+
+import {
+    CalendarModal,
+    CalendarModalOptions,
+} from '../ion2-calendar'
+
+@Component({
+    selector: 'demo-modal-dst',
+    template: `
+        <button ion-button (click)="openCalendar()">
+            DST (Daylight Savings Time)
+        </button>
+    `
+})
+export class DemoModalDstComponent {
+
+    constructor(public modalCtrl: ModalController) {
+        moment.tz.setDefault(moment.tz.guess());
+        moment.locale('en');
+    }
+
+    openCalendar() {
+        const options: CalendarModalOptions = {
+            title: 'DST (Daylight Savings Time)',
+            weekStart: 1,
+            from: new Date(2018, 9, 1),
+        };
+
+        let myCalendar = this.modalCtrl.create(CalendarModal, {
+            options: options
+        });
+
+        myCalendar.present();
+
+    }
+
+}
diff --git a/dev/src/demos/demos.module.ts b/dev/src/demos/demos.module.ts
@@ -8,10 +8,12 @@ import { DemoModalMultiComponent } from "./demo-modal-multi";
 import { DemoModalRangeComponent } from "./demo-modal-range";
 import { DemoModalDisableWeekComponent } from "./demo-modal-disable-week";
 import { DemoModalLocaleComponent } from "./demo-modal-locale";
+import { DemoModalDstComponent } from './demo-modal-dst';
 import { DemoModalCustomStyleComponent } from "./demo-modal-custom-style";
 import { DemoModalDefaultScrollComponent } from "./demo-modal-default-scroll";
 import { DemoModalConfigDaysComponent } from "./demo-modal-config-days";
 import { DemoBasicComponent } from "./demo-basic";
+import { DemoDstComponent } from './demo-dst';
 import { DemoMultiComponent } from "./demo-multi";
 import { DemoRangeComponent } from "./demo-range";
 import { DemoOptionsComponent } from "./demo-options";
@@ -31,10 +33,12 @@ const COMPONENTS = [
   SubHeaderCalendarModal,
   DemoModalDisableWeekComponent,
   DemoModalLocaleComponent,
+  DemoModalDstComponent,
   DemoModalCustomStyleComponent,
   DemoModalDefaultScrollComponent,
   DemoModalConfigDaysComponent,
   DemoBasicComponent,
+  DemoDstComponent,
   DemoMultiComponent,
   DemoRangeComponent,
   DemoOptionsComponent,

diff --git a/dev/src/demos/sub-header-calendar-modal.ts b/dev/src/demos/sub-header-calendar-modal.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   template: `

diff --git a/dev/src/ion2-calendar/components/calendar.component.ts b/dev/src/ion2-calendar/components/calendar.component.ts
@@ -138,7 +138,7 @@ export class CalendarComponent implements ControlValueAccessor, OnInit {
 
   ngOnInit(): void {
     this.initOpt();
-    this.monthOpt = this.createMonth(new Date().getTime());
+    this.monthOpt = this.createMonth(moment().valueOf());
   }
 
   getViewDate() {
@@ -328,7 +328,7 @@ export class CalendarComponent implements ControlValueAccessor, OnInit {
       if (this._calendarMonthValue[0]) {
         this.monthOpt = this.createMonth(this._calendarMonthValue[0].time);
       } else {
-        this.monthOpt = this.createMonth(new Date().getTime());
+          this.monthOpt = this.createMonth(moment().valueOf());
       }
     }
   }

diff --git a/dev/src/ion2-calendar/components/calendar.modal.ts b/dev/src/ion2-calendar/components/calendar.modal.ts
@@ -265,7 +265,7 @@ export class CalendarModal implements OnInit {
     if (!isAfter) return -1;
 
     if (this.showYearPicker) {
-      startDate = moment(new Date(this.year, 0, 1));
+      startDate = moment([this.year, 0, 1]);
     }
 
     return defaultScrollTo.diff(startDate, 'month');

diff --git a/dev/src/ion2-calendar/components/month-picker.component.ts b/dev/src/ion2-calendar/components/month-picker.component.ts
@@ -2,12 +2,14 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { CalendarMonth } from "../calendar.model";
 import { defaults } from "../config";
 
+import * as moment from 'moment';
+
 @Component({
   selector: 'ion-calendar-month-picker',
   template: `
     <div [class]="'month-picker ' + color">
       <div class="month-packer-item"
-           [class.this-month]=" i === _thisMonth.getMonth() && month.original.year === _thisMonth.getFullYear()"
+           [class.this-month]=" i === _thisMonth.month() && month.original.year === _thisMonth.year()"
            *ngFor="let item of _monthFormat; let i = index">
         <button type="button" (click)="_onSelect(i)">{{item}}</button>
       </div>
@@ -20,7 +22,7 @@ export class MonthPickerComponent {
   @Input() month: CalendarMonth;
   @Input() color = defaults.COLOR;
   @Output() onSelect: EventEmitter<number> = new EventEmitter();
-  _thisMonth = new Date();
+  _thisMonth = moment();
   _monthFormat = defaults.MONTH_FORMAT;
 
   @Input()

diff --git a/dev/src/ion2-calendar/services/calendar.service.ts b/dev/src/ion2-calendar/services/calendar.service.ts
@@ -10,6 +10,7 @@ import {
 } from '../calendar.model'
 import * as moment from 'moment';
 import { defaults, pickModes } from "../config";
+import { Moment } from "moment";
 
 @Injectable()
 export class CalendarService {
@@ -81,17 +82,17 @@ export class CalendarService {
   }
 
   createOriginalCalendar(time: number): CalendarOriginal {
-    const date = new Date(time);
-    const year = date.getFullYear();
-    const month = date.getMonth();
-    const firstWeek = new Date(year, month, 1).getDay();
+    const date = moment(time);
+    const year = date.year();
+    const month = date.month();
+    const firstWeek = moment([year, month, 1]).day();
     const howManyDays = moment(time).daysInMonth();
     return {
       year,
       month,
       firstWeek,
       howManyDays,
-      time: new Date(year, month, 1).getTime(),
+      time: moment([year, month, 1]).valueOf(),
       date: new Date(time)
     }
   }
@@ -120,7 +121,7 @@ export class CalendarService {
     } else if (_rangeBeg > 0 && _rangeEnd === 0) {
 
       if (!opt.canBackwardsSelected) {
-        let _addTime = _time.add(1, 'day');
+        let _addTime = this._momentDayModify(_time, 1);
         isBetween = !_addTime.isAfter(_rangeBeg);
       } else {
         isBetween = false;
@@ -135,7 +136,7 @@ export class CalendarService {
       _disable = disableWee || isBetween;
     }
 
-    let title = new Date(time).getDate().toString();
+    let title = date.date().toString();
     if (dayConfig && dayConfig.title) {
       title = dayConfig.title
     } else if (opt.defaultTitle) {
@@ -168,7 +169,7 @@ export class CalendarService {
     let days: Array<CalendarDay> = new Array(6).fill(null);
     let len = original.howManyDays;
     for (let i = original.firstWeek; i < len + original.firstWeek; i++) {
-      let itemTime = new Date(original.year, original.month, i - original.firstWeek + 1).getTime();
+      let itemTime = moment([original.year, original.month, i - original.firstWeek + 1]).valueOf();
       days[i] = this.createCalendarDay(itemTime, opt);
     }
 
@@ -194,7 +195,7 @@ export class CalendarService {
 
       if (!(_booleanMap.length % 7 === 0 && _booleanMap[_booleanMap.length - 1])) {
         for (endOffsetIndex; endOffsetIndex < days.length + (endOffsetIndex % 7); endOffsetIndex++) {
-          const dayAfter = moment(days[endOffsetIndex - 1].time).clone().add(1, 'd');
+            const dayAfter = this._momentDayModify(moment(days[endOffsetIndex - 1].time).clone(), 1);
           days[endOffsetIndex] = this.createCalendarDay(dayAfter.valueOf(), opt, thisMonth);
         }
       }
@@ -210,8 +211,8 @@ export class CalendarService {
   createMonthsByPeriod(startTime: number, monthsNum: number, opt: CalendarModalOptions): Array<CalendarMonth> {
     let _array: Array<CalendarMonth> = [];
 
-    let _start = new Date(startTime);
-    let _startMonth = new Date(_start.getFullYear(), _start.getMonth(), 1).getTime();
+    let _start = moment(startTime);
+    let _startMonth = moment([_start.year(), _start.month(), 1]).valueOf();
 
     for (let i = 0; i < monthsNum; i++) {
       let time = moment(_startMonth).add(i, 'M').valueOf();
@@ -256,4 +257,8 @@ export class CalendarService {
     }
   }
 
+  // BUG fix: https://stackoverflow.com/a/24919934
+  private _momentDayModify(date: Moment, days: number): Moment {
+      return moment.unix(date.unix() + (86400 * days));
+  }
 }
diff --git a/dev/src/pages/home/home.html b/dev/src/pages/home/home.html
@@ -15,6 +15,7 @@ <h2>modal mode</h2>
   <demo-modal-custom-sub-header></demo-modal-custom-sub-header>
   <demo-modal-disable-week></demo-modal-disable-week>
   <demo-modal-locale></demo-modal-locale>
+  <demo-modal-dst></demo-modal-dst>
   <demo-modal-custom-style></demo-modal-custom-style>
   <demo-modal-default-scroll></demo-modal-default-scroll>
   <demo-modal-config-days></demo-modal-config-days>
@@ -26,4 +27,5 @@ <h2>component mode</h2>
   <demo-options></demo-options>
   <demo-methods></demo-methods>
   <demo-events></demo-events>
+  <demo-dst></demo-dst>
 </ion-content>
diff --git a/src/components/calendar.component.ts b/src/components/calendar.component.ts
@@ -138,7 +138,7 @@ export class CalendarComponent implements ControlValueAccessor, OnInit {
 
   ngOnInit(): void {
     this.initOpt();
-    this.monthOpt = this.createMonth(new Date().getTime());
+    this.monthOpt = this.createMonth(moment().valueOf());
   }
 
   getViewDate() {
@@ -328,7 +328,7 @@ export class CalendarComponent implements ControlValueAccessor, OnInit {
       if (this._calendarMonthValue[0]) {
         this.monthOpt = this.createMonth(this._calendarMonthValue[0].time);
       } else {
-        this.monthOpt = this.createMonth(new Date().getTime());
+          this.monthOpt = this.createMonth(moment().valueOf());
       }
     }
   }

diff --git a/src/components/calendar.modal.ts b/src/components/calendar.modal.ts
@@ -265,7 +265,7 @@ export class CalendarModal implements OnInit {
     if (!isAfter) return -1;
 
     if (this.showYearPicker) {
-      startDate = moment(new Date(this.year, 0, 1));
+      startDate = moment([this.year, 0, 1]);
     }
 
     return defaultScrollTo.diff(startDate, 'month');

diff --git a/src/components/month-picker.component.ts b/src/components/month-picker.component.ts
@@ -2,12 +2,14 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { CalendarMonth } from "../calendar.model";
 import { defaults } from "../config";
 
+import * as moment from 'moment';
+
 @Component({
   selector: 'ion-calendar-month-picker',
   template: `
     <div [class]="'month-picker ' + color">
       <div class="month-packer-item"
-           [class.this-month]=" i === _thisMonth.getMonth() && month.original.year === _thisMonth.getFullYear()"
+           [class.this-month]=" i === _thisMonth.month() && month.original.year === _thisMonth.year()"
            *ngFor="let item of _monthFormat; let i = index">
         <button type="button" (click)="_onSelect(i)">{{item}}</button>
       </div>
@@ -20,7 +22,7 @@ export class MonthPickerComponent {
   @Input() month: CalendarMonth;
   @Input() color = defaults.COLOR;
   @Output() onSelect: EventEmitter<number> = new EventEmitter();
-  _thisMonth = new Date();
+  _thisMonth = moment();
   _monthFormat = defaults.MONTH_FORMAT;
 
   @Input()