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));
+ }
}