@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,061 lines • 226 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 { Property, EventHandler, Internationalization, NotifyPropertyChanges, detach, getUniqueID } from '@syncfusion/ej2-base';
import { KeyboardEvents, Event, Browser, L10n, ChildProperty } from '@syncfusion/ej2-base';
import { addClass, createElement, remove, closest, select, prepend, removeClass, attributes, Collection } from '@syncfusion/ej2-base';
import { isNullOrUndefined, isUndefined, formatUnit, setValue, rippleEffect, merge, extend, Touch } from '@syncfusion/ej2-base';
import { CalendarBase } from '../calendar/calendar';
import { Popup } from '@syncfusion/ej2-popups';
import { Button } from '@syncfusion/ej2-buttons';
import { Input } from '@syncfusion/ej2-inputs';
import { ListBase } from '@syncfusion/ej2-lists';
var DATERANGEWRAPPER = 'e-date-range-wrapper';
var INPUTCONTAINER = 'e-input-group';
var DATERANGEICON = 'e-input-group-icon e-range-icon e-icons';
var POPUP = 'e-popup';
var LEFTCALENDER = 'e-left-calendar';
var RIGHTCALENDER = 'e-right-calendar';
var LEFTCONTAINER = 'e-left-container';
var RIGHTCONTAINER = 'e-right-container';
var ROOT = 'e-daterangepicker';
var LIBRARY = 'e-lib';
var CONTROL = 'e-control';
var ERROR = 'e-error';
var ACTIVE = 'e-active';
var STARTENDCONTAINER = 'e-start-end';
var STARTDATE = 'e-start-date';
var ENDDATE = 'e-end-date';
var STARTBUTTON = 'e-start-btn';
var INPUTFOCUS = 'e-input-focus';
var ENDBUTTON = 'e-end-btn';
var RANGEHOVER = 'e-range-hover';
var OTHERMONTH = 'e-other-month';
var STARTLABEL = 'e-start-label';
var ENDLABEL = 'e-end-label';
var DISABLED = 'e-disabled';
var SELECTED = 'e-selected';
var CALENDAR = 'e-calendar';
var NEXTICON = 'e-next';
var PREVICON = 'e-prev';
var HEADER = 'e-header';
var TITLE = 'e-title';
var ICONCONTAINER = 'e-icon-container';
var RANGECONTAINER = 'e-date-range-container';
var RANGEHEADER = 'e-range-header';
var PRESETS = 'e-presets';
var FOOTER = 'e-footer';
var RANGEBORDER = 'e-range-border';
var TODAY = 'e-today';
var FOCUSDATE = 'e-focused-date';
var CONTENT = 'e-content';
var DAYSPAN = 'e-day-span';
var WEEKNUMBER = 'e-week-number';
var DATEDISABLED = 'e-date-disabled';
var ICONDISABLED = 'e-icon-disabled';
var CALENDARCONTAINER = 'e-calendar-container';
var SEPARATOR = 'e-separator';
var APPLY = 'e-apply';
var CANCEL = 'e-cancel';
var DEVICE = 'e-device';
var OVERLAY = 'e-overlay';
var CHANGEICON = 'e-change-icon e-icons';
var LISTCLASS = 'e-list-item';
var RTL = 'e-rtl';
var HOVER = 'e-hover';
var OVERFLOW = 'e-range-overflow';
var OFFSETVALUE = 4;
var PRIMARY = 'e-primary';
var FLAT = 'e-flat';
var CSS = 'e-css';
var ZOOMIN = 'e-zoomin';
var NONEDITABLE = 'e-non-edit';
var DAYHEADERLONG = 'e-daterange-day-header-lg';
var HIDDENELEMENT = 'e-daterange-hidden';
var wrapperAttr = ['title', 'class', 'style'];
var Presets = /** @class */ (function (_super) {
__extends(Presets, _super);
function Presets() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property()
], Presets.prototype, "label", void 0);
__decorate([
Property()
], Presets.prototype, "start", void 0);
__decorate([
Property()
], Presets.prototype, "end", void 0);
return Presets;
}(ChildProperty));
export { Presets };
/**
* Represents the DateRangePicker component that allows user to select the date range from the calendar
* or entering the range through the input element.
* ```html
* <input id="daterangepicker"/>
* ```
* ```typescript
* <script>
* var dateRangePickerObj = new DateRangePicker({ startDate: new Date("05/07/2017"), endDate: new Date("10/07/2017") });
* dateRangePickerObj.appendTo("#daterangepicker");
* </script>
* ```
*/
var DateRangePicker = /** @class */ (function (_super) {
__extends(DateRangePicker, _super);
/**
* Constructor for creating the widget
*
* @param {DateRangePickerModel} options - Specifies the DateRangePicker model.
* @param {string | HTMLInputElement} element - Specifies the element to render as component.
* @private
*/
function DateRangePicker(options, element) {
var _this = _super.call(this, options, element) || this;
_this.isCustomRange = false;
_this.isCustomWindow = false;
_this.presetsItem = [];
_this.liCollections = [];
_this.previousEleValue = '';
_this.isKeyPopup = false;
_this.dateDisabled = false;
_this.isRangeIconClicked = false;
_this.isMaxDaysClicked = false;
_this.disabledDays = [];
_this.preventBlur = false;
_this.preventFocus = false;
_this.invalidValueString = null;
_this.preventChange = false;
_this.dateRangeOptions = options;
return _this;
}
/**
* To Initialize the control rendering.
*
* @returns {void}
* @private
*/
DateRangePicker.prototype.render = function () {
this.initialize();
this.setProperties({ startDate: this.startValue }, true);
this.setProperties({ endDate: this.endValue }, true);
this.setModelValue();
this.setDataAttribute(false);
if (this.element.hasAttribute('data-val')) {
this.element.setAttribute('data-val', 'false');
}
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();
};
/**
* Initialize the event handler
*
* @returns {void}
* @private
*/
DateRangePicker.prototype.preRender = function () {
this.keyInputConfigs = {
altDownArrow: 'alt+downarrow',
escape: 'escape',
enter: 'enter',
tab: 'tab',
altRightArrow: 'alt+rightarrow',
altLeftArrow: 'alt+leftarrow',
moveUp: 'uparrow',
moveDown: 'downarrow',
spacebar: 'space'
};
this.defaultConstant = {
placeholder: this.placeholder,
startLabel: 'Start Date',
endLabel: 'End Date',
customRange: 'Custom Range',
applyText: 'Apply',
cancelText: 'Cancel',
selectedDays: 'Selected Days',
days: 'days'
};
/**
* Mobile View
*/
this.isMobile = (Browser.isDevice) ? true : window.matchMedia('(max-width:550px)').matches;
this.inputElement = this.element;
this.angularTag = null;
if (this.element.tagName === 'EJS-DATERANGEPICKER') {
this.angularTag = this.element.tagName;
this.inputElement = this.createElement('input');
this.element.appendChild(this.inputElement);
}
this.cloneElement = this.element.cloneNode(true);
removeClass([this.cloneElement], [ROOT, CONTROL, LIBRARY]);
this.updateHtmlAttributeToElement();
if (this.element.getAttribute('id')) {
if (this.angularTag !== null) {
this.inputElement.id = this.element.getAttribute('id') + '_input';
}
}
else {
this.element.id = getUniqueID('ej2-datetimepicker');
if (this.angularTag !== null) {
attributes(this.inputElement, { 'id': this.element.id + '_input' });
}
}
this.checkInvalidRange(this.value);
if (!this.invalidValueString && (typeof (this.value) === 'string')) {
var rangeArray = this.value.split(' ' + this.separator + ' ');
this.value = [new Date(rangeArray[0]), new Date(rangeArray[1])];
}
this.initProperty();
this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
this.element.removeAttribute('tabindex');
_super.prototype.preRender.call(this);
this.navNextFunction = this.navNextMonth.bind(this);
this.navPrevFunction = this.navPrevMonth.bind(this);
this.deviceNavNextFunction = this.deviceNavNext.bind(this);
this.deviceNavPrevFunction = this.deviceNavPrevious.bind(this);
this.initStartDate = this.checkDateValue(this.startValue);
this.initEndDate = this.checkDateValue(this.endValue);
this.formElement = closest(this.element, 'form');
};
DateRangePicker.prototype.updateValue = function () {
if (this.value && this.value.length > 0) {
if (this.value[0] instanceof Date && !isNaN(+this.value[0])) {
this.setProperties({ startDate: this.value[0] }, true);
this.startValue = this.value[0];
}
else if (typeof this.value[0] === 'string') {
if (+this.value[0] === 0 || isNaN(+(new Date(this.checkValue(this.value[0]))))) {
this.startValue = null;
this.setValue();
}
else {
this.setProperties({ startDate: new Date(this.checkValue(this.value[0])) }, true);
this.startValue = new Date(this.checkValue(this.value[0]));
}
}
else {
this.startValue = null;
this.setValue();
}
if (this.value[1] instanceof Date && !isNaN(+this.value[1])) {
this.setProperties({ endDate: this.value[1] }, true);
this.endValue = this.value[1];
}
else if (typeof this.value[1] === 'string') {
if (+this.value[0] === 0 || isNaN(+(new Date(this.checkValue(this.value[0]))))) {
this.setProperties({ endDate: null }, true);
this.endValue = null;
this.setValue();
}
else {
this.setProperties({ endDate: new Date(this.checkValue(this.value[1])) }, true);
this.endValue = new Date(this.checkValue(this.value[1]));
this.setValue();
}
}
else {
this.setProperties({ endDate: null }, true);
this.endValue = null;
this.setValue();
}
}
else if (this.value && this.value.start) {
if (this.value.start instanceof Date && !isNaN(+this.value.start)) {
this.setProperties({ startDate: this.value.start }, true);
this.startValue = this.value.start;
}
else if (typeof this.value.start === 'string') {
this.setProperties({ startDate: new Date(this.checkValue(this.value.start)) }, true);
this.startValue = new Date(this.checkValue(this.value.start));
}
else {
this.startValue = null;
this.setValue();
}
if (this.value.end instanceof Date && !isNaN(+this.value.end)) {
this.setProperties({ endDate: this.value.end }, true);
this.endValue = this.value.end;
}
else if (typeof this.value.end === 'string') {
this.setProperties({ endDate: new Date(this.checkValue(this.value.end)) }, true);
this.endValue = new Date(this.checkValue(this.value.end));
this.setValue();
}
else {
this.setProperties({ endDate: null }, true);
this.endValue = null;
this.setValue();
}
}
else if (isNullOrUndefined(this.value)) {
this.endValue = this.checkDateValue(new Date(this.checkValue(this.endDate)));
this.startValue = this.checkDateValue(new Date(this.checkValue(this.startDate)));
this.setValue();
}
};
DateRangePicker.prototype.initProperty = function () {
this.globalize = new Internationalization(this.locale);
this.checkFormat();
this.checkView();
if (isNullOrUndefined(this.firstDayOfWeek) || this.firstDayOfWeek > 6 || this.firstDayOfWeek < 0) {
this.setProperties({ firstDayOfWeek: this.globalize.getFirstDayOfWeek() }, true);
}
this.updateValue();
};
DateRangePicker.prototype.checkFormat = function () {
if (this.format) {
if (typeof this.format === 'string') {
this.formatString = this.format;
}
else if (this.format.skeleton !== '' && !isNullOrUndefined(this.format.skeleton)) {
var skeletonString = this.format.skeleton;
this.formatString = this.globalize.getDatePattern({ skeleton: skeletonString, type: 'date' });
}
else {
this.formatString = null;
}
}
else {
this.formatString = null;
}
};
DateRangePicker.prototype.initialize = function () {
if (this.angularTag !== null) {
this.validationAttribute(this.element, this.inputElement);
}
this.checkHtmlAttributes(false);
merge(this.defaultKeyConfigs, { shiftTab: 'shift+tab', tab: 'tab' });
var start = this.checkDateValue(new Date(this.checkValue(this.startValue)));
this.setProperties({ startDate: start }, true); // persist the value propeerty.
this.setProperties({ endValue: this.checkDateValue(new Date(this.checkValue(this.endValue))) }, true);
this.setValue();
this.setProperties({ min: this.checkDateValue(new Date(this.checkValue(this.min))) }, true);
this.setProperties({ max: this.checkDateValue(new Date(this.checkValue(this.max))) }, true);
this.l10n = new L10n('daterangepicker', this.defaultConstant, this.locale);
this.l10n.setLocale(this.locale);
this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
this.processPresets();
this.createInput();
this.updateHtmlAttributeToWrapper();
this.setRangeAllowEdit();
this.bindEvents();
};
DateRangePicker.prototype.setDataAttribute = function (isDynamic) {
var attributes = {};
if (!isDynamic) {
for (var i = 0; i < this.element.attributes.length; i++) {
attributes[this.element.attributes[i].name] =
this.element.getAttribute(this.element.attributes[i].name);
}
}
else {
attributes = this.htmlAttributes;
}
for (var _i = 0, _a = Object.keys(attributes); _i < _a.length; _i++) {
var pro = _a[_i];
if (pro.indexOf('data') === 0) {
this.firstHiddenChild.setAttribute(pro, attributes["" + pro]);
this.secondHiddenChild.setAttribute(pro, attributes["" + pro]);
}
}
};
DateRangePicker.prototype.setRangeAllowEdit = function () {
if (this.allowEdit) {
if (!this.readonly) {
this.inputElement.removeAttribute('readonly');
}
}
else {
attributes(this.inputElement, { 'readonly': '' });
}
this.updateClearIconState();
};
DateRangePicker.prototype.updateClearIconState = function () {
if (!this.allowEdit && this.inputWrapper && !this.readonly) {
if (this.inputElement.value === '') {
removeClass([this.inputWrapper.container], [NONEDITABLE]);
}
else {
addClass([this.inputWrapper.container], [NONEDITABLE]);
}
}
else if (this.inputWrapper) {
removeClass([this.inputWrapper.container], [NONEDITABLE]);
}
};
DateRangePicker.prototype.validationAttribute = function (element, input) {
var name = element.getAttribute('name') ? element.getAttribute('name') : element.getAttribute('id');
input.setAttribute('name', name);
element.removeAttribute('name');
var attributes = ['required', 'aria-required', 'form'];
for (var i = 0; i < attributes.length; i++) {
if (isNullOrUndefined(element.getAttribute(attributes[i]))) {
continue;
}
var attr = element.getAttribute(attributes[i]);
input.setAttribute(attributes[i], attr);
element.removeAttribute(attributes[i]);
}
};
DateRangePicker.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 (wrapperAttr.indexOf(key) > -1) {
if (key === 'class') {
var updatedClassValue = (this.htmlAttributes["" + key].replace(/\s+/g, ' ')).trim();
if (updatedClassValue !== '') {
addClass([this.inputWrapper.container], updatedClassValue.split(' '));
}
}
else if (key === 'style') {
var dateRangeStyle = this.inputWrapper.container.getAttribute(key);
dateRangeStyle = !isNullOrUndefined(dateRangeStyle) ? (dateRangeStyle + this.htmlAttributes["" + key]) :
this.htmlAttributes["" + key];
this.inputWrapper.container.setAttribute(key, dateRangeStyle);
}
else {
this.inputWrapper.container.setAttribute(key, this.htmlAttributes["" + key]);
}
}
}
}
};
DateRangePicker.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 (wrapperAttr.indexOf(key) < 0) {
this.inputElement.setAttribute(key, this.htmlAttributes["" + key]);
}
}
}
};
DateRangePicker.prototype.updateCssClass = function (cssNewClass, cssOldClass) {
if (!isNullOrUndefined(cssOldClass)) {
cssOldClass = (cssOldClass.replace(/\s+/g, ' ')).trim();
}
if (!isNullOrUndefined(cssNewClass)) {
cssNewClass = (cssNewClass.replace(/\s+/g, ' ')).trim();
}
Input.setCssClass(cssNewClass, [this.inputWrapper.container], cssOldClass);
if (this.popupWrapper) {
Input.setCssClass(cssNewClass, [this.popupWrapper], cssOldClass);
}
};
DateRangePicker.prototype.processPresets = function () {
this.presetsItem = [];
var i = 0;
if (!isNullOrUndefined(this.presets[0]) && !isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {
for (var _i = 0, _a = this.presets; _i < _a.length; _i++) {
var range = _a[_i];
var id = range.label.replace(/\s+/g, '') + '_' + (++i);
if (typeof range.end === 'string') {
this.presetsItem.push({
id: id, text: range.label, end: new Date(this.checkValue(range.end)), start: new Date(this.checkValue(range.start))
});
}
else {
this.presetsItem.push({ id: id, text: range.label, start: range.start, end: range.end });
}
}
var startDate = isNullOrUndefined(this.startValue) ? null : new Date(+this.startValue);
var endDate = isNullOrUndefined(this.endValue) ? null : new Date(+this.endValue);
this.presetsItem.push({ id: 'custom_range', text: this.l10n.getConstant('customRange'), start: startDate, end: endDate });
if (!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) {
this.isCustomRange = true;
this.activeIndex = this.presetsItem.length - 1;
}
}
};
DateRangePicker.prototype.bindEvents = function () {
EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.rangeIconHandler, this);
EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);
EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);
EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);
if (this.showClearButton && this.inputWrapper.clearButton) {
EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);
}
if (!this.isMobile) {
this.keyInputConfigs = extend(this.keyInputConfigs, this.keyConfigs);
this.inputKeyboardModule = new KeyboardEvents(this.inputElement, {
eventName: 'keydown',
keyAction: this.inputHandler.bind(this),
keyConfigs: this.keyInputConfigs
});
}
if (this.formElement) {
EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);
}
if (this.enabled) {
this.inputElement.setAttribute('tabindex', this.tabIndex);
}
else {
this.inputElement.tabIndex = -1;
}
};
DateRangePicker.prototype.unBindEvents = function () {
EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.rangeIconHandler);
EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);
EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);
EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);
if (this.showClearButton && this.inputWrapper.clearButton) {
EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler);
}
if (!this.isMobile) {
if (!isNullOrUndefined(this.inputKeyboardModule)) {
this.inputKeyboardModule.destroy();
}
}
if (this.formElement) {
EventHandler.remove(this.formElement, 'reset', this.formResetHandler);
}
this.inputElement.tabIndex = -1;
};
DateRangePicker.prototype.updateHiddenInput = function () {
if (this.firstHiddenChild && this.secondHiddenChild) {
var format = { format: this.formatString, type: 'datetime', skeleton: 'yMd' };
if (typeof this.startDate === 'string') {
this.startDate = this.globalize.parseDate(this.getAmPmValue(this.startDate), format);
}
if (typeof this.endDate === 'string') {
this.endDate = this.globalize.parseDate(this.getAmPmValue(this.endDate), format);
}
this.firstHiddenChild.value = (this.startDate && this.globalize.formatDate(this.startDate, format))
|| (this.inputElement.value);
this.secondHiddenChild.value = (this.endDate && this.globalize.formatDate(this.endDate, format)) ||
(this.inputElement.value);
this.dispatchEvent(this.firstHiddenChild, 'focusout');
this.dispatchEvent(this.firstHiddenChild, 'change');
}
};
DateRangePicker.prototype.inputChangeHandler = function (e) {
if (!this.enabled) {
return;
}
e.stopPropagation();
this.updateHiddenInput();
};
DateRangePicker.prototype.bindClearEvent = function () {
if (this.showClearButton && this.inputWrapper.clearButton) {
EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);
}
};
DateRangePicker.prototype.resetHandler = function (e) {
if (!this.enabled) {
return;
}
this.valueType = this.value;
e.preventDefault();
this.clear();
var clearedArgs = {
event: e
};
this.setProperties({ endDate: this.checkDateValue(this.endValue) }, true);
this.setProperties({ startDate: this.checkDateValue(this.startValue) }, true);
this.trigger('cleared', clearedArgs);
this.changeTrigger(e);
this.clearRange();
this.hide(e);
if (closest(this.element, 'form')) {
var element = this.firstHiddenChild;
var keyupEvent = document.createEvent('KeyboardEvent');
keyupEvent.initEvent('keyup', false, true);
element.dispatchEvent(keyupEvent);
}
};
DateRangePicker.prototype.restoreValue = function () {
this.previousEleValue = this.inputElement.value;
this.previousStartValue = this.startValue;
this.previousEndValue = this.endValue;
this.valueType = null;
this.initStartDate = this.checkDateValue(this.startValue);
this.initEndDate = this.checkDateValue(this.endValue);
this.setValue();
this.setModelValue();
};
DateRangePicker.prototype.formResetHandler = function (e) {
if (!this.enabled) {
return;
}
if (this.formElement && (e.target === this.formElement) && !this.inputElement.disabled) {
var val = this.inputElement.getAttribute('value');
if (!isNullOrUndefined(this.startCopy)) {
if (!isNullOrUndefined(this.value) && !isNullOrUndefined(this.value.start)) {
this.setProperties({ value: { start: this.startCopy, end: this.endCopy } }, true);
this.startValue = this.value.start;
this.endValue = this.value.end;
}
else {
this.setProperties({ value: [this.startCopy, this.endCopy] }, true);
this.startValue = this.value[0];
this.endValue = this.value[1];
}
this.setProperties({ startDate: this.startValue, endDate: this.endValue }, true);
}
else {
this.setProperties({ value: null, startDate: null, endDate: null }, true);
this.startValue = this.endValue = null;
}
if (this.element.tagName === 'EJS-DATERANGEPICKER') {
this.setProperties({ value: null, startDate: null, endDate: null }, true);
val = '';
this.startValue = this.endValue = null;
this.inputElement.setAttribute('value', '');
}
this.restoreValue();
if (this.inputElement) {
Input.setValue(val, this.inputElement, this.floatLabelType, this.showClearButton);
this.errorClass();
}
}
};
DateRangePicker.prototype.clear = function () {
if (this.startValue !== null) {
this.startValue = null;
}
if (this.endValue !== null) {
this.endValue = null;
}
if (this.value && this.value.start) {
this.setProperties({ value: { start: null, end: null } }, true);
}
if (this.value !== null && this.value.length > 0) {
this.setProperties({ value: null }, true);
}
Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);
if (!(isNullOrUndefined(this.applyButton))) {
this.applyButton.disabled = this.applyButton.element.disabled = true;
}
this.removeSelection();
};
DateRangePicker.prototype.rangeIconHandler = function (e) {
if (!this.enabled) {
return;
}
if (this.isMobile) {
this.inputElement.setAttribute('readonly', '');
}
e.preventDefault();
this.targetElement = null;
if (this.isPopupOpen() && document.body.contains(this.popupObj.element)) {
this.applyFunction(e);
}
else {
this.isRangeIconClicked = true;
this.inputWrapper.container.children[0].focus();
this.show(null, e);
if (!this.isMobile) {
if (!isNullOrUndefined(this.leftCalendar)) {
this.isRangeIconClicked = false;
this.calendarFocus();
this.isRangeIconClicked = true;
}
}
addClass([this.inputWrapper.container], [INPUTFOCUS]);
}
};
DateRangePicker.prototype.checkHtmlAttributes = function (isDynamic) {
this.globalize = new Internationalization(this.locale);
var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :
['startDate', 'endDate', 'minDays', 'maxDays', 'min', 'max', 'disabled', 'readonly', 'style', 'name', 'placeholder',
'type', 'value'];
var format = { format: this.formatString, type: 'date', skeleton: 'yMd' };
for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {
var prop = attributes_1[_i];
if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {
switch (prop) {
case 'disabled':
if ((isNullOrUndefined(this.dateRangeOptions) || (this.dateRangeOptions['enabled'] === undefined)) || isDynamic) {
var disabled = this.inputElement.getAttribute(prop) === 'disabled' ||
this.inputElement.getAttribute(prop) === '' || this.inputElement.getAttribute(prop) === 'true' ? true : false;
this.setProperties({ enabled: !disabled }, !isDynamic);
}
break;
case 'readonly':
if ((isNullOrUndefined(this.dateRangeOptions) || (this.dateRangeOptions['readonly'] === undefined)) || isDynamic) {
var readonly = this.inputElement.getAttribute(prop) === 'readonly' ||
this.inputElement.getAttribute(prop) === 'true' || this.inputElement.getAttribute(prop) === '' ? true : false;
this.setProperties({ readonly: readonly }, !isDynamic);
}
break;
case 'placeholder':
if ((isNullOrUndefined(this.dateRangeOptions) || (this.dateRangeOptions['placeholder'] === undefined)) || isDynamic) {
this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !isDynamic);
}
break;
case 'value':
if ((isNullOrUndefined(this.dateRangeOptions) || (this.dateRangeOptions['value'] === undefined)) || isDynamic) {
var value = this.inputElement.getAttribute(prop);
this.setProperties(setValue(prop, value, {}), !isDynamic);
}
break;
case 'style':
this.inputElement.setAttribute('style', '' + this.inputElement.getAttribute(prop));
break;
case 'min':
if ((isNullOrUndefined(this.min) || +this.min === +new Date(1900, 0, 1)) || isDynamic) {
var dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);
this.setProperties(setValue(prop, dateValue, {}), !isDynamic);
}
break;
case 'name':
this.inputElement.setAttribute('name', '' + this.inputElement.getAttribute(prop));
break;
case 'max':
if ((isNullOrUndefined(this.max) || +this.max === +new Date(2099, 11, 31)) || isDynamic) {
var dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);
this.setProperties(setValue(prop, dateValue, {}), !isDynamic);
}
break;
case 'startDate':
if (isNullOrUndefined(this.startDate)) {
var dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);
this.startValue = dateValue;
this.setValue();
}
break;
case 'endDate':
if (isNullOrUndefined(this.endDate)) {
var dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);
this.endValue = dateValue;
this.setValue();
}
break;
case 'minDays':
if (isNullOrUndefined(this.minDays)) {
this.setProperties(setValue(prop, parseInt(this.inputElement.getAttribute(prop), 10), {}), true);
}
break;
case 'maxDays':
if (isNullOrUndefined(this.maxDays)) {
this.setProperties(setValue(prop, parseInt(this.inputElement.getAttribute(prop), 10), {}), true);
}
break;
case 'type':
if (this.inputElement.getAttribute(prop) !== 'text') {
this.inputElement.setAttribute('type', 'text');
}
break;
}
}
}
};
DateRangePicker.prototype.createPopup = function () {
for (var i = 0; i < this.presetsItem.length; i++) {
if ((i !== (this.presetsItem.length - 1)) && this.presetsItem[i].id === 'custom_range') {
this.presetsItem.splice(i, 1);
}
}
this.activeIndex = this.presetsItem.length - 1;
this.isCustomRange = true;
for (var i = 0; i <= this.presetsItem.length - 2; i++) {
var startDate = this.presetsItem[i].start;
var endDate = this.presetsItem[i].end;
if (this.startValue && this.endValue) {
if (startDate.getDate() === this.startValue.getDate() && startDate.getMonth() === this.startValue.getMonth() &&
startDate.getFullYear() === this.startValue.getFullYear() && endDate.getDate() === this.endValue.getDate() &&
endDate.getMonth() === this.endValue.getMonth() && endDate.getFullYear() === this.endValue.getFullYear()) {
this.activeIndex = i;
this.isCustomRange = false;
}
}
}
this.popupWrapper = createElement('div', { id: this.element.id + '_popup', className: ROOT + ' ' + POPUP });
this.popupWrapper.setAttribute('aria-label', this.element.id);
this.popupWrapper.setAttribute('role', 'dialog');
this.adjustLongHeaderWidth();
var isPreset = (!this.isCustomRange || this.isMobile);
if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label) && isPreset) {
this.isCustomWindow = false;
this.createPresets();
this.listRippleEffect();
this.renderPopup();
}
else {
this.isCustomWindow = true;
this.renderControl();
}
};
DateRangePicker.prototype.renderControl = function () {
this.createControl();
this.bindCalendarEvents();
this.updateRange((this.isMobile ? [this.calendarElement] : [this.leftCalendar, this.rightCalendar]));
if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue) &&
!isNullOrUndefined(this.renderDayCellArgs) && this.renderDayCellArgs.isDisabled) {
this.disabledDateRender();
}
this.updateHeader();
};
DateRangePicker.prototype.clearCalendarEvents = function () {
if (this.leftCalPrevIcon && this.leftCalNextIcon && this.rightCalPrevIcon && this.rightCalNextIcon) {
EventHandler.clearEvents(this.leftCalPrevIcon);
EventHandler.clearEvents(this.leftCalNextIcon);
EventHandler.clearEvents(this.rightCalPrevIcon);
EventHandler.clearEvents(this.rightCalNextIcon);
}
};
DateRangePicker.prototype.updateNavIcons = function () {
_super.prototype.iconHandler.call(this);
};
DateRangePicker.prototype.calendarIconEvent = function () {
this.clearCalendarEvents();
if (this.leftCalPrevIcon && !this.leftCalPrevIcon.classList.contains(DISABLED)) {
EventHandler.add(this.leftCalPrevIcon, 'mousedown', this.navPrevFunction);
}
if (this.leftCalNextIcon && !this.leftCalNextIcon.classList.contains(DISABLED)) {
EventHandler.add(this.leftCalNextIcon, 'mousedown', this.navNextFunction);
}
if (this.rightCalPrevIcon && !this.rightCalPrevIcon.classList.contains(DISABLED)) {
EventHandler.add(this.rightCalPrevIcon, 'mousedown', this.navPrevFunction);
}
if (this.rightCalNextIcon && !this.rightCalNextIcon.classList.contains(DISABLED)) {
EventHandler.add(this.rightCalNextIcon, 'mousedown', this.navNextFunction);
}
};
DateRangePicker.prototype.bindCalendarEvents = function () {
if (!this.isMobile) {
this.updateNavIcons();
this.calendarIconEvent();
this.calendarIconRipple();
this.headerTitleElement = this.popupObj.element.querySelector('.' + RIGHTCALENDER + ' .' + HEADER + ' .' + TITLE);
this.headerTitleElement = this.popupObj.element.querySelector('.' + LEFTCALENDER + ' .' + HEADER + ' .' + TITLE);
this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);
this.leftKeyboardModule = new KeyboardEvents(this.leftCalendar, {
eventName: 'keydown',
keyAction: this.keyInputHandler.bind(this),
keyConfigs: this.defaultKeyConfigs
});
this.rightKeyboardModule = new KeyboardEvents(this.rightCalendar, {
eventName: 'keydown',
keyAction: this.keyInputHandler.bind(this),
keyConfigs: this.defaultKeyConfigs
});
}
else {
this.deviceCalendarEvent();
EventHandler.add(this.startButton.element, 'click', this.deviceHeaderClick, this);
EventHandler.add(this.endButton.element, 'click', this.deviceHeaderClick, this);
}
if (this.start === this.depth) {
this.bindCalendarCellEvents();
}
this.removeFocusedDate();
};
DateRangePicker.prototype.calendarIconRipple = function () {
rippleEffect(this.leftCalPrevIcon, { selector: '.e-prev', duration: 400, isCenterRipple: true });
rippleEffect(this.leftCalNextIcon, { selector: '.e-next', duration: 400, isCenterRipple: true });
rippleEffect(this.rightCalPrevIcon, { selector: '.e-prev', duration: 400, isCenterRipple: true });
rippleEffect(this.rightCalNextIcon, { selector: '.e-next', duration: 400, isCenterRipple: true });
};
DateRangePicker.prototype.deviceCalendarEvent = function () {
EventHandler.clearEvents(this.nextIcon);
EventHandler.clearEvents(this.previousIcon);
rippleEffect(this.nextIcon, { selector: '.e-prev', duration: 400, isCenterRipple: true });
rippleEffect(this.previousIcon, { selector: '.e-next', duration: 400, isCenterRipple: true });
if (this.nextIcon && !this.nextIcon.classList.contains(DISABLED)) {
EventHandler.add(this.nextIcon, 'mousedown', this.deviceNavNextFunction);
}
if (this.previousIcon && !this.previousIcon.classList.contains(DISABLED)) {
EventHandler.add(this.previousIcon, 'mousedown', this.deviceNavPrevFunction);
}
};
DateRangePicker.prototype.deviceNavNext = function (e) {
var calendar = closest(e.target, '.' + CALENDAR);
this.updateDeviceCalendar(calendar);
this.navigateNext(e);
this.deviceNavigation();
};
DateRangePicker.prototype.deviceNavPrevious = function (e) {
var calendar = closest(e.target, '.' + CALENDAR);
this.updateDeviceCalendar(calendar);
this.navigatePrevious(e);
this.deviceNavigation();
};
DateRangePicker.prototype.updateDeviceCalendar = function (calendar) {
if (calendar) {
this.previousIcon = calendar.querySelector('.' + PREVICON);
this.nextIcon = calendar.querySelector('.' + NEXTICON);
this.calendarElement = calendar;
this.deviceCalendar = calendar;
this.contentElement = calendar.querySelector('.' + CONTENT);
this.tableBodyElement = select('.' + CONTENT + ' tbody', calendar);
this.table = calendar.querySelector('.' + CONTENT).getElementsByTagName('table')[0];
this.headerTitleElement = calendar.querySelector('.' + HEADER + ' .' + TITLE);
this.headerElement = calendar.querySelector('.' + HEADER);
}
};
DateRangePicker.prototype.deviceHeaderClick = function (event) {
var element = event.currentTarget;
if (element.classList.contains(STARTBUTTON) && !isNullOrUndefined(this.startValue)) {
this.endButton.element.classList.remove(ACTIVE);
this.startButton.element.classList.add(ACTIVE);
var calendar = this.popupObj.element.querySelector('.' + CALENDAR);
this.updateDeviceCalendar(calendar);
if (isNullOrUndefined(this.calendarElement.querySelector('.' + STARTDATE + ':not(.e-other-month)'))) {
this.currentDate = new Date(+this.startValue);
remove(this.tableBodyElement);
this.createContentBody();
this.deviceNavigation();
}
this.removeClassDisabled();
}
else if (!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) {
this.startButton.element.classList.remove(ACTIVE);
this.endButton.element.classList.add(ACTIVE);
var calendar = this.popupObj.element.querySelector('.' + CALENDAR);
this.updateDeviceCalendar(calendar);
if (isNullOrUndefined(this.calendarElement.querySelector('.' + ENDDATE + ':not(.e-other-month)'))) {
this.currentDate = new Date(+this.endValue);
remove(this.tableBodyElement);
this.createContentBody();
this.deviceNavigation();
}
this.updateMinMaxDays(this.popupObj.element.querySelector('.' + CALENDAR));
this.selectableDates();
}
};
DateRangePicker.prototype.inputFocusHandler = function () {
if (!this.enabled) {
return;
}
this.preventBlur = false;
var focusArguments = {
model: this
};
if (!this.preventFocus) {
this.trigger('focus', focusArguments);
}
this.updateClearIconState();
if (this.openOnFocus && !this.preventFocus) {
this.preventFocus = true;
this.show();
}
else {
this.preventFocus = true;
}
};
DateRangePicker.prototype.inputBlurHandler = function (e) {
if (!this.enabled) {
return;
}
if (!this.preventBlur) {
var value = this.inputElement.value;
if (!isNullOrUndefined(this.presetsItem)) {
if (this.presetsItem.length > 0 && this.previousEleValue !== this.inputElement.value) {
this.activeIndex = this.presetsItem.length - 1;
this.isCustomRange = true;
}
}
if (!isNullOrUndefined(value) && value.trim() !== '') {
var range = value.split(' ' + this.separator + ' ');
if (range.length > 1) {
this.invalidValueString = null;
var dateOptions = { format: this.formatString, type: 'date', skeleton: 'yMd' };
var startDate = this.globalize.parseDate(this.getAmPmValue(range[0]).trim(), dateOptions);
var endDate = this.globalize.parseDate(this.getAmPmValue(range[1]).trim(), dateOptions);
if (this.start !== 'Decade' && this.start === 'Year' && this.depth !== 'Month') {
if (this.inputElement.defaultValue !== value) {
endDate = this.getStartEndDate(endDate, true);
}
}
if (!isNullOrUndefined(startDate) && !isNaN(+startDate) && !isNullOrUndefined(endDate) && !isNaN(+endDate)) {
var prevStartVal = this.startValue;
this.startValue = startDate;
var prevEndVal = this.endValue;
this.endValue = endDate;
this.setValue();
this.refreshControl();
if (value !== this.previousEleValue) {
this.changeTrigger(e);
}
if (!this.preventBlur && document.activeElement !== this.inputElement) {
this.preventFocus = false;
var blurArguments = {
model: this
};
this.trigger('blur', blurArguments);
}
this.updateHiddenInput();
// For Mobile mode, when a value is present and choose another range and click on console
// when popup is open, two startvalues and end values are updated in the popup.
if (this.isMobile && this.isPopupOpen()) {
this.startValue = prevStartVal;
this.endValue = prevEndVal;
}
return;
}
else {
if (!this.strictMode) {
this.startValue = null;
this.endValue = null;
this.setValue();
}
}
}
else {
if (!this.strictMode) {
this.startValue = null;
this.endValue = null;
this.setValue();
}
}
}
if (!this.strictMode) {
if (isNullOrUndefined(this.popupObj)) {
this.currentDate = null;
}
this.previousStartValue = this.previousEndValue = null;
this.startValue = null;
this.endValue = null;
this.setValue();
}
else {
if (!isNullOrUndefined(value) && value.trim() === '') {
this.startValue = null;
this.endValue = null;
}
Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);
this.updateInput();
}
this.errorClass();
this.changeTrigger(e);
if (!this.preventBlur && document.activeElement !== this.inputElement) {
this.preventFocus = false;
var blurArguments = {
model: this
};
this.trigger('blur', blurArguments);
}
}
this.updateHiddenInput();
};
DateRangePicker.prototype.getStartEndDate