From 2015bed6f2c4f06f7c13deb0a02fa22cc499eec5 Mon Sep 17 00:00:00 2001 From: Henrique Melhado Date: Tue, 19 Feb 2019 19:46:56 -0300 Subject: [PATCH] fix DST --- dev/package.json | 2 + dev/src/demos/demo-dst.ts | 40 +++++++++++++++++++ dev/src/demos/demo-modal-dst.ts | 40 +++++++++++++++++++ dev/src/demos/demos.module.ts | 4 ++ dev/src/demos/sub-header-calendar-modal.ts | 2 +- .../components/calendar.component.ts | 4 +- .../components/calendar.modal.ts | 2 +- .../components/month-picker.component.ts | 6 ++- .../services/calendar.service.ts | 27 ++++++++----- dev/src/pages/home/home.html | 2 + src/components/calendar.component.ts | 4 +- src/components/calendar.modal.ts | 2 +- src/components/month-picker.component.ts | 6 ++- src/services/calendar.service.ts | 27 ++++++++----- 14 files changed, 135 insertions(+), 33 deletions(-) create mode 100644 dev/src/demos/demo-dst.ts create mode 100644 dev/src/demos/demo-modal-dst.ts diff --git a/dev/package.json b/dev/package.json index 6a8f053c0..d9f74f8a2 100644 --- 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 new file mode 100644 index 000000000..9d841e85f --- /dev/null +++ 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: ` +
+

DST (Daylight Savings Time)

+ + + ` +}) +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 new file mode 100644 index 000000000..6b481df8e --- /dev/null +++ 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: ` + + ` +}) +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(); + + } + +} \ No newline at end of file diff --git a/dev/src/demos/demos.module.ts b/dev/src/demos/demos.module.ts index 5c1aa0406..5d18fbca8 100644 --- 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 index 742b011a7..4b11ca5d5 100644 --- 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 index 87a0f6dee..fd8ad5edd 100755 --- 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 index 17bc36e07..d6bc40f22 100755 --- 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 index 33ecf3f21..ab00c3e7e 100644 --- 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: `
@@ -20,7 +22,7 @@ export class MonthPickerComponent { @Input() month: CalendarMonth; @Input() color = defaults.COLOR; @Output() onSelect: EventEmitter = 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 index ad737e758..3394c7c50 100644 --- 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 = 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 { let _array: Array = []; - 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 index efc1f3d92..383f02b3c 100644 --- a/dev/src/pages/home/home.html +++ b/dev/src/pages/home/home.html @@ -15,6 +15,7 @@

modal mode

+ @@ -26,4 +27,5 @@

component mode

+ diff --git a/src/components/calendar.component.ts b/src/components/calendar.component.ts index 87a0f6dee..fd8ad5edd 100755 --- 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 index 17bc36e07..d6bc40f22 100755 --- 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 index 33ecf3f21..ab00c3e7e 100644 --- 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: `
@@ -20,7 +22,7 @@ export class MonthPickerComponent { @Input() month: CalendarMonth; @Input() color = defaults.COLOR; @Output() onSelect: EventEmitter = new EventEmitter(); - _thisMonth = new Date(); + _thisMonth = moment(); _monthFormat = defaults.MONTH_FORMAT; @Input() diff --git a/src/services/calendar.service.ts b/src/services/calendar.service.ts index ad737e758..3394c7c50 100644 --- a/src/services/calendar.service.ts +++ b/src/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 = 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 { let _array: Array = []; - 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)); + } }