@syncfusion/ej2-calendars
Version:
A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.
1,077 lines • 100 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path='../calendar/calendar-model.d.ts'/>
import { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';
import { KeyboardEvents, Animation, Event, extend, L10n, Browser, formatUnit } from '@syncfusion/ej2-base';
import { detach, addClass, removeClass, closest, attributes, Touch } from '@syncfusion/ej2-base';
import { isNullOrUndefined, setValue, getUniqueID } from '@syncfusion/ej2-base';
import { Popup } from '@syncfusion/ej2-popups';
import { Input } from '@syncfusion/ej2-inputs';
import { Calendar } from '../calendar/calendar';
//class constant defination
var DATEWRAPPER = 'e-date-wrapper';
var ROOT = 'e-datepicker';
var LIBRARY = 'e-lib';
var CONTROL = 'e-control';
var POPUPWRAPPER = 'e-popup-wrapper';
var INPUTWRAPPER = 'e-input-group-icon';
var POPUP = 'e-popup';
var INPUTCONTAINER = 'e-input-group';
var INPUTFOCUS = 'e-input-focus';
var INPUTROOT = 'e-input';
var ERROR = 'e-error';
var ACTIVE = 'e-active';
var OVERFLOW = 'e-date-overflow';
var DATEICON = 'e-date-icon';
var CLEARICON = 'e-clear-icon';
var ICONS = 'e-icons';
var OPENDURATION = 300;
var OFFSETVALUE = 4;
var SELECTED = 'e-selected';
var FOCUSEDDATE = 'e-focused-date';
var NONEDIT = 'e-non-edit';
var containerAttr = ['title', 'class', 'style'];
/**
* Represents the DatePicker component that allows user to select
* or enter a date value.
* ```html
* <input id='datepicker'/>
* ```
* ```typescript
* <script>
* let datePickerObject:DatePicker = new DatePicker({ value: new Date() });
* datePickerObject.appendTo('#datepicker');
* </script>
* ```
*/
var DatePicker = /** @class */ (function (_super) {
__extends(DatePicker, _super);
/**
* Constructor for creating the widget.
*
* @param {DatePickerModel} options - Specifies the DatePicker model.
* @param {string | HTMLInputElement} element - Specifies the element to render as component.
* @private
*/
function DatePicker(options, element) {
var _this = _super.call(this, options, element) || this;
_this.isDateIconClicked = false;
_this.isAltKeyPressed = false;
_this.isInteracted = true;
_this.invalidValueString = null;
_this.checkPreviousValue = null;
_this.maskedDateValue = '';
_this.preventChange = false;
_this.isIconClicked = false;
_this.isDynamicValueChanged = false;
_this.moduleName = _this.getModuleName();
_this.isFocused = false;
_this.isBlur = false;
_this.isKeyAction = false;
_this.datepickerOptions = options;
return _this;
}
/**
* To Initialize the control rendering.
*
* @returns {void}
* @private
*/
DatePicker.prototype.render = function () {
this.initialize();
this.bindEvents();
if (this.floatLabelType !== 'Never') {
Input.calculateWidth(this.inputElement, this.inputWrapper.container);
}
if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {
this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
}
if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
this.enabled = false;
}
this.renderComplete();
this.setTimeZone(this.serverTimezoneOffset);
};
DatePicker.prototype.setTimeZone = function (offsetValue) {
if (!isNullOrUndefined(this.serverTimezoneOffset) && this.value) {
var clientTimeZoneDiff = new Date().getTimezoneOffset() / 60;
var serverTimezoneDiff = offsetValue;
var timeZoneDiff = serverTimezoneDiff + clientTimeZoneDiff;
timeZoneDiff = this.isDayLightSaving() ? timeZoneDiff-- : timeZoneDiff;
this.value = new Date((this.value).getTime() + (timeZoneDiff * 60 * 60 * 1000));
this.updateInput();
}
};
DatePicker.prototype.isDayLightSaving = function () {
var firstOffset = new Date(this.value.getFullYear(), 0, 1).getTimezoneOffset();
var secondOffset = new Date(this.value.getFullYear(), 6, 1).getTimezoneOffset();
return (this.value.getTimezoneOffset() < Math.max(firstOffset, secondOffset));
};
DatePicker.prototype.setAllowEdit = function () {
if (this.allowEdit) {
if (!this.readonly) {
this.inputElement.removeAttribute('readonly');
}
}
else {
attributes(this.inputElement, { 'readonly': '' });
}
this.updateIconState();
};
DatePicker.prototype.updateIconState = function () {
if (!this.allowEdit && this.inputWrapper && !this.readonly) {
if (this.inputElement.value === '') {
removeClass([this.inputWrapper.container], [NONEDIT]);
}
else {
addClass([this.inputWrapper.container], [NONEDIT]);
}
}
else if (this.inputWrapper) {
removeClass([this.inputWrapper.container], [NONEDIT]);
}
};
DatePicker.prototype.initialize = function () {
this.checkInvalidValue(this.value);
if (this.enableMask) {
this.notify('createMask', {
module: 'MaskedDateTime'
});
}
this.createInput();
this.updateHtmlAttributeToWrapper();
this.setAllowEdit();
if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType === 'Always' || !this.floatLabelType || !this.placeholder)) {
this.updateInput(true);
this.updateInputValue(this.maskedDateValue);
}
else if (!this.enableMask) {
this.updateInput(true);
}
this.previousElementValue = this.inputElement.value;
this.previousDate = !isNullOrUndefined(this.value) ? new Date(+this.value) : null;
this.inputElement.setAttribute('value', this.inputElement.value);
this.inputValueCopy = this.value;
};
DatePicker.prototype.createInput = function () {
var ariaAttrs = {
'aria-atomic': 'true', 'aria-expanded': 'false',
'role': 'combobox', 'autocomplete': 'off', 'autocorrect': 'off',
'autocapitalize': 'off', 'spellcheck': 'false', 'aria-invalid': 'false'
};
if (this.getModuleName() === 'datepicker') {
var l10nLocale = { placeholder: this.placeholder };
this.globalize = new Internationalization(this.locale);
this.l10n = new L10n('datepicker', l10nLocale, this.locale);
this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
}
if (this.fullScreenMode && Browser.isDevice) {
this.cssClass += ' ' + 'e-popup-expand';
}
var updatedCssClassValues = this.cssClass;
if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
updatedCssClassValues = (this.cssClass.replace(/\s+/g, ' ')).trim();
}
var isBindClearAction = this.enableMask ? false : true;
this.inputWrapper = Input.createInput({
element: this.inputElement,
floatLabelType: this.floatLabelType,
bindClearAction: isBindClearAction,
properties: {
readonly: this.readonly,
placeholder: this.placeholder,
cssClass: updatedCssClassValues,
enabled: this.enabled,
enableRtl: this.enableRtl,
showClearButton: this.showClearButton
},
buttons: [INPUTWRAPPER + ' ' + DATEICON + ' ' + ICONS]
}, this.createElement);
this.setWidth(this.width);
if (this.inputElement.name !== '') {
this.inputElement.setAttribute('name', '' + this.inputElement.getAttribute('name'));
}
else {
this.inputElement.setAttribute('name', '' + this.element.id);
}
attributes(this.inputElement, ariaAttrs);
if (!this.inputElement.hasAttribute('aria-label')) {
this.inputElement.setAttribute('aria-label', this.getModuleName());
}
if (!this.enabled) {
this.inputElement.setAttribute('aria-disabled', 'true');
this.inputElement.tabIndex = -1;
}
else {
this.inputElement.setAttribute('aria-disabled', 'false');
this.inputElement.setAttribute('tabindex', this.tabIndex);
}
Input.addAttributes({ 'aria-label': 'select', 'role': 'button' }, this.inputWrapper.buttons[0]);
addClass([this.inputWrapper.container], DATEWRAPPER);
};
DatePicker.prototype.updateInput = function (isDynamic, isBlur) {
if (isDynamic === void 0) { isDynamic = false; }
if (isBlur === void 0) { isBlur = false; }
var formatOptions;
if (this.value && !this.isCalendar()) {
this.disabledDates(isDynamic, isBlur);
}
if (isNaN(+new Date(this.checkValue(this.value)))) {
this.setProperties({ value: null }, true);
}
if (this.strictMode) {
//calls the Calendar processDate protected method to update the date value according to the strictMode true behaviour.
_super.prototype.validateDate.call(this);
this.minMaxUpdates();
_super.prototype.minMaxUpdate.call(this);
}
if (!isNullOrUndefined(this.value)) {
var dateValue = this.value;
var dateString = void 0;
var tempFormat = !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat;
if (this.getModuleName() === 'datetimepicker') {
if (this.calendarMode === 'Gregorian') {
dateString = this.globalize.formatDate(this.value, {
format: tempFormat, type: 'dateTime', skeleton: 'yMd'
});
}
else {
dateString = this.globalize.formatDate(this.value, {
format: tempFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'
});
}
}
else {
if (this.calendarMode === 'Gregorian') {
formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };
}
else {
formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
}
dateString = this.globalize.formatDate(this.value, formatOptions);
}
if ((+dateValue <= +this.max) && (+dateValue >= +this.min)) {
this.updateInputValue(dateString);
}
else {
var value = (+dateValue >= +this.max || !+this.value) || (!+this.value || +dateValue <= +this.min);
if (!this.strictMode && value) {
this.updateInputValue(dateString);
}
}
}
if (isNullOrUndefined(this.value) && this.strictMode) {
if (!this.enableMask) {
this.updateInputValue('');
}
else {
this.updateInputValue(this.maskedDateValue);
this.notify('createMask', {
module: 'MaskedDateTime'
});
}
}
if (!this.strictMode && isNullOrUndefined(this.value) && this.invalidValueString) {
this.updateInputValue(this.invalidValueString);
}
this.changedArgs = { value: this.value };
this.errorClass();
this.updateIconState();
};
DatePicker.prototype.minMaxUpdates = function () {
if (!isNullOrUndefined(this.value) && this.value < this.min && this.min <= this.max && this.strictMode) {
this.setProperties({ value: this.min }, true);
this.changedArgs = { value: this.value };
}
else {
if (!isNullOrUndefined(this.value) && this.value > this.max && this.min <= this.max && this.strictMode) {
this.setProperties({ value: this.max }, true);
this.changedArgs = { value: this.value };
}
}
};
DatePicker.prototype.checkStringValue = function (val) {
var returnDate = null;
var formatOptions = null;
var formatDateTime = null;
if (this.getModuleName() === 'datetimepicker') {
var culture = new Internationalization(this.locale);
if (this.calendarMode === 'Gregorian') {
formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd' };
formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime' };
}
else {
formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime', calendar: 'islamic' };
}
}
else {
if (this.calendarMode === 'Gregorian') {
formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };
}
else {
formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
}
}
returnDate = this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(val), formatOptions));
if (isNullOrUndefined(returnDate) && (this.getModuleName() === 'datetimepicker')) {
returnDate = this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(val), formatDateTime));
}
return returnDate;
};
DatePicker.prototype.checkInvalidValue = function (value) {
if (!(value instanceof Date) && !isNullOrUndefined(value)) {
var valueDate = null;
var valueString = value;
if (typeof value === 'number') {
valueString = value.toString();
}
var formatOptions = null;
var formatDateTime = null;
if (this.getModuleName() === 'datetimepicker') {
var culture = new Internationalization(this.locale);
if (this.calendarMode === 'Gregorian') {
formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd' };
formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime' };
}
else {
formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
// eslint-disable-next-line @typescript-eslint/no-unused-vars
formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime', calendar: 'islamic' };
}
}
else {
if (this.calendarMode === 'Gregorian') {
formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };
}
else {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
}
}
var invalid = false;
if (typeof valueString !== 'string') {
valueString = null;
invalid = true;
}
else {
if (typeof valueString === 'string') {
valueString = valueString.trim();
}
valueDate = this.checkStringValue(valueString);
if (!valueDate) {
var extISOString = null;
var basicISOString = null;
// eslint-disable-next-line
extISOString = /^\s*((?:[+-]\d{6}|\d{4})-(?:\d\d-\d\d|W\d\d-\d|W\d\d|\d\d\d|\d\d))(?:(T| )(\d\d(?::\d\d(?::\d\d(?:[.,]\d+)?)?)?)([\+\-]\d\d(?::?\d\d)?|\s*Z)?)?/;
// eslint-disable-next-line
basicISOString = /^\s*((?:[+-]\d{6}|\d{4})(?:\d\d\d\d|W\d\d\d|W\d\d|\d\d\d|\d\d))(?:(T| )(\d\d(?:\d\d(?:\d\d(?:[.,]\d+)?)?)?)([\+\-]\d\d(?::?\d\d)?|\s*Z)?)?/;
if ((!extISOString.test(valueString) && !basicISOString.test(valueString))
|| (/^[a-zA-Z0-9- ]*$/).test(valueString) || isNaN(+new Date(this.checkValue(valueString)))) {
invalid = true;
}
else {
valueDate = new Date(valueString);
}
}
}
if (invalid) {
if (!this.strictMode) {
this.invalidValueString = valueString;
}
this.setProperties({ value: null }, true);
}
else {
this.setProperties({ value: valueDate }, true);
}
}
};
DatePicker.prototype.bindInputEvent = function () {
if (!isNullOrUndefined(this.formatString) || this.enableMask) {
if (this.enableMask || this.formatString.indexOf('y') === -1) {
EventHandler.add(this.inputElement, 'input', this.inputHandler, this);
}
else {
EventHandler.remove(this.inputElement, 'input', this.inputHandler);
}
}
};
DatePicker.prototype.bindEvents = function () {
EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.dateIconHandler, this);
EventHandler.add(this.inputElement, 'mouseup', this.mouseUpHandler, this);
EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);
EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);
EventHandler.add(this.inputElement, 'keyup', this.keyupHandler, this);
if (this.enableMask) {
EventHandler.add(this.inputElement, 'keydown', this.keydownHandler, this);
}
this.bindInputEvent();
// To prevent the twice triggering.
EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);
if (this.showClearButton && this.inputWrapper.clearButton) {
EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);
}
if (this.formElement) {
EventHandler.add(this.formElement, 'reset', this.resetFormHandler, this);
}
this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);
this.keyboardModules = new KeyboardEvents(this.inputElement, {
eventName: 'keydown',
keyAction: this.inputKeyActionHandle.bind(this),
keyConfigs: this.defaultKeyConfigs
});
};
DatePicker.prototype.keydownHandler = function (e) {
switch (e.code) {
case 'ArrowLeft':
case 'ArrowRight':
case 'ArrowUp':
case 'ArrowDown':
case 'Home':
case 'End':
case 'Backspace':
case 'Delete':
if (this.enableMask && !this.popupObj && !this.readonly) {
if (e.code !== 'Delete' && e.code !== 'Backspace') {
e.preventDefault();
}
this.notify('keyDownHandler', {
module: 'MaskedDateTime',
e: e
});
}
break;
default:
break;
}
};
DatePicker.prototype.unBindEvents = function () {
if (!isNullOrUndefined(this.inputWrapper)) {
EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.dateIconHandler);
}
EventHandler.remove(this.inputElement, 'mouseup', this.mouseUpHandler);
EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);
EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);
EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);
EventHandler.remove(this.inputElement, 'keyup', this.keyupHandler);
if (this.enableMask) {
EventHandler.remove(this.inputElement, 'keydown', this.keydownHandler);
}
if (this.showClearButton && this.inputWrapper.clearButton) {
EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler);
}
if (this.formElement) {
EventHandler.remove(this.formElement, 'reset', this.resetFormHandler);
}
};
DatePicker.prototype.resetFormHandler = function () {
if (!this.enabled) {
return;
}
if (!this.inputElement.disabled) {
var value = this.inputElement.getAttribute('value');
if (this.element.tagName === 'EJS-DATEPICKER' || this.element.tagName === 'EJS-DATETIMEPICKER') {
value = '';
this.inputValueCopy = null;
this.inputElement.setAttribute('value', '');
}
this.setProperties({ value: this.inputValueCopy }, true);
this.restoreValue();
if (this.inputElement) {
this.updateInputValue(value);
this.errorClass();
}
}
};
DatePicker.prototype.restoreValue = function () {
this.currentDate = this.value ? this.value : new Date();
this.previousDate = this.value;
this.previousElementValue = (isNullOrUndefined(this.inputValueCopy)) ? '' :
this.globalize.formatDate(this.inputValueCopy, {
format: this.formatString, type: 'dateTime', skeleton: 'yMd'
});
};
DatePicker.prototype.inputChangeHandler = function (e) {
if (!this.enabled) {
return;
}
e.stopPropagation();
};
DatePicker.prototype.bindClearEvent = function () {
if (this.showClearButton && this.inputWrapper.clearButton) {
EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);
}
};
DatePicker.prototype.resetHandler = function (e) {
if (!this.enabled) {
return;
}
e.preventDefault();
this.clear(e);
};
DatePicker.prototype.mouseUpHandler = function (e) {
if (this.enableMask) {
e.preventDefault();
this.notify('setMaskSelection', {
module: 'MaskedDateTime'
});
}
};
DatePicker.prototype.clear = function (event) {
this.setProperties({ value: null }, true);
if (!this.enableMask) {
this.updateInputValue('');
}
var clearedArgs = {
event: event
};
this.trigger('cleared', clearedArgs);
this.invalidValueString = '';
this.updateInput();
this.popupUpdate();
this.changeEvent(event);
if (this.enableMask) {
this.notify('clearHandler', {
module: 'MaskedDateTime'
});
}
if (closest(this.element, 'form')) {
var element = this.element;
var keyupEvent = document.createEvent('KeyboardEvent');
keyupEvent.initEvent('keyup', false, true);
element.dispatchEvent(keyupEvent);
}
};
DatePicker.prototype.preventEventBubbling = function (e) {
e.preventDefault();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.interopAdaptor.invokeMethodAsync('OnDateIconClick');
};
DatePicker.prototype.updateInputValue = function (value) {
Input.setValue(value, this.inputElement, this.floatLabelType, this.showClearButton);
};
DatePicker.prototype.dateIconHandler = function (e) {
if (!this.enabled) {
return;
}
this.isIconClicked = true;
if (Browser.isDevice) {
this.inputElement.setAttribute('readonly', '');
this.inputElement.blur();
}
e.preventDefault();
if (!this.readonly) {
if (this.isCalendar()) {
this.hide(e);
}
else {
this.isDateIconClicked = true;
this.show(null, e);
if (this.getModuleName() === 'datetimepicker') {
this.inputElement.focus();
}
this.inputElement.focus();
addClass([this.inputWrapper.container], [INPUTFOCUS]);
addClass(this.inputWrapper.buttons, ACTIVE);
}
}
this.isIconClicked = false;
};
DatePicker.prototype.updateHtmlAttributeToWrapper = function () {
if (!isNullOrUndefined(this.htmlAttributes)) {
for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
var key = _a[_i];
if (!isNullOrUndefined(this.htmlAttributes["" + key])) {
if (containerAttr.indexOf(key) > -1) {
if (key === 'class') {
var updatedClassValues = (this.htmlAttributes["" + key].replace(/\s+/g, ' ')).trim();
if (updatedClassValues !== '') {
addClass([this.inputWrapper.container], updatedClassValues.split(' '));
}
}
else if (key === 'style') {
var setStyle = this.inputWrapper.container.getAttribute(key);
if (!isNullOrUndefined(setStyle)) {
if (setStyle.charAt(setStyle.length - 1) === ';') {
setStyle = setStyle + this.htmlAttributes["" + key];
}
else {
setStyle = setStyle + ';' + this.htmlAttributes["" + key];
}
}
else {
setStyle = this.htmlAttributes["" + key];
}
this.inputWrapper.container.setAttribute(key, setStyle);
}
else {
this.inputWrapper.container.setAttribute(key, this.htmlAttributes["" + key]);
}
}
}
}
}
};
DatePicker.prototype.updateHtmlAttributeToElement = function () {
if (!isNullOrUndefined(this.htmlAttributes)) {
for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
var key = _a[_i];
if (containerAttr.indexOf(key) < 0) {
this.inputElement.setAttribute(key, this.htmlAttributes["" + key]);
}
}
}
};
DatePicker.prototype.updateCssClass = function (newCssClass, oldCssClass) {
if (!isNullOrUndefined(oldCssClass)) {
oldCssClass = (oldCssClass.replace(/\s+/g, ' ')).trim();
}
if (!isNullOrUndefined(newCssClass)) {
newCssClass = (newCssClass.replace(/\s+/g, ' ')).trim();
}
Input.setCssClass(newCssClass, [this.inputWrapper.container], oldCssClass);
if (this.popupWrapper) {
Input.setCssClass(newCssClass, [this.popupWrapper], oldCssClass);
}
};
DatePicker.prototype.calendarKeyActionHandle = function (e) {
switch (e.action) {
case 'escape':
if (this.isCalendar()) {
this.hide(e);
}
else {
this.inputWrapper.container.children[this.index].blur();
}
break;
case 'enter':
if (!this.isCalendar()) {
this.show(null, e);
}
else {
if (+this.value !== +this.currentDate && !this.isCalendar()) {
this.inputWrapper.container.children[this.index].focus();
}
}
if (this.getModuleName() === 'datetimepicker') {
this.inputElement.focus();
}
break;
}
};
DatePicker.prototype.inputFocusHandler = function () {
this.isFocused = true;
if (!this.enabled) {
return;
}
if (this.enableMask && !this.inputElement.value && this.placeholder) {
if (this.maskedDateValue && !this.value && (this.floatLabelType === 'Auto' || this.floatLabelType === 'Never' || this.placeholder)) {
this.updateInputValue(this.maskedDateValue);
this.inputElement.selectionStart = 0;
this.inputElement.selectionEnd = this.inputElement.value.length;
}
}
if (this.enableMask && this.showClearButton && this.inputElement && this.inputElement.value === this.maskedDateValue && this.inputWrapper && this.inputWrapper.clearButton && !this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide')) {
this.inputWrapper.clearButton.classList.add('e-clear-icon-hide');
}
var focusArguments = {
model: this
};
this.isDateIconClicked = false;
this.trigger('focus', focusArguments);
this.updateIconState();
if (this.openOnFocus && !this.isIconClicked) {
this.show();
}
};
DatePicker.prototype.inputHandler = function (e) {
this.isPopupClicked = false;
if (this.enableMask) {
if (!isNullOrUndefined(e) && !isNullOrUndefined(e.inputType) && e.inputType === 'insertFromPaste') {
this.notify('maskPasteInputHandler', {
module: 'MaskedDateTime'
});
}
else {
this.notify('inputHandler', {
module: 'MaskedDateTime'
});
}
}
};
DatePicker.prototype.inputBlurHandler = function (e) {
if (!this.enabled) {
return;
}
this.strictModeUpdate();
if (this.inputElement.value === '' && isNullOrUndefined(this.value)) {
this.invalidValueString = null;
this.updateInputValue('');
}
this.isBlur = true;
this.updateInput(false, true);
this.isBlur = false;
this.popupUpdate();
this.changeTrigger(e);
if (this.enableMask && this.maskedDateValue && this.placeholder && this.floatLabelType !== 'Always') {
if (this.inputElement.value === this.maskedDateValue && !this.value && (this.floatLabelType === 'Auto' || this.floatLabelType === 'Never' || this.placeholder)) {
this.updateInputValue('');
}
}
this.errorClass();
if (this.isCalendar() && document.activeElement === this.inputElement) {
this.hide(e);
}
if (this.getModuleName() === 'datepicker') {
var blurArguments = {
model: this
};
this.trigger('blur', blurArguments);
}
if (this.isCalendar()) {
this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);
this.calendarKeyboardModules = new KeyboardEvents(this.calendarElement.children[1].firstElementChild, {
eventName: 'keydown',
keyAction: this.calendarKeyActionHandle.bind(this),
keyConfigs: this.defaultKeyConfigs
});
}
this.isPopupClicked = false;
};
DatePicker.prototype.documentHandler = function (e) {
if ((!isNullOrUndefined(this.popupObj) && !isNullOrUndefined(this.inputWrapper) && (this.inputWrapper.container.contains(e.target) && e.type !== 'mousedown' ||
(this.popupObj.element && this.popupObj.element.contains(e.target)))) && e.type !== 'touchstart') {
e.preventDefault();
}
var target = e.target;
if (!(closest(target, '.e-datepicker.e-popup-wrapper')) && !isNullOrUndefined(this.inputWrapper)
&& !(closest(target, '.' + INPUTCONTAINER) === this.inputWrapper.container)
&& (!target.classList.contains('e-day'))
&& (!target.classList.contains('e-dlg-overlay'))) {
this.hide(e);
this.focusOut();
}
else if (closest(target, '.e-datepicker.e-popup-wrapper')) {
// Fix for close the popup when select the previously selected value.
if (target.classList.contains('e-day')
&& !isNullOrUndefined(e.target.parentElement)
&& e.target.parentElement.classList.contains('e-selected')
&& closest(target, '.e-content')
&& closest(target, '.e-content').classList.contains('e-' + this.depth.toLowerCase())) {
this.hide(e);
}
else if (closest(target, '.e-footer-container')
&& target.classList.contains('e-today')
&& target.classList.contains('e-btn')
&& (+new Date(+this.value) === +_super.prototype.generateTodayVal.call(this, this.value))) {
this.hide(e);
}
}
};
DatePicker.prototype.inputKeyActionHandle = function (e) {
var clickedView = this.currentView();
switch (e.action) {
case 'altUpArrow':
this.isAltKeyPressed = false;
this.hide(e);
this.inputElement.focus();
break;
case 'altDownArrow':
this.isAltKeyPressed = true;
this.strictModeUpdate();
this.updateInput();
this.changeTrigger(e);
if (this.getModuleName() === 'datepicker') {
this.show(null, e);
}
break;
case 'escape':
this.hide(e);
break;
case 'enter':
this.strictModeUpdate();
this.updateInput();
this.popupUpdate();
this.changeTrigger(e);
this.errorClass();
if (!this.isCalendar() && document.activeElement === this.inputElement) {
this.hide(e);
}
if (this.isCalendar()) {
e.preventDefault();
e.stopPropagation();
}
break;
case 'tab':
case 'shiftTab':
{
var start = this.inputElement.selectionStart;
var end = this.inputElement.selectionEnd;
if (this.enableMask && !this.popupObj && !this.readonly) {
var length_1 = this.inputElement.value.length;
if ((start === 0 && end === length_1) || (end !== length_1 && e.action === 'tab') || (start !== 0 && e.action === 'shiftTab')) {
e.preventDefault();
}
this.notify('keyDownHandler', {
module: 'MaskedDateTime',
e: e
});
start = this.inputElement.selectionStart;
end = this.inputElement.selectionEnd;
}
this.strictModeUpdate();
this.updateInput();
this.popupUpdate();
this.changeTrigger(e);
this.errorClass();
if (this.enableMask) {
this.inputElement.selectionStart = start;
this.inputElement.selectionEnd = end;
}
if (e.action === 'tab' && e.target === this.inputElement && this.isCalendar() && document.activeElement === this.inputElement) {
e.preventDefault();
this.headerTitleElement.focus();
}
if (e.action === 'shiftTab' && e.target === this.inputElement && this.isCalendar() && document.activeElement === this.inputElement) {
this.hide(e);
}
break;
}
default:
this.defaultAction(e);
// Fix for close the popup when select the previously selected value.
if (e.action === 'select' && clickedView === this.depth) {
this.hide(e);
}
}
};
DatePicker.prototype.defaultAction = function (e) {
this.previousDate = ((!isNullOrUndefined(this.value) && new Date(+this.value)) || null);
if (this.isCalendar()) {
_super.prototype.keyActionHandle.call(this, e);
if (this.isCalendar()) {
attributes(this.inputElement, {
'aria-activedescendant': '' + this.setActiveDescendant()
});
}
}
};
DatePicker.prototype.popupUpdate = function () {
if ((isNullOrUndefined(this.value)) && (!isNullOrUndefined(this.previousDate)) ||
(((this.getModuleName() !== 'datetimepicker') && (+this.value !== +this.previousDate)) || ((this.getModuleName() === 'datetimepicker') && (+this.value !== +this.previousDateTime)))) {
if (this.popupObj) {
if (this.popupObj.element.querySelectorAll('.' + SELECTED).length > 0) {
removeClass(this.popupObj.element.querySelectorAll('.' + SELECTED), [SELECTED]);
}
}
if (!isNullOrUndefined(this.value)) {
if ((+this.value >= +this.min) && (+this.value <= +this.max)) {
var targetdate = new Date(this.checkValue(this.value));
_super.prototype.navigateTo.call(this, 'Month', targetdate);
}
}
}
};
DatePicker.prototype.strictModeUpdate = function () {
var format;
var pattern = /^y/;
var charPattern = /[^a-zA-Z]/;
var formatOptions;
if (this.getModuleName() === 'datetimepicker') {
format = !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat;
}
else if (!pattern.test(this.formatString) || charPattern.test(this.formatString)) {
format = isNullOrUndefined(this.formatString) ? this.formatString : this.formatString.replace('dd', 'd');
}
if (!isNullOrUndefined(format)) {
var len = format.split('M').length - 1;
if (len < 3) {
format = format.replace('MM', 'M');
}
}
else {
format = this.formatString;
}
var dateOptions;
if (this.getModuleName() === 'datetimepicker') {
if (this.calendarMode === 'Gregorian') {
dateOptions = {
format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,
type: 'dateTime', skeleton: 'yMd'
};
}
else {
dateOptions = {
format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,
type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'
};
}
}
else {
if (this.calendarMode === 'Gregorian') {
formatOptions = { format: format, type: 'dateTime', skeleton: 'yMd' };
}
else {
formatOptions = { format: format, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
}
dateOptions = formatOptions;
}
var date;
if (typeof this.inputElement.value === 'string') {
this.inputElement.value = this.inputElement.value.trim();
}
if ((this.getModuleName() === 'datetimepicker')) {
if (this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), dateOptions))) {
date = this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), dateOptions);
}
else {
if (this.calendarMode === 'Gregorian') {
formatOptions = { format: format, type: 'dateTime', skeleton: 'yMd' };
}
else {
formatOptions = { format: format, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
}
date = this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), formatOptions);
}
if ((isNullOrUndefined(date) || (typeof (date) === 'object' && isNaN(date.getTime())))
&& !isNullOrUndefined(this.inputFormatsString)) {
for (var _i = 0, _a = this.inputFormatsString; _i < _a.length; _i++) {
var format_1 = _a[_i];
var inputFormatOptions = void 0;
if (this.calendarMode === 'Gregorian') {
inputFormatOptions = { format: format_1, type: 'dateTime', skeleton: 'yMd' };
}
else {
inputFormatOptions = { format: format_1, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
}
date = this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), inputFormatOptions);
if (!isNullOrUndefined(date) && date instanceof Date && !isNaN(date.getTime())) {
break;
}
}
}
}
else {
date = this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), dateOptions);
if ((isNullOrUndefined(date) || (typeof (date) === 'object' && isNaN(date.getTime())))
&& !isNullOrUndefined(this.inputFormatsString)) {
for (var _b = 0, _c = this.inputFormatsString; _b < _c.length; _b++) {
var format_2 = _c[_b];
var inputFormatOptions = void 0;
if (this.calendarMode === 'Gregorian') {
inputFormatOptions = { format: format_2, type: 'dateTime', skeleton: 'yMd' };
}
else {
inputFormatOptions = { format: format_2, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
}
date = this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), inputFormatOptions);
if (!isNullOrUndefined(date) && date instanceof Date && !isNaN(date.getTime())) {
break;
}
}
}
date = (!isNullOrUndefined(date) && isNaN(+date)) ? null : date;
if (!isNullOrUndefined(this.formatString) && this.inputElement.value !== '' && this.strictMode) {
if ((this.isPopupClicked || (!this.isPopupClicked && this.inputElement.value === this.previousElementValue))
&& this.formatString.indexOf('y') === -1) {
date.setFullYear(this.value.getFullYear());
}
}
}
// EJ2-35061 - To prevent change event from triggering twice when using strictmode and format property
if ((this.getModuleName() === 'datepicker') && (this.value && !isNaN(+this.value)) && date) {
date.setHours(this.value.getHours(), this.value.getMinutes(), this.value.getSeconds(), this.value.getMilliseconds());
}
if (this.strictMode && date) {
this.updateInputValue(this.globalize.formatDate(date, dateOptions));
if (this.inputElement.value !== this.previousElementValue) {
this.setProperties({ value: date }, true);
}
}
else if (!this.strictMode) {
if (this.inputElement.value !== this.previousElementValue) {
this.setProperties({ value: date }, true);
}
}
if (this.strictMode && !date && this.inputElement.value === (this.enableMask ? this.maskedDateValue : '')) {
this.setProperties({ value: null }, true);
}
if (isNaN(+this.value)) {
this.setProperties({ value: null }, true);
}
if (isNullOrUndefined(this.value)) {
this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));
}
};
DatePicker.prototype.createCalendar = function () {
var _this = this;
this.popupWrapper = this.createElement('div', { className: '' + ROOT + ' ' + POPUPWRAPPER, id: this.inputElement.id + '_options' });
this.popupWrapper.setAttribute('aria-label', this.element.id);
this.popupWrapper.setAttribute('role', 'dialog');
if (!isNullOrUndefined(this.cssClass)) {
this.popupWrapper.className += ' ' + this.cssClass;
}
if (Browser.isDevice) {
this.modelHeader();
this.modal = this.createElement('div');
this.modal.className = '' + ROOT + ' e-date-modal';
document.body.className += ' ' + OVERFLOW;
this.modal.style.display = 'block';
document.body.appendChild(this.modal);
}
//this.calendarElement represent the Calendar object from the Calendar class.
this.calendarElement.querySelector('table tbody').className = '';
this.popupObj = new Popup(this.popupWrapper, {
content: this.calendarElement,
relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,
position: Browser.isDevice ? { X: 'center', Y: 'center' } : (this.enableRtl ? { X: 'right', Y: 'bottom' } : { X: 'left', Y: 'bottom' }),
offsetY: OFFSETVALUE,
targetType: 'container',
enableRtl: this.enableRtl,
zIndex: this.zIndex,
collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : (this.enableRtl ? { X: 'fit', Y: 'flip' } : { X: 'flip', Y: 'flip' }),
open: function () {
if (Browser.isDevice && _this.fullScreenMode) {
_this.iconRight = parseInt(window.getComputedStyle(_this.calendarElement.querySelector('.e-header.e-month .e-prev')).marginRight, 10) > 16 ? true : false;
_this.touchModule = new Touch(_this.calendarElement.querySelector('.e-content.e-month'), {
swipe: _this.CalendarSwipeHandler.bind(_this)
});
EventHandler.add(_this.calendarElement.querySelector('.e-content.e-month'), 'touchstart', _this.TouchStartHandler, _this);
}
if (_this.getModuleName() !== 'datetimepicker') {
if (document.activeElement !== _this.inputElement) {
_this.defaultKeyConfigs = extend(_this.defaultKeyConfigs, _this.keyConfigs);
_this.calendarElement.children[1].firstElementChild.focus();
_this.calendarKeyboardModules = new KeyboardEvents(_this.calendarElement.children[1].firstElementChild, {
eventName: 'keydown',
keyAction: _this.calendarKeyActionHandle.bind(_this),
keyConfigs: _this.defaultKeyConfigs
});
_this.calendarKeyboardModules = new KeyboardEvents(_this.inputWrapper.container.children[_this.index], {
eventName: 'keydown',
keyAction: _this.calendarKeyActionHandle.bind(_this),
keyConfigs: _this.defaultKeyConfigs
});
}
}
}, close: function () {
if (_this.isDateIconClicked) {
_this.inputWrapper.