ion-double-datepicker
Version:
A double-date picker for ionic
407 lines • 25.9 kB
JavaScript
import { Component, ViewEncapsulation } from "@angular/core";
import { NavParams, ViewController } from 'ionic-angular';
import { DatePickerView } from './datepicker.interface';
import { DateService } from '../services/datepicker.service';
var DatePickerComponent = (function () {
function DatePickerComponent(viewCtrl, navParams, DatepickerService) {
this.viewCtrl = viewCtrl;
this.navParams = navParams;
this.DatepickerService = DatepickerService;
this.view = DatePickerView.Calendar;
this.views = DatePickerView;
this.selectingIndex = 0;
this.touched = false;
this.today = new Date();
this.config = this.navParams.data;
if (!this.config.calendar)
this.view = this.views.Day;
if (!this.config.doubleDate) {
this.selectedDate = this.config.date || new Date();
}
else {
this.selectedDate = [];
if (Array.isArray(this.config.date)) {
debugger;
this.selectedDate = this.config.date;
}
else {
this.selectedDate = [new Date()];
}
this.selectedDate.forEach(function (s) {
s.setHours(0, 0, 0, 0);
});
}
this.initialize();
}
DatePickerComponent.prototype.initialize = function () {
if (this.config.min)
this.config.min.setHours(0, 0, 0, 0);
if (this.config.max)
this.config.max.setHours(0, 0, 0, 0);
this.tempDate = this.selectedDate;
this.config.doubleDate
? this.createDateList(this.selectedDate[0])
: this.createDateList(this.selectedDate);
this.weekdays = this.DatepickerService.getDaysOfWeek();
this.months = this.DatepickerService.getMonths();
this.years = this.DatepickerService.getYears();
this.index = 0;
};
DatePickerComponent.prototype.createDateList = function (selectedDate) {
this.dateList = this.DatepickerService.createDateList(selectedDate);
this.cols = new Array(7);
this.rows = new Array(Math.ceil(this.dateList.length / this.cols.length));
};
DatePickerComponent.prototype.getDate = function (row, col) {
return this.dateList[(row * 7 + col)];
};
DatePickerComponent.prototype.getDateAsDay = function (row, col) {
var date = this.getDate(row, col);
if (date)
return date.getDate();
};
DatePickerComponent.prototype.isDisabled = function (date) {
var _this = this;
if (!date)
return true;
if (this.config.min) {
this.config.min.setHours(0, 0, 0, 0);
if (date < this.config.min)
return true;
}
if (this.config.max) {
this.config.max.setHours(0, 0, 0, 0);
if (date > this.config.max)
return true;
}
if (this.config.disabledDates) {
return this.config.disabledDates.some(function (disabledDate) {
return _this.areEqualDates(new Date(disabledDate), date);
});
}
return false;
};
DatePickerComponent.prototype.testYear = function (year) {
if (year === undefined)
return false;
var baseDate = this.config.doubleDate ? this.tempDate[0] || new Date() : this.tempDate;
var testDate = new Date(year, baseDate.getMonth(), baseDate.getDate());
return !this.isDisabled(testDate);
};
DatePickerComponent.prototype.testMonth = function (month) {
if (month === undefined)
return false;
var baseDate = this.config.doubleDate ? this.tempDate[0] || new Date() : this.tempDate;
var testDate = new Date(baseDate.getFullYear(), month, baseDate.getDate());
return !this.isDisabled(testDate);
};
DatePickerComponent.prototype.testDay = function (day) {
if (day === undefined)
return false;
var baseDate = this.config.doubleDate ? this.tempDate[0] || new Date() : this.tempDate;
var testDate = new Date(baseDate.getFullYear(), baseDate.getMonth(), day);
return !this.isDisabled(testDate);
};
DatePickerComponent.prototype.isMark = function (date) {
var _this = this;
if (!date)
return false;
if (this.config.markDates) {
return this.config.markDates.some(function (markDate) {
return _this.areEqualDates(new Date(markDate), date);
});
}
return false;
};
DatePickerComponent.prototype.isActualDate = function (date) {
if (!date)
return false;
return this.areEqualDates(date, this.today);
};
DatePickerComponent.prototype.isSelectedDate = function (date) {
if (!date)
return false;
return this.config.doubleDate
? this.areSelectedDates(date, this.selectedDate)
: this.areEqualDates(date, this.selectedDate);
};
DatePickerComponent.prototype.isTempDate = function (date) {
if (!date)
return false;
return this.config.doubleDate
? this.areSelectedDates(date, this.tempDate)
: this.areEqualDates(date, this.tempDate);
};
DatePickerComponent.prototype.isSelectedStartDate = function (date) {
if (!date || !this.config.doubleDate || this.tempDate.length === 0)
return false;
if (this.config.doubleDate &&
this.tempDate.length === 2 &&
this.areEqualDates(this.tempDate[0], this.tempDate[1]))
return false;
return this.areEqualDates(date, this.tempDate[0]);
};
DatePickerComponent.prototype.isSelectedEndDate = function (date) {
if (!date || !this.config.doubleDate || this.tempDate.length < 2)
return false;
if (this.config.doubleDate &&
this.tempDate.length === 2 &&
this.areEqualDates(this.tempDate[0], this.tempDate[1]))
return false;
return this.areEqualDates(date, this.tempDate[1] || new Date());
};
DatePickerComponent.prototype.isBetweenDates = function (date) {
if (!date || !this.config.doubleDate || this.tempDate.length < 1)
return false;
return this.isInRange(date, this.tempDate[0], (this.tempDate[1] || new Date()));
};
DatePickerComponent.prototype.selectSingleDate = function (date) {
if (this.isDisabled(date))
return;
this.tempDate = date;
this.tempDate.setHours(0, 0, 0, 0);
this.config.ionSelected.emit(this.tempDate);
};
DatePickerComponent.prototype.selectDate = function (date) {
if (this.isDisabled(date))
return;
if (!this.config.doubleDate) {
this.selectSingleDate(date);
return;
}
if (this.tempDate.length === 2 && this.index === 0 && this.touched) {
this.tempDate = [];
}
date.setHours(0, 0, 0, 0);
this.tempDate[this.index] = date;
this.sortDates(this.tempDate);
this.selectingIndex = this.index;
this.index = (this.index + 1) % 2;
this.touched = true;
};
DatePickerComponent.prototype.getSelectedWeekday = function () {
var day = (this.tempDate[0] || new Date()).getDay();
var dayAdjust = 0;
if (this.DatepickerService.doesStartFromMonday() && day === 0)
dayAdjust = 6;
else if (this.DatepickerService.doesStartFromMonday())
dayAdjust = -1;
return this.weekdays[day + dayAdjust];
};
DatePickerComponent.prototype.getSelectedMonth = function () {
return this.config.doubleDate ?
this.months[(this.tempDate[0] || new Date()).getMonth()]
: this.months[this.tempDate.getMonth()];
};
DatePickerComponent.prototype.getDayList = function () {
var baseDate = this.config.doubleDate ? this.tempDate[0] || new Date() : this.tempDate;
var date = new Date(baseDate.getFullYear(), baseDate.getMonth(), 1);
var days = [];
while (date.getMonth() === baseDate.getMonth()) {
days.push(new Date(date).getDate());
date.setDate(date.getDate() + 1);
}
return days;
};
DatePickerComponent.prototype.getTempMonth = function () {
return this.config.doubleDate
? this.months[(this.tempDate[this.selectingIndex]).getMonth()]
: this.months[this.tempDate.getMonth()];
};
DatePickerComponent.prototype.getTempYear = function () {
return this.config.doubleDate
? this.tempDate[this.selectingIndex].getFullYear()
: (this.tempDate || this.selectedDate).getFullYear();
};
DatePickerComponent.prototype.getTempDate = function () {
return this.config.doubleDate
? this.tempDate[this.selectingIndex].getDate()
: (this.tempDate || this.selectedDate).getDate();
};
DatePickerComponent.prototype.getSelectedDate = function () {
return this.config.doubleDate
? (this.selectedDate[0]).getDate()
: this.selectedDate.getDate();
};
DatePickerComponent.prototype.getSelectedYear = function () {
return this.config.doubleDate
? (this.selectedDate[0]).getFullYear()
: this.selectedDate.getFullYear();
};
DatePickerComponent.prototype.setSelectedMonth = function (month, index) {
this.tempDate[index] = new Date(this.tempDate[index].getFullYear(), month, this.tempDate[index].getDate());
this.createDateList(this.tempDate[index]);
if (this.config.calendar)
this.view = this.views.Calendar;
};
DatePickerComponent.prototype.setSelectedDay = function (day, index) {
this.tempDate[index] = new Date(this.tempDate[index].getFullYear(), this.tempDate[index].getMonth(), day);
if (this.config.calendar)
this.view = this.views.Calendar;
};
DatePickerComponent.prototype.setSelectedYear = function (year, index) {
this.tempDate[index] = new Date(year, this.tempDate[index].getMonth(), this.tempDate[index].getDate());
this.createDateList(this.tempDate[index]);
if (this.config.calendar)
this.view = this.views.Calendar;
};
DatePickerComponent.prototype.setView = function (view, index, total, scrolledElement) {
this.view = view;
setTimeout(function () {
scrolledElement.scrollTop = (scrolledElement.scrollHeight / +total) * (+index - 1);
}, 10);
};
DatePickerComponent.prototype.onCancel = function () {
if (this.config.date)
this.selectedDate = this.config.date || [new Date(), new Date()];
this.config.ionCanceled.emit();
this.viewCtrl.dismiss();
};
;
DatePickerComponent.prototype.onDone = function () {
this.config.date = this.tempDate;
this.config.ionChanged.emit(this.config.date);
this.viewCtrl.dismiss();
};
;
DatePickerComponent.prototype.limitTo = function (arr, limit) {
if (this.DatepickerService.locale === 'custom')
return arr;
if (Array.isArray(arr))
return arr.splice(0, limit);
if (this.DatepickerService.locale === 'zh-CN' || this.DatepickerService.locale === 'zh-TW')
arr = arr.replace("星期", "");
return arr.slice(0, limit);
};
DatePickerComponent.prototype.monthShort = function (arr) {
return this.limitTo(arr, 3);
};
DatePickerComponent.prototype.dayOfWeekShort = function (arr) {
var limit = 3;
if (this.DatepickerService.locale === 'de')
limit = 2;
return this.limitTo(arr, limit);
};
DatePickerComponent.prototype.nextMonth = function () {
var base = this.config.doubleDate
? this.tempDate[this.selectingIndex]
: this.tempDate;
var testDate = new Date(base.getTime());
if (testDate.getMonth() === 11) {
testDate.setFullYear(testDate.getFullYear() + 1);
testDate.setMonth(0);
}
else {
testDate.setMonth(testDate.getMonth() + 1);
}
if (testDate.getDate() !== base.getDate()) {
testDate = new Date(testDate.getFullYear(), testDate.getMonth(), 0);
}
var maxTestDate;
if (this.config.max) {
maxTestDate = new Date(this.config.max);
maxTestDate.setDate(0);
maxTestDate.setMonth(maxTestDate.getMonth() + 1);
}
if (!maxTestDate || maxTestDate >= testDate) {
if (maxTestDate && maxTestDate.getMonth() === testDate.getMonth()) {
if (this.config.max.getDate() < testDate.getDate()) {
testDate.setDate(this.config.max.getDate());
}
}
if (this.config.doubleDate) {
this.tempDate[this.index] = testDate;
this.selectingIndex = this.index;
this.createDateList(this.tempDate[this.index]);
}
else {
this.tempDate = testDate;
this.createDateList(this.tempDate);
}
}
};
DatePickerComponent.prototype.prevMonth = function () {
var base = this.config.doubleDate
? this.tempDate[this.selectingIndex]
: this.tempDate;
var testDate = new Date(base.getTime());
testDate.setMonth(testDate.getMonth() - 1);
if (testDate.getDate() !== base.getDate()) {
testDate = new Date(testDate.getFullYear(), testDate.getMonth(), 0);
}
var minTestDate;
if (this.config.min) {
minTestDate = new Date(this.config.min);
minTestDate.setDate(1);
}
if (!minTestDate || minTestDate <= testDate) {
if (minTestDate && minTestDate.getMonth() === testDate.getMonth()) {
if (this.config.min.getDate() > testDate.getDate()) {
testDate.setDate(this.config.min.getDate());
}
}
if (this.config.doubleDate) {
this.tempDate[this.index] = testDate;
this.selectingIndex = this.index;
this.createDateList(this.tempDate[this.index]);
}
else {
this.tempDate = testDate;
this.createDateList(this.tempDate);
}
}
};
DatePickerComponent.prototype.areEqualDates = function (dateA, dateB) {
return dateA.getDate() === dateB.getDate() &&
dateA.getMonth() === dateB.getMonth() &&
dateA.getFullYear() === dateB.getFullYear();
};
DatePickerComponent.prototype.isInRange = function (date, startDate, endDate) {
if ((date.getTime() > startDate.getTime() && date.getTime() < endDate.getTime()) ||
(date.getTime() < startDate.getTime() && date.getTime() > endDate.getTime()))
return true;
return false;
};
DatePickerComponent.prototype.areSelectedDates = function (dateA, selectedDates) {
var foo = false;
selectedDates.forEach(function (ad) {
if (dateA.getDate() === ad.getDate() &&
dateA.getMonth() === ad.getMonth() &&
dateA.getFullYear() === ad.getFullYear())
foo = true;
});
return foo;
};
DatePickerComponent.prototype.getNearestDate = function (date, selectedDates) {
if (selectedDates.length === 0)
return 0;
if (selectedDates.length === 1)
return 1;
var diff = [];
selectedDates.forEach(function (sd) {
diff.push(Math.abs(date.getTime() - sd.getTime()));
});
return diff.indexOf(Math.min.apply(Math, diff));
};
DatePickerComponent.prototype.sortDates = function (dates) {
dates.sort(function (a, b) {
return a.getTime() - b.getTime();
});
};
DatePickerComponent.decorators = [
{ type: Component, args: [{
template: "\n <div class=\"datepicker-wrapper\">\n <div class=\"datepicker-header\"\n [ngClass]=\"config.headerClasses\">\n <div class=\"weekday-header\">\n <div class=\"weekday-title\">{{getSelectedWeekday()}}</div>\n </div>\n <div class=\"date-header\">\n <div class=\"row\">\n <div (tap)=\"setView(views.Month, getTempMonth(), months.length, yearScroll)\" class=\"col datepicker-month\">\n {{monthShort(getTempMonth())}}\n </div>\n </div>\n <div class=\"row\">\n <div (tap)=\"setView(views.Day, getTempDate(),getDayList().length, dayScroll)\" class=\"col datepicker-day-of-month \">\n {{getTempDate()}}\n </div>\n </div>\n <div class=\"row\">\n <div (tap)=\"setView(views.Year, getTempYear() - 1901, years.length, yearScroll)\" class=\"col datepicker-year \">\n {{ getTempYear()}}\n </div>\n </div>\n </div>\n </div>\n <div class=\"datepicker-calendar\" \n *ngIf=\"view === views.Calendar\"\n [ngClass]=\"config.bodyClasses\">\n <div class=\"row col datepicker-controls\">\n <button (tap)=\"prevMonth()\" ion-button>\n <ion-icon name=\"arrow-back\"></ion-icon>\n </button> \n {{getTempMonth()}} {{getTempYear()}}\n <button (tap)=\"nextMonth()\"ion-button>\n <ion-icon name=\"arrow-forward\"></ion-icon>\n </button>\n </div>\n <div class=\"weekdays-row row\">\n <span class=\"col calendar-cell\"\n *ngFor=\"let dayOfWeek of weekdays\">\n {{dayOfWeekShort(dayOfWeek)}}\n </span>\n </div>\n <div class=\"calendar-wrapper\">\n <div class=\"row calendar-row\" *ngFor=\"let week of rows;let i = index;\">\n <span class=\"col calendar-cell\"\n *ngFor=\"let day of cols;let j=index;\"\n [ngClass]=\"{\n 'datepicker-date-col': getDate(i, j) !== undefined,\n 'datepicker-start': isSelectedStartDate(getDate(i, j)),\n 'datepicker-end': isSelectedEndDate(getDate(i, j)),\n 'datepicker-between': isBetweenDates(getDate(i, j)),\n 'datepicker-current' : isActualDate(getDate(i, j)),\n 'datepicker-disabled': isDisabled(getDate(i, j)),\n 'datepicker-temp': isTempDate(getDate(i, j)),\n 'datepicker-mark' : isMark(getDate(i, j))\n }\"\n (tap)=\"selectDate(getDate(i, j))\">\n\t\t\t\t\t{{getDateAsDay(i, j)}}\n\t\t\t\t</span>\n </div>\n </div>\n </div>\n <div [hidden]=\"view !== views.Year\" #yearScroll class=\"datepicker-rows\">\n <ng-container *ngFor=\"let year of years\"> \n <div *ngIf=\"testYear(year) && view === views.Year\" (tap)=\"setSelectedYear(year, index)\" [class.active]=\"getTempYear() === year\" [class.selected]=\"getSelectedYear() === year\" class=\"row\">\n {{year}}\n </div>\n </ng-container>\n </div>\n <div [hidden]=\"view !== views.Month\" #monthScroll class=\"datepicker-rows\">\n <ng-container *ngFor=\"let month of months;let i = index\">\n <div *ngIf=\"testMonth(i) && view === views.Month\" (tap)=\"setSelectedMonth(i, index)\" [class.active]=\"getTempMonth() === month\" [class.selected]=\"getSelectedMonth() === month\" class=\"row\">\n {{month}}\n </div>\n </ng-container>\n </div>\n <div [hidden]=\"view !== views.Day\" #dayScroll class=\"datepicker-rows\">\n <ng-container *ngFor=\"let day of getDayList()\">\n <div class=\"row\" *ngIf=\"testDay(day) && view === views.Day\" [class.active]=\"getTempDate() === day\" [class.selected]=\"getSelectedDate() === day\" (tap)=\"setSelectedDay(day, index)\" >\n {{day}}\n </div>\n </ng-container>\n </div>\n <div class=\"datepicker-footer\">\n <button (tap)=\"onCancel()\"\n ion-button>\n {{config.cancelText || 'Cancel'}}</button>\n <button (tap)=\"onDone()\"\n ion-button>\n {{config.okText || 'OK'}}</button>\n </div>\n</div>\n ",
styles: ["\n ionic2-datepicker .col {\n padding: 5px;\n position: relative;\n width: 100%;\n margin: 0;\n min-height: 1px;\n -webkit-flex-basis: 0;\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -webkit-box-flex: 1;\n -webkit-flex-grow: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n max-width: 100%;\n }\n ionic2-datepicker .row {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-flex-wrap: wrap;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n }\nionic2-datepicker .datepicker-wrapper {\n height: 100%;\n background-color: white;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\nionic2-datepicker .datepicker-wrapper .datepicker-header {\n color: white;\n background-color: #009688;\n display: flex;\n flex-flow: column;\n height: 35%;\n}\nionic2-datepicker .datepicker-wrapper .datepicker-header .date-header {\n display: flex;\n flex-flow: column;\n text-align: center;\n}\nionic2-datepicker .datepicker-wrapper .datepicker-header .date-header .datepicker-day-of-month {\n font-size: 60px;\n font-weight: 700;\n}\nionic2-datepicker .datepicker-wrapper .datepicker-header .date-header .datepicker-year, ionic2-datepicker .datepicker-wrapper .datepicker-header .date-header .datepicker-month {\n font-size: 14px;\n margin-top: 10px;\n margin-bottom: 10px;\n}\nionic2-datepicker .datepicker-wrapper .datepicker-header .weekday-header {\n padding: 8px 10px;\n background-color: #008d7f;\n}\nionic2-datepicker .datepicker-wrapper .datepicker-header .weekday-header .weekday-title {\n font-weight: bold;\n text-align: center;\n}\nionic2-datepicker .weekdays-row {\n text-align: center;\n}\nionic2-datepicker .datepicker-calendar {\n height: calc(100% - (35% + 60px));\n}\n\nionic2-datepicker .datepicker-rows {\n height: calc(100% - (35% + 60px));\n overflow-y:scroll;\n display:flex;\n flex-direction:column;\n align-items:center;\n}\nionic2-datepicker .datepicker-rows .row {\n min-height: 30px;\n display: flex;\n align-items: center;\n align-content: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n}\n\nionic2-datepicker .datepicker-rows .row.selected {\n background-color: #b6d9d6;\n border-radius: 20px;\n}\n\nionic2-datepicker .datepicker-rows .row.active {\n background-color: #b6c2d9;\n border-radius: 20px;\n}\n\nionic2-datepicker .datepicker-calendar .datepicker-controls {\n align-items: center;\n justify-content: space-between;\n}\nionic2-datepicker .datepicker-calendar .calendar-wrapper {\n height: calc(100% - 60px - 40px);\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n}\n\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-mark {\n background-color:#5b6c6b;\n border-radius: 20px;\n}\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-start {\n background-color: #2e72e1;\n}\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-end {\n background-color: #2e72e1;\n}\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-between {\n background-color: #c5d2eb;\n}\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-start:before {\n content: '';\n display: block;\n position: absolute;\n width: 0;\n right: -5px;\n z-index: 1;\n height: 0;\n top: 7.2px;\n border-top: 6px solid transparent;\n border-left: 6px solid #2D72E1;\n border-bottom: 6px solid transparent;\n}\n\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-end:before {\n content: '';\n display: block;\n position: absolute;\n width: 0;\n left: -5px;\n z-index: 1;\n height: 0;\n top: 7.2px;\n border-top: 6px solid transparent;\n border-right: 6px solid #2D72E1;\n border-bottom: 6px solid transparent;\n}\n\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-temp {\n background-color: #6f90cc;\n border-radius: 0px;\n}\n\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-current {\n border-radius: 0px;\n}\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-disabled {\n color: #aaaaaa;\n}\n\nionic2-datepicker .datepicker-calendar .calendar-wrapper .calendar-cell {\n flex-flow: row wrap;\n text-align: center;\n}\nionic2-datepicker .datepicker-footer {\n display: flex;\n justify-content: space-between;\n height: 60px;\n}\nionic2-datepicker .datepicker-footer button {\n width: 100%;\n}\n\n "],
selector: 'ionic2-datepicker',
encapsulation: ViewEncapsulation.None,
},] },
];
DatePickerComponent.ctorParameters = function () { return [
{ type: ViewController, },
{ type: NavParams, },
{ type: DateService, },
]; };
return DatePickerComponent;
}());
export { DatePickerComponent };
//# sourceMappingURL=datepicker.component.js.map