@jermeo/ionic4-datepicker
Version:
ionic4-datepicker inspired by rajeshwar patlolla ionic1 datepicker
870 lines (864 loc) • 69 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('moment'), require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@ionic/angular')) :
typeof define === 'function' && define.amd ? define('@jermeo/ionic4-datepicker', ['exports', 'moment', '@angular/common', '@angular/core', '@angular/forms', '@ionic/angular'], factory) :
(factory((global.jermeo = global.jermeo || {}, global.jermeo['ionic4-datepicker'] = {}),global.moment_,global.ng.common,global.ng.core,global.ng.forms,global.angular));
}(this, (function (exports,moment_,common,i0,forms,angular) { 'use strict';
/**
* @fileoverview added by tsickle
* Generated from: lib/ionic4-datepicker.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Ionic4DatepickerService = /** @class */ (function () {
function Ionic4DatepickerService() {
this.isModalOpen = false;
}
Ionic4DatepickerService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
Ionic4DatepickerService.ctorParameters = function () { return []; };
/** @nocollapse */ Ionic4DatepickerService.ngInjectableDef = i0.ɵɵdefineInjectable({ factory: function Ionic4DatepickerService_Factory() { return new Ionic4DatepickerService(); }, token: Ionic4DatepickerService, providedIn: "root" });
return Ionic4DatepickerService;
}());
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __awaiter(thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var moment = moment_;
var Ionic4DatepickerModalComponent = /** @class */ (function () {
function Ionic4DatepickerModalComponent(navParams, modalCtrl, datePickerService) {
this.navParams = navParams;
this.modalCtrl = modalCtrl;
this.datePickerService = datePickerService;
// inputs
this.mainObj = {};
this.selectedDate = {};
// component variables
this.selctedDateEpoch = 0;
this.disabledDates = [];
this.highlightedDates = {};
this.disableWeekdays = [];
this.data = {
currentMonth: '',
currentYear: '',
currentMonthSelected: ''
};
this.rows = [0, 7, 14, 21, 28, 35];
this.cols = [0, 1, 2, 3, 4, 5, 6];
this.monthsList = ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
this.weeksList = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
this.yearsList = [];
this.daysList = [];
this.yearInAscending = false;
this.momentLocale = 'en-US';
// month year scroll variables
this.isMonthYearSelectorOpen = false;
this.scrollingMonthOrYearArray = [];
this.isSelectedDateFound = false;
this.today = this.resetHMSM(new Date()).getTime();
if (this.navParams.get('selectedDate')) {
// console.log('Selected date =>', this.navParams.get('selectedDate'));
this.selectedDate.date = this.navParams.get('selectedDate');
this.isSelectedDateFound = true;
}
this.mainObj = this.initDatePickerObj(this.navParams.get('objConfig'));
}
/**
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.datePickerService.isModalOpen = true;
this.initDatePicker();
};
/**
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.datePickerService.isModalOpen = false;
};
// Reset the hours, minutes, seconds and milli seconds
// Reset the hours, minutes, seconds and milli seconds
/**
* @param {?} currentDate
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.resetHMSM =
// Reset the hours, minutes, seconds and milli seconds
/**
* @param {?} currentDate
* @return {?}
*/
function (currentDate) {
currentDate.setHours(0);
currentDate.setMinutes(0);
currentDate.setSeconds(0);
currentDate.setMilliseconds(0);
return currentDate;
};
// this method change month or year list to dateList
// this method change month or year list to dateList
/**
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.changeToDateList =
// this method change month or year list to dateList
/**
* @return {?}
*/
function () {
// console.log('changeToDateList');
this.isMonthYearSelectorOpen = false;
};
// Virtual scroll create for select year and month
// Virtual scroll create for select year and month
/**
* @param {?} isMonthSelect
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.selectMonthYear =
// Virtual scroll create for select year and month
/**
* @param {?} isMonthSelect
* @return {?}
*/
function (isMonthSelect) {
// console.log('selectMonthYear', i);
this.isMonthYearSelectorOpen = true;
this.isMonthSelect = isMonthSelect;
this.scrollingMonthOrYearArray = isMonthSelect ? this.mainObj.monthsList : this.yearsList;
this.selectedYearOrMonth = isMonthSelect ? this.data.currentMonth : this.data.currentYear;
/** @type {?} */
var index = this.scrollingMonthOrYearArray.indexOf(this.selectedYearOrMonth);
/** @type {?} */
var iditem = index + 'list';
setTimeout(( /**
* @return {?}
*/function () {
document.getElementById(iditem).scrollIntoView();
}), 100);
};
// select month or year
// select month or year
/**
* @param {?} monthYear
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.onChangeMonthYear =
// select month or year
/**
* @param {?} monthYear
* @return {?}
*/
function (monthYear) {
// console.log('onChangeMonthYear', monthYear);
if (monthYear) {
if (this.isMonthSelect) {
this.data.currentMonth = monthYear;
this.selectedYearOrMonth = this.data.currentMonth;
/** @type {?} */
var monthNumber = this.monthsList.indexOf(this.data.currentMonth);
this.currentDate.setDate(1);
this.currentDate.setMonth(monthNumber);
}
else {
this.data.currentYear = monthYear;
this.selectedYearOrMonth = this.data.currentYear;
this.currentDate.setFullYear(this.data.currentYear);
this.refreshDateList(this.currentDate);
}
this.refreshDateList(this.currentDate);
}
this.isMonthYearSelectorOpen = false;
};
// Previous month
// Previous month
/**
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.prevMonth =
// Previous month
/**
* @return {?}
*/
function () {
// console.log('prevNext', this.currentDate);
/** @type {?} */
var currentMonth = this.currentDate.getMonth();
/** @type {?} */
var currentYear = this.currentDate.getFullYear();
if (currentYear <= this.yearsList[(this.yearsList.length - 1)] && currentMonth === 0) {
return;
}
if (currentMonth === 1) {
this.currentDate.setFullYear(currentYear);
}
this.currentDate.setMonth(currentMonth - 1);
this.data.currentMonth = this.mainObj.monthsList[currentMonth];
this.data.currentYear = currentYear;
this.refreshDateList(this.currentDate);
// this.changeDaySelected();
};
// Next month
// Next month
/**
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.nextMonth =
// Next month
/**
* @return {?}
*/
function () {
// console.log('nextNext', this.currentDate);
/** @type {?} */
var currentMonth = this.currentDate.getMonth();
/** @type {?} */
var currentYear = this.currentDate.getFullYear();
if (currentYear >= this.yearsList[0] && currentMonth === 11) {
return;
}
if (currentMonth === 11) {
this.currentDate.setFullYear(currentYear);
}
this.currentDate.setDate(1);
this.currentDate.setMonth(currentMonth + 1);
this.data.currentMonth = this.mainObj.monthsList[currentMonth];
this.data.currentYear = currentYear;
this.refreshDateList(this.currentDate);
// this.changeDaySelected();
};
// changeDaySelected ( day selection changes )
// changeDaySelected ( day selection changes )
/**
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.changeDaySelected =
// changeDaySelected ( day selection changes )
/**
* @return {?}
*/
function () {
// console.log('changeDaySelected');
/** @type {?} */
var newSelectedDate = new Date(this.selctedDateEpoch);
newSelectedDate.setMonth(this.currentDate.getMonth());
newSelectedDate.setYear(this.currentDate.getFullYear());
this.selctedDateEpoch = newSelectedDate.getTime();
this.selectedDateString = this.formatDate();
// this.closeModal(this.selctedDateEpoch);
};
// Date selected
// Date selected
/**
* @param {?} selectedDate
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.dateSelected =
// Date selected
/**
* @param {?} selectedDate
* @return {?}
*/
function (selectedDate) {
// console.log('dateSelected =>', selectedDate);
if (selectedDate && !selectedDate.disabled) {
if (!selectedDate || Object.keys(selectedDate).length === 0) {
return;
}
this.isSelectedDateFound = true;
this.selctedDateEpoch = selectedDate.epoch;
this.selectedDateString = this.formatDate();
if (this.mainObj.closeOnSelect) {
this.closeModal(this.selctedDateEpoch);
}
}
};
// Set today as date for the modal
// Set today as date for the modal
/**
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.setIonicDatePickerTodayDate =
// Set today as date for the modal
/**
* @return {?}
*/
function () {
// console.log('setIonicDatePickerTodayDate');
/** @type {?} */
var today = new Date(this.today);
/** @type {?} */
var today_obj = {
date: today.getDate(),
month: today.getMonth(),
year: today.getFullYear(),
day: today.getDay(),
epoch: today.getTime(),
disabled: false
};
this.dateSelected(today_obj);
this.refreshDateList(new Date());
this.selctedDateEpoch = this.resetHMSM(today).getTime();
this.selectedDateString = this.formatDate();
// this.closeModal(this.selctedDateEpoch);
};
// Set date for the modal
// Set date for the modal
/**
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.setIonicDatePickerDate =
// Set date for the modal
/**
* @return {?}
*/
function () {
// console.log('setIonicDatePickerDate');
this.closeModal(this.selctedDateEpoch);
};
// Setting the disabled dates list.
// Setting the disabled dates list.
/**
* @param {?} obj
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.setDisabledDates =
// Setting the disabled dates list.
/**
* @param {?} obj
* @return {?}
*/
function (obj) {
// console.log('setDisabledDates =>', obj);
if (!obj.disabledDates || obj.disabledDates.length === 0) {
this.disabledDates = [];
}
else {
this.disabledDates = [];
for (var i = 0; i < obj.disabledDates.length; i++) {
// val = resetHMSM(new Date(val));
this.disabledDates.push(this.resetHMSM(new Date(obj.disabledDates[i])).getTime());
}
}
};
// Set hightlighted dates
// Set hightlighted dates
/**
* @param {?} obj
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.setHightlightedDates =
// Set hightlighted dates
/**
* @param {?} obj
* @return {?}
*/
function (obj) {
if (!obj.highlightedDates || obj.highlightedDates.length === 0) {
this.highlightedDates = {};
}
else {
this.highlightedDates = {};
for (var i = 0; i < obj.highlightedDates.length; i++) {
/** @type {?} */
var hDate = obj.highlightedDates[i].date;
/** @type {?} */
var hColor = obj.highlightedDates[i].color;
/** @type {?} */
var hFontColor = obj.highlightedDates[i].fontColor;
/** @type {?} */
var hDateTime = this.resetHMSM(new Date(hDate)).getTime();
this.highlightedDates[hDateTime] = { color: hColor, fontColor: hFontColor };
}
}
};
// Refresh the list of the dates of a month
// Refresh the list of the dates of a month
/**
* @param {?} currentDate
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.refreshDateList =
// Refresh the list of the dates of a month
/**
* @param {?} currentDate
* @return {?}
*/
function (currentDate) {
// console.log('refreshDateList =>', currentDate);
currentDate = this.resetHMSM(currentDate);
this.currentDate = currentDate;
/** @type {?} */
var firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDate();
/** @type {?} */
var lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
this.monthsList = [];
if (this.mainObj.monthsList && this.mainObj.monthsList.length === 12) {
this.monthsList = this.mainObj.monthsList;
}
else {
this.monthsList = this.monthsList;
}
this.yearsList = this.getYearsList(this.mainObj.from, this.mainObj.to);
this.daysList = [];
/** @type {?} */
var tempDate;
/** @type {?} */
var disabled;
this.firstDayEpoch = this.resetHMSM(new Date(currentDate.getFullYear(), currentDate.getMonth(), firstDay)).getTime();
this.lastDayEpoch = this.resetHMSM(new Date(currentDate.getFullYear(), currentDate.getMonth(), lastDay)).getTime();
for (var i = firstDay; i <= lastDay; i++) {
tempDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
disabled = false;
/** @type {?} */
var day = tempDate.getDay();
if (this.disableWeekdays.length > 0) {
if (this.disableWeekdays.indexOf(day) >= 0) {
disabled = this.disableWeekdays.indexOf(day) >= 0;
}
else {
disabled = false;
}
}
if (this.disabledDates.length > 0) {
if (this.disabledDates.indexOf(tempDate.getTime()) >= 0) {
disabled = true;
}
}
if (this.fromDate && !disabled) {
disabled = (tempDate.getTime() < this.fromDate)
|| this.mainObj.disableWeekDays.indexOf(tempDate.getDay()) >= 0;
}
if (this.toDate && !disabled) {
disabled = (tempDate.getTime() > this.toDate)
|| this.mainObj.disableWeekDays.indexOf(tempDate.getDay()) >= 0;
}
/** @type {?} */
var hightLightDate = this.highlightedDates[tempDate.getTime()];
/** @type {?} */
var fontColor = null;
if (tempDate.getDay() === 0 && this.mainObj.isSundayHighlighted && this.mainObj.isSundayHighlighted.fontColor) {
fontColor = this.mainObj.isSundayHighlighted.fontColor;
}
else if (hightLightDate && hightLightDate.fontColor) {
fontColor = hightLightDate.fontColor;
}
this.daysList.push({
date: tempDate.getDate(),
month: tempDate.getMonth(),
year: tempDate.getFullYear(),
day: tempDate.getDay(),
epoch: tempDate.getTime(),
disabled: disabled,
color: hightLightDate && hightLightDate.color ? hightLightDate.color : null,
fontColor: fontColor
// fontColor: hightLightDate && hightLightDate.fontColor ? hightLightDate.fontColor : null
});
}
// To set Monday as the first day of the week.
/** @type {?} */
var firstDayMonday = this.daysList[0].day - this.mainObj.mondayFirst;
firstDayMonday = (firstDayMonday < 0) ? 6 : firstDayMonday;
for (var j = 0; j < firstDayMonday; j++) {
this.daysList.unshift({});
}
this.rows = [0, 7, 14, 21, 28, 35];
this.cols = [0, 1, 2, 3, 4, 5, 6];
this.data.currentMonth = this.mainObj.monthsList[currentDate.getMonth()];
this.data.currentYear = currentDate.getFullYear();
this.data.currentMonthSelected = this.data.currentMonth;
this.currentYearSelected = this.data.currentYear;
this.numColumns = 7;
};
// Setting up the initial object
// Setting up the initial object
/**
* @param {?} ipObj
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.setInitialObj =
// Setting up the initial object
/**
* @param {?} ipObj
* @return {?}
*/
function (ipObj) {
// console.log('setInitialObj =>', ipObj);
this.mainObj = ipObj;
if (this.isSelectedDateFound) {
this.isSelectedDateFound = true;
this.selctedDateEpoch = this.resetHMSM(this.mainObj.inputDate).getTime();
}
this.selectedDateString = this.formatDate();
if (this.mainObj.weeksList && this.mainObj.weeksList.length === 7) {
this.weeksList = this.mainObj.weeksList;
}
if (this.mainObj.mondayFirst) {
this.weeksList.push(this.mainObj.weeksList.shift());
}
if (this.mainObj.yearInAscending) {
this.yearInAscending = this.mainObj.yearInAscending;
}
if (this.mainObj.momentLocale) {
this.momentLocale = this.mainObj.momentLocale;
}
this.disableWeekdays = this.mainObj.disableWeekDays;
this.setDisabledDates(this.mainObj);
this.refreshDateList(this.mainObj.inputDate);
};
// for dismiss modal
// for dismiss modal
/**
* @param {?} selectedDate
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.closeModal =
// for dismiss modal
/**
* @param {?} selectedDate
* @return {?}
*/
function (selectedDate) {
// console.log('closeModal => ', selectedDate);
this.modalCtrl.getTop();
/** @type {?} */
var formattedDate = moment(selectedDate).format(this.mainObj.dateFormat);
this.modalCtrl.dismiss({ 'date': formattedDate });
};
// close modal button
// close modal button
/**
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.closeIonicDatePickerModal =
// close modal button
/**
* @return {?}
*/
function () {
// console.log('closeIonicDatePickerModal');
this.closeModal(null);
};
// get years list ( GIVE HERE MIN OR MAX YEAR IN DATE_PICKER )
// get years list ( GIVE HERE MIN OR MAX YEAR IN DATE_PICKER )
/**
* @param {?} from
* @param {?} to
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.getYearsList =
// get years list ( GIVE HERE MIN OR MAX YEAR IN DATE_PICKER )
/**
* @param {?} from
* @param {?} to
* @return {?}
*/
function (from, to) {
// console.log('getYearsList =>', from, to);
/** @type {?} */
var yearsList = [];
/** @type {?} */
var minYear = 1950;
/** @type {?} */
var maxYear = new Date().getFullYear() + 1;
minYear = from ? new Date(from).getFullYear() : minYear;
maxYear = to ? new Date(to).getFullYear() : maxYear;
// console.log('getYearsList: ', this.yearInAscending);
if (this.yearInAscending) {
for (var i = minYear; i <= maxYear; i++) {
yearsList.push(i);
}
}
else {
for (var i = maxYear; i >= minYear; i--) {
yearsList.push(i);
}
}
return yearsList;
};
// Init Date-Picker
// Init Date-Picker
/**
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.initDatePicker =
// Init Date-Picker
/**
* @return {?}
*/
function () {
this.fromDate = '';
this.toDate = '';
// $scope.mainObj = angular.extend({}, config, ipObj);
if (this.mainObj.from) {
this.fromDate = this.resetHMSM(new Date(this.mainObj.from)).getTime();
}
if (this.mainObj.to) {
this.toDate = this.resetHMSM(new Date(this.mainObj.to)).getTime();
}
// if (ipObj.disableWeekdays && this.config.disableWeekdays) {
// this.mainObj.disableWeekDays = ipObj.disableWeekdays.concat(this.config.disableWeekdays);
// }
this.setInitialObj(this.mainObj);
};
// Init DatePicker Object
// Init DatePicker Object
/**
* @param {?} config
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.initDatePickerObj =
// Init DatePicker Object
/**
* @param {?} config
* @return {?}
*/
function (config) {
// const config = this.mainObj;
if (config.inputDate && !this.selectedDate.date) {
this.isSelectedDateFound = true;
this.selectedDate.date = config.inputDate;
}
/** @type {?} */
var objConfig = {};
objConfig.from = config.fromDate ? config.fromDate : '';
objConfig.to = config.toDate ? config.toDate : '';
objConfig.showTodayButton = config.showTodayButton === undefined ? true : config.showTodayButton;
objConfig.closeOnSelect = config.closeOnSelect ? config.closeOnSelect : false;
objConfig.disableWeekDays = config.disableWeekDays ? config.disableWeekDays : [];
objConfig.mondayFirst = config.mondayFirst ? config.mondayFirst : false;
objConfig.setLabel = config.setLabel ? config.setLabel : 'Set';
objConfig.todayLabel = config.todayLabel ? config.todayLabel : 'Today';
objConfig.closeLabel = config.closeLabel ? config.closeLabel : 'Close';
objConfig.disabledDates = config.disabledDates ? config.disabledDates : [];
objConfig.titleLabel = config.titleLabel ? config.titleLabel : null;
objConfig.showHeader = config.showHeader === undefined ? true : config.showHeader;
objConfig.showFooter = config.showFooter === undefined ? true : config.showFooter;
objConfig.showDateInTitle = config.showDateInTitle === undefined ? true : config.showDateInTitle;
objConfig.monthsList = config.monthsList ? config.monthsList : this.monthsList;
objConfig.monthsList = __spread(objConfig.monthsList);
objConfig.weeksList = config.weeksList ? config.weeksList : this.weeksList;
objConfig.weeksList = __spread(objConfig.weeksList);
objConfig.dateFormat = config.dateFormat ? config.dateFormat : 'DD MMM YYYY';
// console.log(this.selectedDate.date, objConfig.dateFormat, moment.locale());
objConfig.clearButton = config.clearButton ? config.clearButton : false;
objConfig.yearInAscending = config.yearInAscending ? config.yearInAscending : false;
objConfig.momentLocale = config.momentLocale ? config.momentLocale : 'en-US';
moment.locale(objConfig.momentLocale);
objConfig.inputDate = this.selectedDate.date ? moment(this.selectedDate.date, objConfig.dateFormat).toDate() : new Date();
objConfig.btnCloseSetInReverse = config.btnCloseSetInReverse ? config.btnCloseSetInReverse : false;
objConfig.btnProperties = {};
if (config.btnProperties) {
/** @type {?} */
var btnProperties = config.btnProperties;
objConfig.btnProperties.expand = btnProperties.expand ? btnProperties.expand : 'block';
objConfig.btnProperties.fill = btnProperties.fill ? btnProperties.fill : 'solid';
objConfig.btnProperties.size = btnProperties.size ? btnProperties.size : 'default';
objConfig.btnProperties.color = btnProperties.color ? btnProperties.color : '';
objConfig.btnProperties.disabled = btnProperties.disabled ? btnProperties.disabled : false;
objConfig.btnProperties.strong = btnProperties.strong ? btnProperties.strong : false;
}
else {
objConfig.btnProperties.expand = 'block';
objConfig.btnProperties.fill = 'solid';
objConfig.btnProperties.size = 'default';
objConfig.btnProperties.disabled = false;
objConfig.btnProperties.strong = false;
}
objConfig.arrowNextPrev = {};
if (config.arrowNextPrev) {
/** @type {?} */
var arrowNextPrev = config.arrowNextPrev;
objConfig.arrowNextPrev.nextArrowSrc = arrowNextPrev.nextArrowSrc ? arrowNextPrev.nextArrowSrc : false;
objConfig.arrowNextPrev.prevArrowSrc = arrowNextPrev.prevArrowSrc ? arrowNextPrev.prevArrowSrc : false;
}
objConfig.highlightedDates = [];
if (config.highlightedDates && config.highlightedDates.length > 0) {
objConfig.highlightedDates = config.highlightedDates;
this.setHightlightedDates(objConfig);
}
objConfig.isSundayHighlighted = {};
if (config.isSundayHighlighted) {
/** @type {?} */
var isSundayHighlighted = config.isSundayHighlighted;
objConfig.isSundayHighlighted.fontColor = isSundayHighlighted.fontColor ? isSundayHighlighted.fontColor : null;
}
// console.log('config =>', objConfig);
return objConfig;
};
// Format date
// Format date
/**
* @return {?}
*/
Ionic4DatepickerModalComponent.prototype.formatDate =
// Format date
/**
* @return {?}
*/
function () {
// console.log('formatDate: ', this.selctedDateEpoch, new Date(this.selctedDateEpoch));
return moment(this.selctedDateEpoch).format(this.mainObj.dateFormat);
};
Ionic4DatepickerModalComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'li-ionic4-datepicker-modal',
template: "<ion-header [hidden]=\"!mainObj?.showHeader\">\n <ion-toolbar (click)=\"changeToDateList()\" class=\"ion-no-padding\">\n <ion-title>\n <h1 *ngIf=\"mainObj?.titleLabel\">{{mainObj?.titleLabel}}</h1>\n <span *ngIf=\"mainObj?.showDateInTitle\">{{selectedDateString}}</span>\n </ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content forceOverscroll=\"false\" class=\"ionic_datepicker_modal_content\">\n <ion-grid class=\"dp-month-year-container\" [ngClass]=\"isMonthYearSelectorOpen ? 'dp-virual-scroller-hide' : 'dp-virual-scroller-show'\">\n <ion-row>\n <ion-col size=\"1.5\" class=\"dp-left-right-arrow\" (click)=\"prevMonth()\">\n <ion-button [ngClass]=\"{'pointer_events_none':((firstDayEpoch - 86400000) < fromDate)}\">\n <ion-icon *ngIf=\"!mainObj?.arrowNextPrev?.prevArrowSrc\" name=\"arrow-back\"></ion-icon>\n <ion-icon *ngIf=\"mainObj?.arrowNextPrev?.prevArrowSrc\" src=\"{{mainObj?.arrowNextPrev?.prevArrowSrc}}\"></ion-icon>\n </ion-button>\n </ion-col>\n <ion-col size=\"9\">\n <ion-grid>\n <ion-row>\n <ion-col class=\"dp-select-month-year\" size=\"5.5\" class=\"ion-no-padding\" (click)=\"selectMonthYear(true)\">\n <ion-button class=\"dp-buttons\">\n {{ data.currentMonth }}\n <ion-icon name=\"md-arrow-dropdown\" class=\"dp-down-arrow\"></ion-icon>\n </ion-button>\n </ion-col>\n <ion-col size=\"1\"></ion-col>\n <ion-col class=\"dp-select-month-year\" size=\"5.5\" class=\"ion-no-padding\" (click)=\"selectMonthYear(false)\">\n <ion-button class=\"dp-buttons\">\n {{ data.currentYear }}\n <ion-icon name=\"md-arrow-dropdown\" class=\"dp-down-arrow\"></ion-icon>\n </ion-button>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-col>\n <ion-col size=\"1.5\" class=\"dp-left-right-arrow\" (click)=\"nextMonth()\">\n <ion-button [ngClass]=\"{'pointer_events_none':((lastDayEpoch + 86400000)> toDate)}\">\n <ion-icon *ngIf=\"!mainObj?.arrowNextPrev?.nextArrowSrc\" name=\"arrow-forward\"></ion-icon>\n <ion-icon *ngIf=\"mainObj?.arrowNextPrev?.nextArrowSrc\" src=\"{{mainObj?.arrowNextPrev?.nextArrowSrc}}\"></ion-icon>\n </ion-button>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-grid class=\"dp-weeks-container\" *ngIf=\"daysList\" [ngClass]=\"isMonthYearSelectorOpen ? 'dp-virual-scroller-hide' : 'dp-virual-scroller-show'\">\n <ion-row class=\" dp-weeks-name\">\n <ion-col *ngFor=\"let weekName of mainObj?.weeksList; let i = index\">\n <!-- <div class=\"weeks\">{{weekName}} {{i}}</div> -->\n <div class=\"weeks\" *ngIf=\"mainObj?.mondayFirst\"\n [style.color]=\"mainObj?.isSundayHighlighted && i === 6 ? mainObj?.isSundayHighlighted.fontColor : ''\">\n {{weekName}}</div>\n <div class=\"weeks\" *ngIf=\"!mainObj?.mondayFirst\"\n [style.color]=\"mainObj?.isSundayHighlighted && i === 0 ? mainObj?.isSundayHighlighted.fontColor : ''\">\n {{weekName}}</div>\n </ion-col>\n </ion-row>\n <ion-row *ngFor=\"let row of rows;\" class=\"dp-days-list\">\n <ion-col *ngFor=\"let col of cols; let i = index ;\" (click)=\"dateSelected(daysList[row + i])\"\n [style.background-color]=\"(daysList[row + i]?.color) ? (daysList[row + i]?.color) : ''\"\n [style.border-radius]=\"(daysList[row + i]?.color) ? '4px' : ''\" class=\"ion-no-padding\" [ngClass]=\"{\n 'dp-selecteddate': (daysList[row + i]?.epoch === selctedDateEpoch),\n 'dp-today' : (daysList[row + i]?.epoch == today),\n 'disabled' : (daysList[row + i]?.disabled)}\">\n <div class=\"days\" [style.color]=\"(daysList[row + i]?.fontColor) ? (daysList[row + i]?.fontColor) : ''\">\n {{daysList[row + col]?.date}}\n </div>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-col>\n </ion-row>\n </ion-grid>\n <ion-list class=\"dp-month-year-scroll-container\" [ngClass]=\"isMonthYearSelectorOpen ? 'dp-virual-scroller-show' : 'dp-virual-scroller-hide'\">\n <ion-item *ngFor=\"let monthYear of scrollingMonthOrYearArray;let i=index;\" id=\"{{i +'list'}}\" (click)=\"onChangeMonthYear(monthYear)\">\n <ion-label [ngClass]=\"selectedYearOrMonth === monthYear ? 'dp-selected' : ''\">{{ monthYear }}</ion-label>\n </ion-item>\n </ion-list>\n</ion-content>\n\n<ion-footer [hidden]=\"!mainObj?.showFooter\">\n <ion-toolbar class=\"ion-no-padding\">\n <ion-grid class=\"ion-no-padding\">\n <ion-row class=\"ion-no-padding\" [ngClass]=\"mainObj?.btnCloseSetInReverse ? 'dp-btn-set-close-in-reverse' : ''\">\n <ion-col class=\"ion-no-padding\">\n <ion-button class=\"ion-button\" expand=\"{{mainObj?.btnProperties?.expand}}\" fill=\"{{mainObj?.btnProperties?.fill}}\"\n size=\"{{mainObj?.btnProperties?.size}}\" color=\"{{mainObj?.btnProperties?.color}}\" disabled=\"{{mainObj?.btnProperties?.disabled}}\"\n strong=\"{{mainObj?.btnProperties?.strong}}\" (click)=\"closeIonicDatePickerModal()\">\n {{mainObj?.closeLabel}}\n </ion-button>\n </ion-col>\n <ion-col class=\"ion-no-padding\" *ngIf=\"mainObj?.showTodayButton\">\n <ion-button class=\"ion-button\" expand=\"{{mainObj?.btnProperties?.expand}}\" fill=\"{{mainObj?.btnProperties?.fill}}\"\n size=\"{{mainObj?.btnProperties?.size}}\" color=\"{{mainObj?.btnProperties?.color}}\" disabled=\"{{mainObj?.btnProperties?.disabled}}\"\n strong=\"{{mainObj?.btnProperties?.strong}}\" (click)=\"setIonicDatePickerTodayDate()\">\n {{mainObj?.todayLabel}}\n </ion-button>\n </ion-col>\n <ion-col class=\"ion-no-padding\" *ngIf=\"!mainObj?.closeOnSelect\">\n <ion-button class=\"ion-button\" expand=\"{{mainObj?.btnProperties?.expand}}\"\n fill=\"{{mainObj?.btnProperties?.fill}}\" size=\"{{mainObj?.btnProperties?.size}}\"\n color=\"{{mainObj?.btnProperties?.color}}\"\n disabled=\"{{mainObj?.btnProperties?.disabled || !isSelectedDateFound}}\"\n strong=\"{{mainObj?.btnProperties?.strong}}\" (click)=\"setIonicDatePickerDate()\">\n {{mainObj?.setLabel}}\n </ion-button>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-toolbar>\n</ion-footer>",
styles: [":host .no-scroll{--overflow:hidden}:host ion-header{height:60px}:host ion-header ion-toolbar{--background:var(--ion-color-primary);-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;color:var(--ion-color-primary-contrast);min-height:60px}:host ion-header ion-toolbar ion-title{font-size:20px;font-weight:700;text-align:center;padding:0;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:100%;cursor:pointer}:host ion-header ion-toolbar ion-title h1{font-size:14px;margin:0 0 4px}:host .ionic_datepicker_modal_content .dp-month-year-container ion-col{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}:host .ionic_datepicker_modal_content .dp-month-year-container ion-col ion-grid{width:100%}:host .ionic_datepicker_modal_content .dp-month-year-container ion-col ion-grid .dp-select-month-year{border-bottom:1.5px solid;border-bottom-color:var(--ion-color-primary)}:host .ionic_datepicker_modal_content .dp-month-year-container ion-col ion-grid .dp-select-month-year .dp-buttons{width:100%;height:40px;margin:0;padding:0;color:var(--ion-color-primary);--background:transparent;--box-shadow:none}:host .ionic_datepicker_modal_content .dp-month-year-container ion-col ion-grid .dp-select-month-year .dp-buttons.activated{--background-activated:transparent;--color-activated:var(--ion-color-primary)}:host .ionic_datepicker_modal_content .dp-month-year-container ion-col ion-grid .dp-select-month-year .dp-down-arrow{position:absolute;width:16px;right:0;top:10px;color:var(--ion-color-primary)}:host .ionic_datepicker_modal_content .dp-month-year-container .dp-left-right-arrow ion-button{--background:transparent;--background-hover:transparent;--box-shadow:0;color:var(--ion-color-primary)}:host .ionic_datepicker_modal_content .dp-month-year-container .dp-left-right-arrow ion-button:focus{outline:0}:host .ionic_datepicker_modal_content .dp-month-year-container .dp-left-right-arrow ion-button.activated{--ion-color-primary-shade:transparent;--ion-color-primary-contrast:var(--ion-color-primary-tint)}:host .ionic_datepicker_modal_content .dp-weeks-container{margin:4px 0}:host .ionic_datepicker_modal_content .dp-weeks-container .dp-weeks-name ion-col{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center}:host .ionic_datepicker_modal_content .dp-weeks-container .dp-weeks-name ion-col .weeks{width:14%;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;font-weight:700}:host .ionic_datepicker_modal_content .dp-weeks-container .dp-days-list ion-col{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;padding:10px;cursor:pointer}:host .ionic_datepicker_modal_content .dp-weeks-container .dp-days-list ion-col .days{width:14%;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center}:host .ionic_datepicker_modal_content .dp-selecteddate{background:var(--ion-color-primary);color:var(--ion-color-primary-contrast);border-radius:4px;font-weight:500}:host .ionic_datepicker_modal_content .dp-today{border-radius:4px;font-weight:500;border:1px solid;border-color:var(--ion-color-primary)}:host .ionic_datepicker_modal_content .dp-month-year-scroll-container{position:absolute;top:0;bottom:0;left:0;right:0;margin:0;overflow-y:scroll}:host .ionic_datepicker_modal_content .dp-month-year-scroll-container ion-item{--padding-start:0;--inner-padding-end:0;--inner-border-width:0;cursor:pointer}:host .ionic_datepicker_modal_content .dp-month-year-scroll-container ion-item ion-label{text-align:center;margin:0;font-size:16px}:host .ionic_datepicker_modal_content .dp-month-year-scroll-container ion-item ion-label.dp-selected{color:var(--ion-color-primary);font-size:20px;font-weight:500}:host .disabled{color:#aaa}:host .dp-virual-scroller-show{-webkit-transition:opacity .3s ease-in;transition:opacity .3s ease-in;opacity:1;visibility:visible}:host .dp-virual-scroller-hide{opacity:0;visibility:hidden;height:auto}:host ion-footer{height:55px}:host ion-footer ion-toolbar{height:100%;--border-width:0;--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px}:host ion-footer ion-toolbar .toolbar-container{height:100%}:host ion-footer ion-toolbar .dp-btn-set-close-in-reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse}:host ion-footer ion-toolbar ion-button{--border-radius:0;height:55px;margin:0}:host ion-footer ion-toolbar ion-button:focus{outline:0}:host ion-footer ion-toolbar ion-button.activated{--background-activated:var(--ion-color-primary-tint);--color-activated:var(--ion-color-primary-contrast)}"]
}] }
];
/** @nocollapse */
Ionic4DatepickerModalComponent.ctorParameters = function () {
return [
{ type: angular.NavParams },
{ type: angular.ModalController },
{ type: Ionic4DatepickerService }
];
};
Ionic4DatepickerModalComponent.propDecorators = {
content: [{ type: i0.ViewChild, args: [angular.IonContent, { static: true },] }]
};
return Ionic4DatepickerModalComponent;
}());
/**
* @fileoverview added by tsickle
* Generated from: lib/ionic4-datepicker.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMember