ionic3-datepicker
Version:
A date picker for ionic 3 and 2 framework
253 lines • 18.8 kB
JavaScript
import { Component, ViewEncapsulation } from '@angular/core';
import { NavParams, ViewController } from 'ionic-angular';
import { DateService } from './datepicker.service';
import { FormControl } from '@angular/forms';
var DatePickerComponent = (function () {
function DatePickerComponent(viewCtrl, navParams, DatepickerService) {
this.viewCtrl = viewCtrl;
this.navParams = navParams;
this.DatepickerService = DatepickerService;
this.selectedDate = new Date();
this.active = false;
this.today = new Date();
this.nextDisabled = false;
this.previousDisabled = false;
this.config = this.navParams.data;
this.selectedDate = this.navParams.data.date;
this.initialize();
}
DatePickerComponent.prototype.initialize = function () {
this.tempDate = this.selectedDate;
this.createDateList(this.selectedDate);
this.weekdays = this.DatepickerService.getDaysOfWeek();
this.months = this.DatepickerService.getMonths();
this.years = this.DatepickerService.getYears();
this.initSelectBoxes();
this.initSelectBoxListener();
};
DatePickerComponent.prototype.initSelectBoxes = function () {
var maxDate = this.config.max;
var minDate = this.config.min;
this.maxYear = Number.parseInt(this.years[this.years.length - 1]);
this.minYear = Number.parseInt(this.years[0]);
if (maxDate) {
this.maxYear = maxDate.getFullYear();
}
if (minDate) {
this.minYear = minDate.getFullYear();
}
this.yearsMaxMin = [];
for (var _minYear = this.minYear; _minYear <= this.maxYear; _minYear++) {
this.yearsMaxMin.push(_minYear);
}
this.selectedMonth = this.getSelectedMonth();
this.selectedYear = this.getSelectedYear();
};
DatePickerComponent.prototype.initSelectBoxListener = function () {
var _this = this;
this.monthChanged = new FormControl();
this.monthChanged.valueChanges
.subscribe(function (selectedMonth) {
var monthAsNumber = _this.months.indexOf(selectedMonth);
var testDate = new Date(_this.tempDate.getTime());
testDate.setMonth(monthAsNumber);
_this.tempDate = testDate;
_this.createDateList(_this.tempDate);
_this.checkDisableButtons(monthAsNumber, testDate.getFullYear());
});
this.yearChanged = new FormControl();
this.yearChanged.valueChanges
.subscribe(function (selectedYear) {
var testDate = new Date(_this.tempDate.getTime());
testDate.setFullYear(selectedYear);
_this.tempDate = testDate;
_this.createDateList(_this.tempDate);
_this.checkDisableButtons(testDate.getMonth(), selectedYear);
});
};
DatePickerComponent.prototype.checkDisableButtons = function (selectedMonth, selectedYear) {
this.nextDisabled = selectedMonth == 11 && this.maxYear === selectedYear;
this.previousDisabled = selectedMonth == 0 && this.minYear === selectedYear;
};
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) + ((this.DatepickerService.doesStartFromMonday()) ? 1 : 0)];
};
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.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.isActualMonth = function (month) {
return month === this.today.getMonth();
};
DatePickerComponent.prototype.isActualYear = function (year) {
return year === this.today.getFullYear();
};
DatePickerComponent.prototype.isSelectedDate = function (date) {
if (!date)
return false;
return this.areEqualDates(date, this.selectedDate);
};
DatePickerComponent.prototype.isSelectedMonth = function (month) {
return month === this.tempDate.getMonth();
};
DatePickerComponent.prototype.isSelectedYear = function (year) {
return year === this.tempDate.getFullYear();
};
DatePickerComponent.prototype.selectDate = function (date) {
if (this.isDisabled(date))
return;
this.selectedDate = date;
this.selectedDate.setHours(0, 0, 0, 0);
this.tempDate = this.selectedDate;
this.config.ionSelected.emit(this.tempDate);
};
DatePickerComponent.prototype.getSelectedWeekday = function () {
return this.weekdays[this.selectedDate.getDay()];
};
DatePickerComponent.prototype.getSelectedMonth = function (date) {
if (!date) {
return this.months[this.selectedDate.getMonth()];
}
else {
return this.months[date.getMonth()];
}
};
DatePickerComponent.prototype.getTempMonth = function () {
return this.months[this.tempDate.getMonth()];
};
DatePickerComponent.prototype.getTempYear = function () {
return (this.tempDate || this.selectedDate).getFullYear();
};
DatePickerComponent.prototype.getSelectedDate = function () {
return (this.selectedDate || new Date()).getDate();
};
DatePickerComponent.prototype.getSelectedYear = function () {
return (this.selectedDate || new Date()).getFullYear();
};
DatePickerComponent.prototype.onCancel = function (e) {
if (this.config.date)
this.selectedDate = this.config.date || new Date();
this.config.ionCanceled.emit();
this.viewCtrl.dismiss();
};
;
DatePickerComponent.prototype.onDone = function (e) {
this.config.date = this.selectedDate;
this.config.ionChanged.emit(this.config.date);
this.viewCtrl.dismiss();
};
;
DatePickerComponent.prototype.selectMonthOrYear = function () {
this.createDateList(this.tempDate);
if (this.isDisabled(this.tempDate))
return;
this.selectedDate = this.tempDate;
};
DatePickerComponent.prototype.areEqualDates = function (dateA, dateB) {
return dateA.getDate() === dateB.getDate() &&
dateA.getMonth() === dateB.getMonth() &&
dateA.getFullYear() === dateB.getFullYear();
};
DatePickerComponent.prototype.limitTo = function (arr, limit) {
if (this.DatepickerService.locale === 'custom')
return arr;
if (this.DatepickerService.locale === 'de')
limit = 2;
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.getMonthRows = function () {
return [];
};
DatePickerComponent.prototype.nextMonth = function () {
var testDate = new Date(this.tempDate.getTime());
testDate.setDate(1);
if (testDate.getMonth() === 11) {
testDate.setFullYear(testDate.getFullYear() + 1);
testDate.setMonth(0);
}
else {
testDate.setMonth(testDate.getMonth() + 1);
}
if ((!this.config.max || this.config.max >= testDate) || this.config.showMaxAndMin) {
this.setDateAfterSelection(testDate);
}
};
DatePickerComponent.prototype.prevMonth = function () {
var testDate = new Date(this.tempDate.getTime());
testDate.setDate(0);
if ((!this.config.min ||
(this.config.min <= testDate)) || this.config.showMaxAndMin) {
this.setDateAfterSelection(testDate);
}
};
DatePickerComponent.prototype.setDateAfterSelection = function (testDate) {
this.tempDate = testDate;
this.createDateList(this.tempDate);
this.selectedMonth = this.getSelectedMonth(this.tempDate);
this.selectedYear = this.tempDate.getFullYear();
this.checkDisableButtons(this.tempDate.getMonth(), this.selectedYear);
};
return DatePickerComponent;
}());
export { DatePickerComponent };
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 class=\"col datepicker-month\">\n {{limitTo(getSelectedMonth(), 3)}}\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col datepicker-day-of-month \">\n {{selectedDate | date: 'd'}}\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col datepicker-year \">\n {{selectedDate | date: 'yyyy'}}\n </div>\n </div>\n </div>\n </div>\n <div class=\"datepicker-calendar\"\n [ngClass]=\"config.bodyClasses\">\n <div class=\"row col datepicker-controls\">\n <button (click)=\"prevMonth()\" [disabled]=\"previousDisabled\"\n ion-button=\"\"\n class=\"disable-hover button button-ios button-default button-default-ios\">\n <span class=\"button-inner\">\n <ion-icon name=\"arrow-back\" role=\"img\"\n class=\"icon icon-ios ion-ios-arrow-back\" aria-label=\"arrow-back\" ng-reflect-name=\"arrow-back\">\n\n </ion-icon></span>\n <div class=\"button-effect\"></div>\n </button>\n <select title=\"Month\" name=\"equiptype\" class=\"form-control\" [formControl]=\"monthChanged\" [(ngModel)]=\"selectedMonth\" required>\n <option></option>\n <option *ngFor=\"let mon of months\" [ngValue]=\"mon\">{{mon}}</option>\n </select>\n <select title=\"Month\" name=\"equiptype\" class=\"form-control\" [formControl]=\"yearChanged\" [(ngModel)]=\"selectedYear\" required>\n <option></option>\n <option *ngFor=\"let yea of yearsMaxMin\" [ngValue]=\"yea\">{{yea}}</option>\n </select>\n <button (click)=\"nextMonth()\" [disabled]=\"nextDisabled\"\n ion-button=\"\"\n class=\"disable-hover button button-ios button-default button-default-ios\">\n <span class=\"button-inner\">\n <ion-icon name=\"arrow-forward\" role=\"img\"\n class=\"icon icon-ios ion-ios-arrow-forward\" aria-label=\"arrow-forward\" ng-reflect-name=\"arrow-forward\">\n </ion-icon></span>\n <div class=\"button-effect\"></div>\n </button>\n </div>\n <div class=\"weekdays-row row\">\n <span class=\"col calendar-cell\"\n *ngFor=\"let dayOfWeek of weekdays\">\n {{limitTo(dayOfWeek, 3)}}\n </span>\n </div>\n <div class=\"calendar-wrapper\">\n <div class=\"row calendar-row\"\n *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-selected': isSelectedDate(getDate(i, j)),\n 'datepicker-current' : isActualDate(getDate(i, j)),\n 'datepicker-disabled': isDisabled(getDate(i, j)),\n 'datepicker-mark' : isMark(getDate(i, j))\n }\"\n (click)=\"selectDate(getDate(i, j))\">\n\t\t\t\t\t{{getDate(i, j) | date:'d'}}\n\t\t\t\t</span>\n </div>\n </div>\n </div>\n <div class=\"datepicker-footer\">\n <button (click)=\"onCancel($event)\"\n ion-button=\"\"\n class=\"button button-clear button-small col-offset-33 disable-hover button button-ios button-default button-default-ios\">\n <span class=\"button-inner\">{{config.cancelText || 'Cancel'}}</span>\n <div class=\"button-effect\"></div>\n </button>\n <button (click)=\"onDone($event)\"\n ion-button=\"\"\n class=\"button button-clear button-small disable-hover button button-ios button-default button-default-ios\">\n <span class=\"button-inner\">{{config.okText || 'OK'}}</span>\n <div class=\"button-effect\"></div>\n </button>\n </div>\n </div>\n ",
styles: ["\n ionic2-datepicker .datepicker-wrapper {\n height: 100%;\n background-color: white;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n\n ionic2-datepicker .datepicker-wrapper .datepicker-header {\n color: white;\n background-color: #009688;\n display: flex;\n flex-flow: column;\n height: 35%;\n }\n\n ionic2-datepicker .datepicker-wrapper .datepicker-header .date-header {\n display: flex;\n flex-flow: column;\n text-align: center;\n }\n\n ionic2-datepicker .datepicker-wrapper .datepicker-header .date-header .datepicker-day-of-month {\n font-size: 60px;\n font-weight: 700;\n }\n\n ionic2-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 }\n\n ionic2-datepicker .datepicker-wrapper .datepicker-header .weekday-header {\n padding: 8px 10px;\n background-color: #008d7f;\n }\n\n ionic2-datepicker .datepicker-wrapper .datepicker-header .weekday-header .weekday-title {\n font-weight: bold;\n text-align: center;\n }\n\n ionic2-datepicker .weekdays-row {\n text-align: center;\n }\n\n ionic2-datepicker .datepicker-calendar {\n height: calc(100% - (35% + 60px));\n }\n\n ionic2-datepicker .datepicker-calendar .datepicker-controls {\n align-items: center;\n justify-content: space-between;\n }\n\n ionic2-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\n ionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-mark {\n background-color: #5b6c6b;\n border-radius: 20px;\n }\n\n ionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-selected {\n background-color: #b6d9d6;\n border-radius: 20px;\n }\n\n ionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-current {\n color: #3caa9f;\n border-radius: 20px;\n }\n\n ionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-disabled {\n color: #aaaaaa;\n }\n\n ionic2-datepicker .datepicker-calendar .calendar-wrapper .calendar-cell {\n flex-flow: row wrap;\n text-align: center;\n }\n\n ionic2-datepicker .datepicker-footer {\n display: flex;\n justify-content: space-between;\n height: 60px;\n }\n\n ionic2-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, },
]; };
//# sourceMappingURL=datepicker.component.js.map