UNPKG

@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,151 lines 115 kB
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 @typescript-eslint/no-explicit-any */ import { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base'; import { KeyboardEvents, Animation, Browser } from '@syncfusion/ej2-base'; import { cldrData, L10n, Component, getDefaultDateObject, rippleEffect, Event } from '@syncfusion/ej2-base'; import { remove, addClass, detach, removeClass, closest, append, attributes, setStyleAttribute } from '@syncfusion/ej2-base'; import { isNullOrUndefined, formatUnit, getValue, extend, getUniqueID, ChildProperty } from '@syncfusion/ej2-base'; import { Popup } from '@syncfusion/ej2-popups'; import { Input } from '@syncfusion/ej2-inputs'; import { ListBase } from '@syncfusion/ej2-lists'; var WRAPPERCLASS = 'e-time-wrapper'; var POPUP = 'e-popup'; var ERROR = 'e-error'; var POPUPDIMENSION = '240px'; var DAY = new Date().getDate(); var MONTH = new Date().getMonth(); var YEAR = new Date().getFullYear(); var ROOT = 'e-timepicker'; var LIBRARY = 'e-lib'; var CONTROL = 'e-control'; var CONTENT = 'e-content'; var SELECTED = 'e-active'; var HOVER = 'e-hover'; var NAVIGATION = 'e-navigation'; var DISABLED = 'e-disabled'; var ICONANIMATION = 'e-icon-anim'; var FOCUS = 'e-input-focus'; var LISTCLASS = 'e-list-item'; var HALFPOSITION = 2; var ANIMATIONDURATION = 50; var OVERFLOW = 'e-time-overflow'; var OFFSETVAL = 4; var EDITABLE = 'e-non-edit'; var wrapperAttributes = ['title', 'class', 'style']; // eslint-disable-next-line @typescript-eslint/no-namespace export var TimePickerBase; (function (TimePickerBase) { // eslint-disable-next-line max-len, jsdoc/require-jsdoc function createListItems(createdEl, min, max, globalize, timeFormat, step) { var formatOptions; if (this.calendarMode === 'Gregorian') { formatOptions = { format: timeFormat, type: 'time' }; } else { // eslint-disable-next-line @typescript-eslint/no-unused-vars formatOptions = { format: timeFormat, type: 'time', calendar: 'islamic' }; } var start; var interval = step * 60000; var listItems = []; var timeCollections = []; start = +(min.setMilliseconds(0)); var end = +(max.setMilliseconds(0)); while (end >= start) { timeCollections.push(start); listItems.push(globalize.formatDate(new Date(start), { format: timeFormat, type: 'time' })); start += interval; } var listTag = ListBase.createList(createdEl, listItems, null, true); return { collection: timeCollections, list: listTag }; } TimePickerBase.createListItems = createListItems; })(TimePickerBase || (TimePickerBase = {})); var TimeMaskPlaceholder = /** @class */ (function (_super) { __extends(TimeMaskPlaceholder, _super); function TimeMaskPlaceholder() { return _super !== null && _super.apply(this, arguments) || this; } __decorate([ Property('day') ], TimeMaskPlaceholder.prototype, "day", void 0); __decorate([ Property('month') ], TimeMaskPlaceholder.prototype, "month", void 0); __decorate([ Property('year') ], TimeMaskPlaceholder.prototype, "year", void 0); __decorate([ Property('day of the week') ], TimeMaskPlaceholder.prototype, "dayOfTheWeek", void 0); __decorate([ Property('hour') ], TimeMaskPlaceholder.prototype, "hour", void 0); __decorate([ Property('minute') ], TimeMaskPlaceholder.prototype, "minute", void 0); __decorate([ Property('second') ], TimeMaskPlaceholder.prototype, "second", void 0); return TimeMaskPlaceholder; }(ChildProperty)); export { TimeMaskPlaceholder }; /** * TimePicker is an intuitive interface component which provides an options to select a time value * from popup list or to set a desired time value. * ``` * <input id='timepicker' type='text'/> * <script> * var timePickerObj = new TimePicker({ value: new Date() }); * timePickerObj.appendTo('#timepicker'); * </script> * ``` */ var TimePicker = /** @class */ (function (_super) { __extends(TimePicker, _super); /** * Constructor for creating the widget * * @param {TimePickerModel} options - Specifies the TimePicker model. * @param {string | HTMLInputElement} element - Specifies the element to render as component. * @private */ function TimePicker(options, element) { var _this = _super.call(this, options, element) || this; _this.liCollections = []; _this.timeCollections = []; _this.disableItemCollection = []; _this.invalidValueString = null; _this.preventChange = false; _this.maskedDateValue = ''; _this.moduleName = _this.getModuleName(); _this.timeOptions = options; return _this; } /** * Initialize the event handler * * @returns {void} * @private */ TimePicker.prototype.preRender = function () { this.keyConfigure = { enter: 'enter', escape: 'escape', end: 'end', tab: 'tab', home: 'home', down: 'downarrow', up: 'uparrow', left: 'leftarrow', right: 'rightarrow', open: 'alt+downarrow', close: 'alt+uparrow' }; this.cloneElement = this.element.cloneNode(true); removeClass([this.cloneElement], [ROOT, CONTROL, LIBRARY]); this.inputElement = this.element; this.angularTag = null; this.formElement = closest(this.element, 'form'); if (this.element.tagName === 'EJS-TIMEPICKER') { this.angularTag = this.element.tagName; this.inputElement = this.createElement('input'); this.element.appendChild(this.inputElement); } this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0'; this.element.removeAttribute('tabindex'); this.openPopupEventArgs = { appendTo: document.body }; }; // element creation TimePicker.prototype.render = function () { this.initialize(); this.createInputElement(); this.updateHtmlAttributeToWrapper(); this.setTimeAllowEdit(); this.setEnable(); this.validateInterval(); this.bindEvents(); this.validateDisable(); this.setTimeZone(); this.setValue(this.getFormattedValue(this.value)); if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType === 'Always' || !this.floatLabelType || !this.placeholder)) { this.updateInputValue(this.maskedDateValue); this.checkErrorState(this.maskedDateValue); } this.anchor = this.inputElement; this.inputElement.setAttribute('value', this.inputElement.value); this.inputEleValue = this.getDateObject(this.inputElement.value); 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(); }; TimePicker.prototype.setTimeZone = function () { if (!isNullOrUndefined(this.serverTimezoneOffset) && this.value) { var clientTimeZoneDiff = new Date().getTimezoneOffset() / 60; var serverTimezoneDiff = this.serverTimezoneOffset; var timeZoneDiff = serverTimezoneDiff + clientTimeZoneDiff; timeZoneDiff = this.isDayLightSaving() ? timeZoneDiff-- : timeZoneDiff; this.value = new Date((this.value).getTime() + (timeZoneDiff * 60 * 60 * 1000)); } }; TimePicker.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)); }; TimePicker.prototype.setTimeAllowEdit = function () { if (this.allowEdit) { if (!this.readonly) { this.inputElement.removeAttribute('readonly'); } } else { attributes(this.inputElement, { 'readonly': '' }); } this.clearIconState(); }; TimePicker.prototype.clearIconState = function () { if (!this.allowEdit && this.inputWrapper && !this.readonly) { if (this.inputElement.value === '') { removeClass([this.inputWrapper.container], [EDITABLE]); } else { addClass([this.inputWrapper.container], [EDITABLE]); } } else if (this.inputWrapper) { removeClass([this.inputWrapper.container], [EDITABLE]); } }; TimePicker.prototype.validateDisable = function () { this.setMinMax(this.initMin, this.initMax); if (!isNullOrUndefined(this.value)) { this.popupCreation(); this.popupObj.destroy(); this.popupWrapper = this.popupObj = null; } if ((!isNaN(+this.value) && this.value !== null)) { if (!this.valueIsDisable(this.value)) { //disable value given in value property so reset the date based on current date if (this.strictMode) { this.resetState(); } this.initValue = null; this.initMax = this.getDateObject(this.initMax); this.initMin = this.getDateObject(this.initMin); this.timeCollections = this.liCollections = []; this.setMinMax(this.initMin, this.initMax); } } }; TimePicker.prototype.validationAttribute = function (target, input) { var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id'); input.setAttribute('name', name); target.removeAttribute('name'); var attributes = ['required', 'aria-required', 'form']; for (var i = 0; i < attributes.length; i++) { if (isNullOrUndefined(target.getAttribute(attributes[i]))) { continue; } var attr = target.getAttribute(attributes[i]); input.setAttribute(attributes[i], attr); target.removeAttribute(attributes[i]); } }; TimePicker.prototype.initialize = function () { this.globalize = new Internationalization(this.locale); this.defaultCulture = new Internationalization('en'); this.checkTimeFormat(); this.checkInvalidValue(this.value); // persist the value property. this.setProperties({ value: this.checkDateValue(new Date(this.checkInValue(this.value))) }, true); this.setProperties({ min: this.checkDateValue(new Date(this.checkInValue(this.min))) }, true); this.setProperties({ max: this.checkDateValue(new Date(this.checkInValue(this.max))) }, true); this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkInValue(this.scrollTo))) }, true); if (this.angularTag !== null) { this.validationAttribute(this.element, this.inputElement); } this.updateHtmlAttributeToElement(); this.checkAttributes(false); //check the input element attributes var localeText = { placeholder: this.placeholder }; this.l10n = new L10n('timepicker', localeText, this.locale); this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true); this.initValue = this.checkDateValue(this.value); this.initMin = this.checkDateValue(this.min); this.initMax = this.checkDateValue(this.max); this.isNavigate = this.isPreventBlur = this.isTextSelected = false; this.activeIndex = this.valueWithMinutes = this.prevDate = null; if (!isNullOrUndefined(this.element.getAttribute('id'))) { if (this.angularTag !== null) { this.inputElement.id = this.element.getAttribute('id') + '_input'; } } else { //for angular case this.element.id = getUniqueID('ej2_timepicker'); if (this.angularTag !== null) { attributes(this.inputElement, { 'id': this.element.id + '_input' }); } } if (isNullOrUndefined(this.inputElement.getAttribute('name'))) { attributes(this.inputElement, { 'name': this.element.id }); } if (this.enableMask) { this.notify('createMask', { module: 'MaskedDateTime' }); } }; TimePicker.prototype.checkTimeFormat = function () { if (this.format) { if (typeof this.format === 'string') { this.formatString = this.format; } else if (!isNullOrUndefined(this.format.skeleton) && this.format.skeleton !== '') { var skeletonString = this.format.skeleton; this.formatString = this.globalize.getDatePattern({ type: 'time', skeleton: skeletonString }); } else { this.formatString = this.globalize.getDatePattern({ type: 'time', skeleton: 'short' }); } } else { this.formatString = null; } }; TimePicker.prototype.checkDateValue = function (value) { return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null; }; TimePicker.prototype.createInputElement = function () { if (this.fullScreenMode && Browser.isDevice) { this.cssClass += ' ' + 'e-popup-expand'; } var updatedCssClassesValue = this.cssClass; var isBindClearAction = this.enableMask ? false : true; if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') { updatedCssClassesValue = (this.cssClass.replace(/\s+/g, ' ')).trim(); } this.inputWrapper = Input.createInput({ element: this.inputElement, bindClearAction: isBindClearAction, floatLabelType: this.floatLabelType, properties: { readonly: this.readonly, placeholder: this.placeholder, cssClass: updatedCssClassesValue, enabled: this.enabled, enableRtl: this.enableRtl, showClearButton: this.showClearButton }, buttons: [' e-input-group-icon e-time-icon e-icons'] }, this.createElement); this.inputWrapper.container.style.width = this.setWidth(this.width); attributes(this.inputElement, { 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off', 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'false', 'aria-invalid': 'false' }); if (!this.isNullOrEmpty(this.inputStyle)) { Input.addAttributes({ 'style': this.inputStyle }, this.inputElement); } addClass([this.inputWrapper.container], WRAPPERCLASS); }; TimePicker.prototype.getCldrDateTimeFormat = function () { var culture = new Internationalization(this.locale); var cldrTime; var dateFormat = culture.getDatePattern({ skeleton: 'yMd' }); if (this.isNullOrEmpty(this.formatString)) { cldrTime = dateFormat + ' ' + this.cldrFormat('time'); } else { cldrTime = this.formatString; } return cldrTime; }; TimePicker.prototype.checkInvalidValue = function (value) { var isInvalid = false; if (typeof value !== 'object' && !isNullOrUndefined(value)) { var valueString = value; if (typeof valueString === 'string') { valueString = valueString.trim(); } var valueExpression = null; var valueExp = null; if (typeof value === 'number') { valueString = value.toString(); } else if (typeof value === 'string') { if (!(/^[a-zA-Z0-9- ]*$/).test(value)) { valueExpression = this.setCurrentDate(this.getDateObject(value)); if (isNullOrUndefined(valueExpression)) { valueExpression = this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(valueString), { format: this.getCldrDateTimeFormat(), type: 'datetime' })); if (isNullOrUndefined(valueExpression)) { valueExpression = this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(valueString), { format: this.formatString, type: 'dateTime', skeleton: 'yMd' })); } } } } valueExp = this.globalize.parseDate(this.getAmPmValue(valueString), { format: this.getCldrDateTimeFormat(), type: 'datetime' }); valueExpression = (!isNullOrUndefined(valueExp) && valueExp instanceof Date && !isNaN(+valueExp)) ? valueExp : null; if (isNullOrUndefined(valueExpression) && valueString.replace(/\s/g, '').length) { 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(value)) || isNaN(+new Date('' + valueString))) { isInvalid = true; } else { valueExpression = new Date('' + valueString); } } if (isInvalid) { if (!this.strictMode) { this.invalidValueString = valueString; } this.setProperties({ value: null }, true); this.initValue = null; } else { this.setProperties({ value: valueExpression }, true); this.initValue = this.value; } } }; TimePicker.prototype.requiredModules = function () { var modules = []; if (this.enableMask) { modules.push({ args: [this], member: 'MaskedDateTime' }); } return modules; }; TimePicker.prototype.getAmPmValue = function (date) { try { if (typeof date === 'string' && date.trim() !== '') { // Replace am/pm variants with uppercase AM/PM return date.replace(/(am|pm|Am|aM|pM|Pm)/g, function (match) { return match.toLocaleUpperCase(); }); } // If date is null, undefined, or an empty string, return a default value or empty string return ''; } catch (error) { console.error('Error occurred while processing date:', error); return ''; // Return a default value in case of an error } }; TimePicker.prototype.cldrFormat = function (type) { var cldrDateTimeString; if (this.locale === 'en' || this.locale === 'en-US') { cldrDateTimeString = (getValue('timeFormats.short', getDefaultDateObject())); } else { cldrDateTimeString = (this.getCultureTimeObject(cldrData, '' + this.locale)); } return cldrDateTimeString; }; // destroy function TimePicker.prototype.destroy = function () { this.hide(); if (this.showClearButton) { this.clearButton = document.getElementsByClassName('e-clear-icon')[0]; } this.unBindEvents(); var ariaAttribute = { 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off', 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'true', 'aria-invalid': 'false' }; if (this.inputElement) { Input.removeAttributes(ariaAttribute, this.inputElement); if (this.angularTag === null) { this.inputWrapper.container.parentElement.appendChild(this.inputElement); } if (!isNullOrUndefined(this.cloneElement.getAttribute('tabindex'))) { this.inputElement.setAttribute('tabindex', this.tabIndex); } else { this.inputElement.removeAttribute('tabindex'); } this.ensureInputAttribute(); this.enableElement([this.inputElement]); this.inputElement.classList.remove('e-input'); if (isNullOrUndefined(this.cloneElement.getAttribute('disabled'))) { Input.setEnabled(true, this.inputElement, this.floatLabelType); } } if (this.inputWrapper.container) { detach(this.inputWrapper.container); } this.inputWrapper = this.popupWrapper = this.cloneElement = undefined; this.liCollections = this.timeCollections = this.disableItemCollection = []; if (!isNullOrUndefined(this.rippleFn)) { this.rippleFn(); } Input.destroy({ element: this.inputElement, floatLabelType: this.floatLabelType, properties: this.properties }, this.clearButton); _super.prototype.destroy.call(this); if (this.formElement) { EventHandler.remove(this.formElement, 'reset', this.formResetHandler); } this.rippleFn = null; this.openPopupEventArgs = null; this.selectedElement = null; this.listTag = null; this.liCollections = null; }; TimePicker.prototype.ensureInputAttribute = function () { var propertyList = []; for (var i = 0; i < this.inputElement.attributes.length; i++) { propertyList[i] = this.inputElement.attributes[i].name; } for (var i = 0; i < propertyList.length; i++) { if (!isNullOrUndefined(this.cloneElement.getAttribute(propertyList[i]))) { this.inputElement.setAttribute(propertyList[i], this.cloneElement.getAttribute(propertyList[i])); if (propertyList[i].toLowerCase() === 'value') { this.inputElement.value = this.cloneElement.getAttribute(propertyList[i]); } } else { this.inputElement.removeAttribute(propertyList[i]); if (propertyList[i].toLowerCase() === 'value') { this.inputElement.value = ''; } } } }; //popup creation TimePicker.prototype.popupCreation = function () { this.popupWrapper = this.createElement('div', { className: ROOT + ' ' + POPUP, attrs: { 'id': this.element.id + '_popup' } }); this.popupWrapper.style.visibility = 'hidden'; this.popupWrapper.setAttribute('aria-label', this.element.id); this.popupWrapper.setAttribute('role', 'dialog'); if (!isNullOrUndefined(this.cssClass)) { this.popupWrapper.className += ' ' + this.cssClass; } if (!isNullOrUndefined(this.step) && this.step > 0) { this.generateList(); append([this.listWrapper], this.popupWrapper); } this.addSelection(); this.renderPopup(); detach(this.popupWrapper); }; TimePicker.prototype.getPopupHeight = function () { var height = parseInt(POPUPDIMENSION, 10); var popupHeight = this.popupWrapper.getBoundingClientRect().height; return popupHeight > height ? height : popupHeight; }; TimePicker.prototype.generateList = function () { this.createListItems(); this.wireListEvents(); var rippleModel = { duration: 300, selector: '.' + LISTCLASS }; this.rippleFn = rippleEffect(this.listWrapper, rippleModel); this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS); }; TimePicker.prototype.renderPopup = function () { var _this = this; this.containerStyle = this.inputWrapper.container.getBoundingClientRect(); this.popupObj = new Popup(this.popupWrapper, { width: this.setPopupWidth(this.width), zIndex: this.zIndex, targetType: 'relative', position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' }, collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' }, enableRtl: this.enableRtl, relateTo: Browser.isDevice ? document.body : this.inputWrapper.container, offsetY: OFFSETVAL, open: function () { _this.popupWrapper.style.visibility = 'visible'; addClass([_this.inputWrapper.buttons[0]], SELECTED); }, close: function () { removeClass([_this.inputWrapper.buttons[0]], SELECTED); _this.unWireListEvents(); _this.inputElement.removeAttribute('aria-activedescendant'); remove(_this.popupObj.element); _this.popupObj.destroy(); _this.popupWrapper.innerHTML = ''; _this.listWrapper = _this.popupWrapper = _this.listTag = undefined; }, targetExitViewport: function () { if (!Browser.isDevice) { _this.hide(); } } }); if (!Browser.isDevice) { this.popupObj.collision = { X: 'none', Y: 'flip' }; } if (Browser.isDevice && this.fullScreenMode) { this.popupObj.element.style.maxHeight = '100%'; this.popupObj.element.style.width = '100%'; } else { this.popupObj.element.style.maxHeight = POPUPDIMENSION; } if (Browser.isDevice && this.fullScreenMode) { var modelHeader = this.createElement('div', { className: 'e-model-header' }); var modelTitleSpan = this.createElement('span', { className: 'e-model-title' }); modelTitleSpan.textContent = 'Select time'; var modelCloseIcon = this.createElement('span', { className: 'e-popup-close' }); EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.timePopupCloseHandler, this); modelHeader.appendChild(modelCloseIcon); modelHeader.appendChild(modelTitleSpan); this.popupWrapper.insertBefore(modelHeader, this.popupWrapper.firstElementChild); } }; TimePicker.prototype.timePopupCloseHandler = function (e) { this.hide(); }; //util function TimePicker.prototype.getFormattedValue = function (value) { if (isNullOrUndefined(this.checkDateValue(value))) { return null; } else { return this.globalize.formatDate(value, { skeleton: 'medium', type: 'time' }); } }; TimePicker.prototype.getDateObject = function (text) { if (!this.isNullOrEmpty(text)) { var dateValue = this.createDateObj(text); var value = !this.isNullOrEmpty(this.initValue); if (this.checkDateValue(dateValue)) { var date = value ? this.initValue.getDate() : DAY; var month = value ? this.initValue.getMonth() : MONTH; var year = value ? this.initValue.getFullYear() : YEAR; return new Date(year, month, date, dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds()); } } return null; }; TimePicker.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 (wrapperAttributes.indexOf(key) > -1) { if (key === 'class') { var updatedClassesValue = (this.htmlAttributes["" + key].replace(/\s+/g, ' ')).trim(); if (updatedClassesValue !== '') { addClass([this.inputWrapper.container], updatedClassesValue.split(' ')); } } else if (key === 'style') { var timeStyle = this.inputWrapper.container.getAttribute(key); timeStyle = !isNullOrUndefined(timeStyle) ? (timeStyle + this.htmlAttributes["" + key]) : this.htmlAttributes["" + key]; this.inputWrapper.container.setAttribute(key, timeStyle); } else { this.inputWrapper.container.setAttribute(key, this.htmlAttributes["" + key]); } } } } }; TimePicker.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 (wrapperAttributes.indexOf(key) < 0) { this.inputElement.setAttribute(key, this.htmlAttributes["" + key]); } } } }; TimePicker.prototype.updateCssClass = function (cssClassNew, cssClassOld) { if (!isNullOrUndefined(cssClassOld)) { cssClassOld = (cssClassOld.replace(/\s+/g, ' ')).trim(); } if (!isNullOrUndefined(cssClassNew)) { cssClassNew = (cssClassNew.replace(/\s+/g, ' ')).trim(); } Input.setCssClass(cssClassNew, [this.inputWrapper.container], cssClassOld); if (this.popupWrapper) { Input.setCssClass(cssClassNew, [this.popupWrapper], cssClassOld); } }; TimePicker.prototype.removeErrorClass = function () { removeClass([this.inputWrapper.container], ERROR); attributes(this.inputElement, { 'aria-invalid': 'false' }); }; TimePicker.prototype.checkErrorState = function (val) { var value = this.getDateObject(val); if ((this.validateState(value) && !this.invalidValueString) || (this.enableMask && this.inputElement.value === this.maskedDateValue)) { this.removeErrorClass(); } else { addClass([this.inputWrapper.container], ERROR); attributes(this.inputElement, { 'aria-invalid': 'true' }); } }; TimePicker.prototype.validateInterval = function () { if (!isNullOrUndefined(this.step) && this.step > 0) { this.enableElement([this.inputWrapper.buttons[0]]); } else { this.disableTimeIcon(); } }; TimePicker.prototype.disableTimeIcon = function () { this.disableElement([this.inputWrapper.buttons[0]]); this.hide(); }; TimePicker.prototype.disableElement = function (element) { addClass(element, DISABLED); }; TimePicker.prototype.enableElement = function (element) { removeClass(element, DISABLED); }; TimePicker.prototype.selectInputText = function () { this.inputElement.setSelectionRange(0, (this.inputElement).value.length); }; TimePicker.prototype.setCursorToEnd = function () { this.inputElement.setSelectionRange((this.inputElement).value.length, (this.inputElement).value.length); }; TimePicker.prototype.getMeridianText = function () { var meridian; if (this.locale === 'en' || this.locale === 'en-US') { meridian = getValue('dayPeriods.format.wide', getDefaultDateObject()); } else { var gregorianFormat = '.dates.calendars.gregorian.dayPeriods.format.abbreviated'; var mainVal = 'main.'; meridian = getValue(mainVal + '' + this.locale + gregorianFormat, cldrData); } return meridian; }; TimePicker.prototype.getCursorSelection = function () { var input = (this.inputElement); var start = 0; var end = 0; if (!isNaN(input.selectionStart)) { start = input.selectionStart; end = input.selectionEnd; } return { start: Math.abs(start), end: Math.abs(end) }; }; TimePicker.prototype.getActiveElement = function () { if (!isNullOrUndefined(this.popupWrapper)) { return this.popupWrapper.querySelectorAll('.' + SELECTED); } else { return null; } }; TimePicker.prototype.isNullOrEmpty = function (value) { if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) { return true; } else { return false; } }; TimePicker.prototype.setWidth = function (width) { if (typeof width === 'number') { width = formatUnit(width); } else if (typeof width === 'string') { width = (width.match(/px|%|em/)) ? width : formatUnit(width); } else { width = '100%'; } return width; }; TimePicker.prototype.setPopupWidth = function (width) { width = this.setWidth(width); if (width.indexOf('%') > -1) { var inputWidth = this.containerStyle.width * parseFloat(width) / 100; width = inputWidth.toString() + 'px'; } return width; }; TimePicker.prototype.setScrollPosition = function () { var element = this.selectedElement; if (!isNullOrUndefined(element)) { this.findScrollTop(element); } else if (this.popupWrapper && this.checkDateValue(this.scrollTo)) { this.setScrollTo(); } }; TimePicker.prototype.findScrollTop = function (element) { var listHeight = this.getPopupHeight(); var nextEle = element.nextElementSibling; var height = nextEle ? nextEle.offsetTop : element.offsetTop; var liHeight = element.getBoundingClientRect().height; if ((height + element.offsetTop) > listHeight) { this.popupWrapper.scrollTop = nextEle ? (height - (listHeight / HALFPOSITION + liHeight / HALFPOSITION)) : height; } else { this.popupWrapper.scrollTop = 0; } }; TimePicker.prototype.setScrollTo = function () { var element; if (!isNullOrUndefined(this.popupWrapper)) { var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS); if (items.length) { var initialTime = this.timeCollections[0]; var scrollTime = this.getDateObject(this.checkDateValue(this.scrollTo)).getTime(); element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))]; } } else { this.popupWrapper.scrollTop = 0; } if (!isNullOrUndefined(element)) { this.findScrollTop(element); } else { this.popupWrapper.scrollTop = 0; } }; TimePicker.prototype.getText = function () { return (isNullOrUndefined(this.checkDateValue(this.value))) ? '' : this.getValue(this.value); }; TimePicker.prototype.getValue = function (value) { return (isNullOrUndefined(this.checkDateValue(value))) ? null : this.globalize.formatDate(value, { format: this.cldrTimeFormat(), type: 'time' }); }; TimePicker.prototype.cldrDateFormat = function () { var cldrDate; if (this.locale === 'en' || this.locale === 'en-US') { cldrDate = (getValue('dateFormats.short', getDefaultDateObject())); } else { cldrDate = (this.getCultureDateObject(cldrData, '' + this.locale)); } return cldrDate; }; TimePicker.prototype.cldrTimeFormat = function () { var cldrTime; if (this.isNullOrEmpty(this.formatString)) { if (this.locale === 'en' || this.locale === 'en-US') { cldrTime = (getValue('timeFormats.short', getDefaultDateObject())); } else { cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale)); } } else { cldrTime = this.formatString; } return cldrTime; }; TimePicker.prototype.dateToNumeric = function () { var cldrTime; if (this.locale === 'en' || this.locale === 'en-US') { cldrTime = (getValue('timeFormats.medium', getDefaultDateObject())); } else { cldrTime = (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.medium', cldrData)); } return cldrTime; }; TimePicker.prototype.getExactDateTime = function (value) { if (isNullOrUndefined(this.checkDateValue(value))) { return null; } else { return this.globalize.formatDate(value, { format: this.dateToNumeric(), type: 'time' }); } }; TimePicker.prototype.setValue = function (value) { var time = this.checkValue(value); if (!this.strictMode && !this.validateState(time)) { if (this.checkDateValue(this.valueWithMinutes) === null) { this.initValue = this.valueWithMinutes = null; } this.validateMinMax(this.value, this.min, this.max); } else { if (this.isNullOrEmpty(time)) { this.initValue = null; this.validateMinMax(this.value, this.min, this.max); } else { this.initValue = this.compareFormatChange(time); } } this.updateInput(true, this.initValue); }; TimePicker.prototype.compareFormatChange = function (value) { if (isNullOrUndefined(value)) { return null; } return (value !== this.getText()) ? this.getDateObject(value) : this.getDateObject(this.value); }; TimePicker.prototype.updatePlaceHolder = function () { Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement); }; //event related functions TimePicker.prototype.updateInputValue = function (value) { Input.setValue(value, this.inputElement, this.floatLabelType, this.showClearButton); }; TimePicker.prototype.preventEventBubbling = function (e) { e.preventDefault(); this.interopAdaptor.invokeMethodAsync('OnTimeIconClick'); }; TimePicker.prototype.popupHandler = function (e) { if (!this.enabled) { return; } if (Browser.isDevice) { this.inputElement.setAttribute('readonly', ''); } e.preventDefault(); if (this.isPopupOpen()) { this.closePopup(0, e); } else { this.inputElement.focus(); this.show(e); } }; TimePicker.prototype.mouseDownHandler = function () { if (!this.enabled) { return; } if (!this.readonly) { this.inputElement.setSelectionRange(0, 0); EventHandler.add(this.inputElement, 'mouseup', this.mouseUpHandler, this); } }; TimePicker.prototype.mouseUpHandler = function (event) { if (!this.readonly) { event.preventDefault(); if (this.enableMask) { event.preventDefault(); this.notify('setMaskSelection', { module: 'MaskedDateTime' }); return; } else { EventHandler.remove(this.inputElement, 'mouseup', this.mouseUpHandler); var curPos = this.getCursorSelection(); if (!(curPos.start === 0 && curPos.end === this.inputElement.value.length)) { if (this.inputElement.value.length > 0) { this.cursorDetails = this.focusSelection(); } this.inputElement.setSelectionRange(this.cursorDetails.start, this.cursorDetails.end); } } } }; TimePicker.prototype.focusSelection = function () { var regex = new RegExp('^[a-zA-Z0-9]+$'); var split = this.inputElement.value.split(''); split.push(' '); var curPos = this.getCursorSelection(); var start = 0; var end = 0; var isSeparator = false; if (!this.isTextSelected) { for (var i = 0; i < split.length; i++) { if (!regex.test(split[i])) { end = i; isSeparator = true; } if (isSeparator) { if (curPos.start >= start && curPos.end <= end) { // eslint-disable-next-line no-self-assign end = end; this.isTextSelected = true; break; } else { start = i + 1; isSeparator = false; } } } } else { start = curPos.start; end = curPos.end; this.isTextSelected = false; } return { start: start, end: end }; }; TimePicker.prototype.inputHandler = function (event) { if (!this.readonly && this.enabled) { if (!((event.action === 'right' || event.action === 'left' || event.action === 'tab') || ((event.action === 'home' || event.action === 'end' || event.action === 'up' || event.action === 'down') && !this.isPopupOpen() && !this.enableMask))) { event.preventDefault(); } switch (event.action) { case 'home': case 'end': case 'up': case 'down': if (!this.isPopupOpen()) { this.popupCreation(); this.popupObj.destroy(); this.popupObj = this.popupWrapper = null; } if (this.enableMask && !this.readonly && !this.isPopupOpen()) { event.preventDefault(); this.notify('keyDownHandler', { module: 'MaskedDateTime', e: event }); } if (this.isPopupOpen()) { this.keyHandler(event); } break; case 'enter': if (this.isNavigate) { this.selectedElement = this.liCollections[this.activeIndex]; this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]); this.updateValue(this.valueWithMinutes, event); } else { this.updateValue(this.inputElement.value, event); } this.hide(); this.isNavigate = false; if (this.isPopupOpen()) { event.stopPropagation(); } break; case 'open': this.show(event); break; case 'escape': this.updateInputValue(this.objToString(this.value)); if (this.enableMask) { if (!this.value) { this.updateInputValue(this.maskedDateValue); } this.createMask(); } this.previousState(this.value); this.hide(); break; case 'close': this.hide(); break; case 'right': case 'left': case 'tab': case 'shiftTab': if (!this.isPopupOpen() && this.enableMask && !this.readonly) { if ((this.inputElement.selectionStart === 0 && this.inputElement.selectionEnd === this.inputElement.value.length) || (this.inputElement.selectionEnd !== this.inputElement.value.length && event.action === 'tab') || (this.inputElement.selectionStart !== 0 && event.action === 'shiftTab') || (event.action === 'left' || event.action === 'right')) { event.preventDefault(); } this.notify('keyDownHandler', { module: 'MaskedDateTime', e: event }); } break; default: this.isNavigate = false; break; } } }; TimePicker.prototype.onMouseClick = function (event) { var target = event.target; var li = this.selectedElement = closest(target, '.' + LISTCLASS); this.setSelection(li, event); if (li && li.classList.contains(LISTCLASS)) { this.hide(); } }; TimePicker.prototype.closePopup = function (delay, e) { var _this = this; if (this.isPopupOpen() && this.popupWrapper) { var args = { popup: this.popupObj, event: e || null, cancel: false, name: 'open' }; removeClass([document.body], OVERFLOW); this.trigger('close', args, function (args) { if (!args.cancel) { var animModel = { name: 'FadeOut', duration: ANIMATIONDURATION, delay: delay ? delay : 0 }; _this.popupObj.hide(new Animation(animModel)); removeClass([_this.inputWrapper.container], [ICONANIMATION]); attributes(_this.inputElement, { 'aria-expanded': 'false' }); _this.inputElement.removeAttribute('aria-owns'); _this.inputElement.removeAttribute('aria-controls'); _this.inputElement.removeAttribute('aria-activedescendant'); EventHandler.remove(document, 'mousedown touchstart', _this.documentClickHandler); } if (Browser.isDevice && _this.modal) { _this.modal.style.display = 'none'; _this.modal.outerHTML = ''; _this.modal = null; } if (Browser.isDevice) { if (!isNullOrUndefined(_this.mobileTimePopupWrap)) { _this.mobileTimePopupWrap.remove(); _this.mobileTimePopupWrap = null; } } if (Browser.isDevice && _this.allowEdit && !_this.readonly) { _this.inputElement.removeAttribute('readonly'); } }); } else { if (Browser.isDevice && this.allowEdit && !this.readonly) { this.inputElement.removeAttribute('readonly'); } } }; TimePicker.prototype.disposeServerPopup = function () { if (this.popupWrapper) { this.popupWrapper.style.visibility = 'hidden'; this.popupWrapper.style.top = '-9999px