UNPKG

primeng

Version:

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/primeng.svg)](https://badge.fury.io/js/primeng) [![Build Status](https://travis-ci.org/primefaces/primeng.

1,294 lines (1,293 loc) 99.1 kB
import { forwardRef, EventEmitter, ElementRef, Renderer2, ChangeDetectorRef, NgZone, Input, Output, ContentChildren, ViewChild, Component, ChangeDetectionStrategy, NgModule } from '@angular/core'; import { trigger, state, style, transition, animate } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { ButtonModule } from 'primeng/button'; import { DomHandler } from 'primeng/dom'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; 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; }; var __read = (this && this.__read) || function (o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; var i = m.call(o), r, ar = [], e; try { while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value); } catch (error) { e = { error: error }; } finally { try { if (r && !r.done && (m = i["return"])) m.call(i); } finally { if (e) throw e.error; } } return ar; }; var __spread = (this && this.__spread) || function () { for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i])); return ar; }; var __values = (this && this.__values) || function(o) { var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0; if (m) return m.call(o); if (o && typeof o.length === "number") return { next: function () { if (o && i >= o.length) o = void 0; return { value: o && o[i++], done: !o }; } }; throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined."); }; var CALENDAR_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(function () { return Calendar; }), multi: true }; var Calendar = /** @class */ (function () { function Calendar(el, renderer, cd, zone) { this.el = el; this.renderer = renderer; this.cd = cd; this.zone = zone; this.dateFormat = 'mm/dd/yy'; this.multipleSeparator = ','; this.rangeSeparator = '-'; this.inline = false; this.showOtherMonths = true; this.icon = 'pi pi-calendar'; this.shortYearCutoff = '+10'; this.hourFormat = '24'; this.stepHour = 1; this.stepMinute = 1; this.stepSecond = 1; this.showSeconds = false; this.showOnFocus = true; this.showWeek = false; this.dataType = 'date'; this.selectionMode = 'single'; this.todayButtonStyleClass = 'ui-button-secondary'; this.clearButtonStyleClass = 'ui-button-secondary'; this.autoZIndex = true; this.baseZIndex = 0; this.keepInvalid = false; this.hideOnDateTimeSelect = true; this.numberOfMonths = 1; this.view = 'date'; this.timeSeparator = ":"; this.showTransitionOptions = '225ms ease-out'; this.hideTransitionOptions = '195ms ease-in'; this.onFocus = new EventEmitter(); this.onBlur = new EventEmitter(); this.onClose = new EventEmitter(); this.onSelect = new EventEmitter(); this.onInput = new EventEmitter(); this.onTodayClick = new EventEmitter(); this.onClearClick = new EventEmitter(); this.onMonthChange = new EventEmitter(); this.onYearChange = new EventEmitter(); this.onClickOutside = new EventEmitter(); this.onShow = new EventEmitter(); this._locale = { firstDayOfWeek: 0, dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], today: 'Today', clear: 'Clear', dateFormat: 'mm/dd/yy', weekHeader: 'Wk' }; this.onModelChange = function () { }; this.onModelTouched = function () { }; this.inputFieldValue = null; this.navigationState = null; this.convertTo24Hour = function (hours, pm) { if (this.hourFormat == '12') { if (hours === 12) { return (pm ? 12 : 0); } else { return (pm ? hours + 12 : hours); } } return hours; }; } Object.defineProperty(Calendar.prototype, "content", { set: function (content) { var _this = this; this.contentViewChild = content; if (this.contentViewChild) { if (this.isMonthNavigate) { Promise.resolve(null).then(function () { return _this.updateFocus(); }); this.isMonthNavigate = false; } else { this.initFocusableCell(); } } }, enumerable: true, configurable: true }); ; Object.defineProperty(Calendar.prototype, "minDate", { get: function () { return this._minDate; }, set: function (date) { this._minDate = date; if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) { this.createMonths(this.currentMonth, this.currentYear); } }, enumerable: true, configurable: true }); Object.defineProperty(Calendar.prototype, "maxDate", { get: function () { return this._maxDate; }, set: function (date) { this._maxDate = date; if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) { this.createMonths(this.currentMonth, this.currentYear); } }, enumerable: true, configurable: true }); Object.defineProperty(Calendar.prototype, "disabledDates", { get: function () { return this._disabledDates; }, set: function (disabledDates) { this._disabledDates = disabledDates; if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) { this.createMonths(this.currentMonth, this.currentYear); } }, enumerable: true, configurable: true }); Object.defineProperty(Calendar.prototype, "disabledDays", { get: function () { return this._disabledDays; }, set: function (disabledDays) { this._disabledDays = disabledDays; if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) { this.createMonths(this.currentMonth, this.currentYear); } }, enumerable: true, configurable: true }); Object.defineProperty(Calendar.prototype, "yearRange", { get: function () { return this._yearRange; }, set: function (yearRange) { this._yearRange = yearRange; if (yearRange) { var years = yearRange.split(':'); var yearStart = parseInt(years[0]); var yearEnd = parseInt(years[1]); this.populateYearOptions(yearStart, yearEnd); } }, enumerable: true, configurable: true }); Object.defineProperty(Calendar.prototype, "showTime", { get: function () { return this._showTime; }, set: function (showTime) { this._showTime = showTime; if (this.currentHour === undefined) { this.initTime(this.value || new Date()); } this.updateInputfield(); }, enumerable: true, configurable: true }); Object.defineProperty(Calendar.prototype, "locale", { get: function () { return this._locale; }, set: function (newLocale) { this._locale = newLocale; if (this.view === 'date') { this.createWeekDays(); this.createMonths(this.currentMonth, this.currentYear); } else if (this.view === 'month') { this.createMonthPickerValues(); } }, enumerable: true, configurable: true }); Calendar.prototype.ngOnInit = function () { var date = this.defaultDate || new Date(); this.currentMonth = date.getMonth(); this.currentYear = date.getFullYear(); if (this.view === 'date') { this.createWeekDays(); this.initTime(date); this.createMonths(this.currentMonth, this.currentYear); this.ticksTo1970 = (((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) + Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000); } else if (this.view === 'month') { this.createMonthPickerValues(); } }; Calendar.prototype.ngAfterContentInit = function () { var _this = this; this.templates.forEach(function (item) { switch (item.getType()) { case 'date': _this.dateTemplate = item.template; break; case 'disabledDate': _this.disabledDateTemplate = item.template; break; default: _this.dateTemplate = item.template; break; } }); }; Calendar.prototype.populateYearOptions = function (start, end) { this.yearOptions = []; for (var i = start; i <= end; i++) { this.yearOptions.push(i); } }; Calendar.prototype.createWeekDays = function () { this.weekDays = []; var dayIndex = this.locale.firstDayOfWeek; for (var i = 0; i < 7; i++) { this.weekDays.push(this.locale.dayNamesMin[dayIndex]); dayIndex = (dayIndex == 6) ? 0 : ++dayIndex; } }; Calendar.prototype.createMonthPickerValues = function () { this.monthPickerValues = []; for (var i = 0; i <= 11; i++) { this.monthPickerValues.push(this.locale.monthNamesShort[i]); } }; Calendar.prototype.createMonths = function (month, year) { this.months = this.months = []; for (var i = 0; i < this.numberOfMonths; i++) { var m = month + i; var y = year; if (m > 11) { m = m % 11 - 1; y = year + 1; } this.months.push(this.createMonth(m, y)); } }; Calendar.prototype.getWeekNumber = function (date) { var checkDate = new Date(date.getTime()); checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7)); var time = checkDate.getTime(); checkDate.setMonth(0); checkDate.setDate(1); return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1; }; Calendar.prototype.createMonth = function (month, year) { var dates = []; var firstDay = this.getFirstDayOfMonthIndex(month, year); var daysLength = this.getDaysCountInMonth(month, year); var prevMonthDaysLength = this.getDaysCountInPrevMonth(month, year); var dayNo = 1; var today = new Date(); var weekNumbers = []; var monthRows = Math.ceil((daysLength + firstDay) / 7); for (var i = 0; i < monthRows; i++) { var week = []; if (i == 0) { for (var j = (prevMonthDaysLength - firstDay + 1); j <= prevMonthDaysLength; j++) { var prev = this.getPreviousMonthAndYear(month, year); week.push({ day: j, month: prev.month, year: prev.year, otherMonth: true, today: this.isToday(today, j, prev.month, prev.year), selectable: this.isSelectable(j, prev.month, prev.year, true) }); } var remainingDaysLength = 7 - week.length; for (var j = 0; j < remainingDaysLength; j++) { week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year), selectable: this.isSelectable(dayNo, month, year, false) }); dayNo++; } } else { for (var j = 0; j < 7; j++) { if (dayNo > daysLength) { var next = this.getNextMonthAndYear(month, year); week.push({ day: dayNo - daysLength, month: next.month, year: next.year, otherMonth: true, today: this.isToday(today, dayNo - daysLength, next.month, next.year), selectable: this.isSelectable((dayNo - daysLength), next.month, next.year, true) }); } else { week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year), selectable: this.isSelectable(dayNo, month, year, false) }); } dayNo++; } } if (this.showWeek) { weekNumbers.push(this.getWeekNumber(new Date(week[0].year, week[0].month, week[0].day))); } dates.push(week); } return { month: month, year: year, dates: dates, weekNumbers: weekNumbers }; }; Calendar.prototype.initTime = function (date) { this.pm = date.getHours() > 11; if (this.showTime) { this.currentMinute = date.getMinutes(); this.currentSecond = date.getSeconds(); this.setCurrentHourPM(date.getHours()); } else if (this.timeOnly) { this.currentMinute = 0; this.currentHour = 0; this.currentSecond = 0; } }; Calendar.prototype.navBackward = function (event) { var _this = this; event.stopPropagation(); if (this.disabled) { event.preventDefault(); return; } this.isMonthNavigate = true; if (this.view === 'month') { this.decrementYear(); setTimeout(function () { _this.updateFocus(); }, 1); } else { if (this.currentMonth === 0) { this.currentMonth = 11; this.decrementYear(); } else { this.currentMonth--; } this.onMonthChange.emit({ month: this.currentMonth + 1, year: this.currentYear }); this.createMonths(this.currentMonth, this.currentYear); } }; Calendar.prototype.navForward = function (event) { var _this = this; event.stopPropagation(); if (this.disabled) { event.preventDefault(); return; } this.isMonthNavigate = true; if (this.view === 'month') { this.incrementYear(); setTimeout(function () { _this.updateFocus(); }, 1); } else { if (this.currentMonth === 11) { this.currentMonth = 0; this.incrementYear(); } else { this.currentMonth++; } this.onMonthChange.emit({ month: this.currentMonth + 1, year: this.currentYear }); this.createMonths(this.currentMonth, this.currentYear); } }; Calendar.prototype.decrementYear = function () { this.currentYear--; if (this.yearNavigator && this.currentYear < this.yearOptions[0]) { var difference = this.yearOptions[this.yearOptions.length - 1] - this.yearOptions[0]; this.populateYearOptions(this.yearOptions[0] - difference, this.yearOptions[this.yearOptions.length - 1] - difference); } }; Calendar.prototype.incrementYear = function () { this.currentYear++; if (this.yearNavigator && this.currentYear > this.yearOptions[this.yearOptions.length - 1]) { var difference = this.yearOptions[this.yearOptions.length - 1] - this.yearOptions[0]; this.populateYearOptions(this.yearOptions[0] + difference, this.yearOptions[this.yearOptions.length - 1] + difference); } }; Calendar.prototype.onDateSelect = function (event, dateMeta) { var _this = this; if (this.disabled || !dateMeta.selectable) { event.preventDefault(); return; } if (this.isMultipleSelection() && this.isSelected(dateMeta)) { this.value = this.value.filter(function (date, i) { return !_this.isDateEquals(date, dateMeta); }); this.updateModel(this.value); } else { if (this.shouldSelectDate(dateMeta)) { this.selectDate(dateMeta); } } if (this.isSingleSelection() && this.hideOnDateTimeSelect) { setTimeout(function () { event.preventDefault(); _this.hideOverlay(); if (_this.mask) { _this.disableModality(); } _this.cd.markForCheck(); }, 150); } this.updateInputfield(); event.preventDefault(); }; Calendar.prototype.shouldSelectDate = function (dateMeta) { if (this.isMultipleSelection()) return this.maxDateCount != null ? this.maxDateCount > (this.value ? this.value.length : 0) : true; else return true; }; Calendar.prototype.onMonthSelect = function (event, index) { if (!DomHandler.hasClass(event.target, 'ui-state-disabled')) { this.onDateSelect(event, { year: this.currentYear, month: index, day: 1, selectable: true }); } }; Calendar.prototype.updateInputfield = function () { var formattedValue = ''; if (this.value) { if (this.isSingleSelection()) { formattedValue = this.formatDateTime(this.value); } else if (this.isMultipleSelection()) { for (var i = 0; i < this.value.length; i++) { var dateAsString = this.formatDateTime(this.value[i]); formattedValue += dateAsString; if (i !== (this.value.length - 1)) { formattedValue += this.multipleSeparator + ' '; } } } else if (this.isRangeSelection()) { if (this.value && this.value.length) { var startDate = this.value[0]; var endDate = this.value[1]; formattedValue = this.formatDateTime(startDate); if (endDate) { formattedValue += ' ' + this.rangeSeparator + ' ' + this.formatDateTime(endDate); } } } } this.inputFieldValue = formattedValue; this.updateFilledState(); if (this.inputfieldViewChild && this.inputfieldViewChild.nativeElement) { this.inputfieldViewChild.nativeElement.value = this.inputFieldValue; } }; Calendar.prototype.formatDateTime = function (date) { var formattedValue = null; if (date) { if (this.timeOnly) { formattedValue = this.formatTime(date); } else { formattedValue = this.formatDate(date, this.getDateFormat()); if (this.showTime) { formattedValue += ' ' + this.formatTime(date); } } } return formattedValue; }; Calendar.prototype.setCurrentHourPM = function (hours) { if (this.hourFormat == '12') { this.pm = hours > 11; if (hours >= 12) { this.currentHour = (hours == 12) ? 12 : hours - 12; } else { this.currentHour = (hours == 0) ? 12 : hours; } } else { this.currentHour = hours; } }; Calendar.prototype.selectDate = function (dateMeta) { var date = new Date(dateMeta.year, dateMeta.month, dateMeta.day); if (this.showTime) { if (this.hourFormat == '12') { if (this.currentHour === 12) date.setHours(this.pm ? 12 : 0); else date.setHours(this.pm ? this.currentHour + 12 : this.currentHour); } else { date.setHours(this.currentHour); } date.setMinutes(this.currentMinute); date.setSeconds(this.currentSecond); } if (this.minDate && this.minDate > date) { date = this.minDate; this.setCurrentHourPM(date.getHours()); this.currentMinute = date.getMinutes(); this.currentSecond = date.getSeconds(); } if (this.maxDate && this.maxDate < date) { date = this.maxDate; this.setCurrentHourPM(date.getHours()); this.currentMinute = date.getMinutes(); this.currentSecond = date.getSeconds(); } if (this.isSingleSelection()) { this.updateModel(date); } else if (this.isMultipleSelection()) { this.updateModel(this.value ? __spread(this.value, [date]) : [date]); } else if (this.isRangeSelection()) { if (this.value && this.value.length) { var startDate = this.value[0]; var endDate = this.value[1]; if (!endDate && date.getTime() >= startDate.getTime()) { endDate = date; } else { startDate = date; endDate = null; } this.updateModel([startDate, endDate]); } else { this.updateModel([date, null]); } } this.onSelect.emit(date); }; Calendar.prototype.updateModel = function (value) { var _this = this; this.value = value; if (this.dataType == 'date') { this.onModelChange(this.value); } else if (this.dataType == 'string') { if (this.isSingleSelection()) { this.onModelChange(this.formatDateTime(this.value)); } else { var stringArrValue = null; if (this.value) { stringArrValue = this.value.map(function (date) { return _this.formatDateTime(date); }); } this.onModelChange(stringArrValue); } } }; Calendar.prototype.getFirstDayOfMonthIndex = function (month, year) { var day = new Date(); day.setDate(1); day.setMonth(month); day.setFullYear(year); var dayIndex = day.getDay() + this.getSundayIndex(); return dayIndex >= 7 ? dayIndex - 7 : dayIndex; }; Calendar.prototype.getDaysCountInMonth = function (month, year) { return 32 - this.daylightSavingAdjust(new Date(year, month, 32)).getDate(); }; Calendar.prototype.getDaysCountInPrevMonth = function (month, year) { var prev = this.getPreviousMonthAndYear(month, year); return this.getDaysCountInMonth(prev.month, prev.year); }; Calendar.prototype.getPreviousMonthAndYear = function (month, year) { var m, y; if (month === 0) { m = 11; y = year - 1; } else { m = month - 1; y = year; } return { 'month': m, 'year': y }; }; Calendar.prototype.getNextMonthAndYear = function (month, year) { var m, y; if (month === 11) { m = 0; y = year + 1; } else { m = month + 1; y = year; } return { 'month': m, 'year': y }; }; Calendar.prototype.getSundayIndex = function () { return this.locale.firstDayOfWeek > 0 ? 7 - this.locale.firstDayOfWeek : 0; }; Calendar.prototype.isSelected = function (dateMeta) { var e_1, _a; if (this.value) { if (this.isSingleSelection()) { return this.isDateEquals(this.value, dateMeta); } else if (this.isMultipleSelection()) { var selected = false; try { for (var _b = __values(this.value), _c = _b.next(); !_c.done; _c = _b.next()) { var date = _c.value; selected = this.isDateEquals(date, dateMeta); if (selected) { break; } } } catch (e_1_1) { e_1 = { error: e_1_1 }; } finally { try { if (_c && !_c.done && (_a = _b.return)) _a.call(_b); } finally { if (e_1) throw e_1.error; } } return selected; } else if (this.isRangeSelection()) { if (this.value[1]) return this.isDateEquals(this.value[0], dateMeta) || this.isDateEquals(this.value[1], dateMeta) || this.isDateBetween(this.value[0], this.value[1], dateMeta); else return this.isDateEquals(this.value[0], dateMeta); } } else { return false; } }; Calendar.prototype.isMonthSelected = function (month) { var day = this.value ? (Array.isArray(this.value) ? this.value[0].getDate() : this.value.getDate()) : 1; return this.isSelected({ year: this.currentYear, month: month, day: day, selectable: true }); }; Calendar.prototype.isDateEquals = function (value, dateMeta) { if (value) return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year; else return false; }; Calendar.prototype.isDateBetween = function (start, end, dateMeta) { var between = false; if (start && end) { var date = new Date(dateMeta.year, dateMeta.month, dateMeta.day); return start.getTime() <= date.getTime() && end.getTime() >= date.getTime(); } return between; }; Calendar.prototype.isSingleSelection = function () { return this.selectionMode === 'single'; }; Calendar.prototype.isRangeSelection = function () { return this.selectionMode === 'range'; }; Calendar.prototype.isMultipleSelection = function () { return this.selectionMode === 'multiple'; }; Calendar.prototype.isToday = function (today, day, month, year) { return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year; }; Calendar.prototype.isSelectable = function (day, month, year, otherMonth) { var validMin = true; var validMax = true; var validDate = true; var validDay = true; if (otherMonth && !this.selectOtherMonths) { return false; } if (this.minDate) { if (this.minDate.getFullYear() > year) { validMin = false; } else if (this.minDate.getFullYear() === year) { if (this.minDate.getMonth() > month) { validMin = false; } else if (this.minDate.getMonth() === month) { if (this.minDate.getDate() > day) { validMin = false; } } } } if (this.maxDate) { if (this.maxDate.getFullYear() < year) { validMax = false; } else if (this.maxDate.getFullYear() === year) { if (this.maxDate.getMonth() < month) { validMax = false; } else if (this.maxDate.getMonth() === month) { if (this.maxDate.getDate() < day) { validMax = false; } } } } if (this.disabledDates) { validDate = !this.isDateDisabled(day, month, year); } if (this.disabledDays) { validDay = !this.isDayDisabled(day, month, year); } return validMin && validMax && validDate && validDay; }; Calendar.prototype.isDateDisabled = function (day, month, year) { var e_2, _a; if (this.disabledDates) { try { for (var _b = __values(this.disabledDates), _c = _b.next(); !_c.done; _c = _b.next()) { var disabledDate = _c.value; if (disabledDate.getFullYear() === year && disabledDate.getMonth() === month && disabledDate.getDate() === day) { return true; } } } catch (e_2_1) { e_2 = { error: e_2_1 }; } finally { try { if (_c && !_c.done && (_a = _b.return)) _a.call(_b); } finally { if (e_2) throw e_2.error; } } } return false; }; Calendar.prototype.isDayDisabled = function (day, month, year) { if (this.disabledDays) { var weekday = new Date(year, month, day); var weekdayNumber = weekday.getDay(); return this.disabledDays.indexOf(weekdayNumber) !== -1; } return false; }; Calendar.prototype.onInputFocus = function (event) { this.focus = true; if (this.showOnFocus) { this.showOverlay(); } this.onFocus.emit(event); }; Calendar.prototype.onInputClick = function (event) { if (this.overlay && this.autoZIndex) { this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex)); } if (this.showOnFocus && !this.overlayVisible) { this.showOverlay(); } }; Calendar.prototype.onInputBlur = function (event) { this.focus = false; this.onBlur.emit(event); if (!this.keepInvalid) { this.updateInputfield(); } this.onModelTouched(); }; Calendar.prototype.onButtonClick = function (event, inputfield) { if (!this.overlayVisible) { inputfield.focus(); this.showOverlay(); } else { this.hideOverlay(); } }; Calendar.prototype.onPrevButtonClick = function (event) { this.navigationState = { backward: true, button: true }; this.navBackward(event); }; Calendar.prototype.onNextButtonClick = function (event) { this.navigationState = { backward: false, button: true }; this.navForward(event); }; Calendar.prototype.onContainerButtonKeydown = function (event) { switch (event.which) { //tab case 9: if (!this.inline) { this.trapFocus(event); } break; //escape case 27: this.overlayVisible = false; event.preventDefault(); break; default: //Noop break; } }; Calendar.prototype.onInputKeydown = function (event) { this.isKeydown = true; if (event.keyCode === 9 && this.contentViewChild) { this.trapFocus(event); } else if (event.keyCode === 27) { if (this.overlayVisible) { this.overlayVisible = false; event.preventDefault(); } } }; Calendar.prototype.onDateCellKeydown = function (event, date, groupIndex) { var cellContent = event.currentTarget; var cell = cellContent.parentElement; switch (event.which) { //down arrow case 40: { cellContent.tabIndex = '-1'; var cellIndex = DomHandler.index(cell); var nextRow = cell.parentElement.nextElementSibling; if (nextRow) { var focusCell = nextRow.children[cellIndex].children[0]; if (DomHandler.hasClass(focusCell, 'ui-state-disabled')) { this.navigationState = { backward: false }; this.navForward(event); } else { nextRow.children[cellIndex].children[0].tabIndex = '0'; nextRow.children[cellIndex].children[0].focus(); } } else { this.navigationState = { backward: false }; this.navForward(event); } event.preventDefault(); break; } //up arrow case 38: { cellContent.tabIndex = '-1'; var cellIndex = DomHandler.index(cell); var prevRow = cell.parentElement.previousElementSibling; if (prevRow) { var focusCell = prevRow.children[cellIndex].children[0]; if (DomHandler.hasClass(focusCell, 'ui-state-disabled')) { this.navigationState = { backward: true }; this.navBackward(event); } else { focusCell.tabIndex = '0'; focusCell.focus(); } } else { this.navigationState = { backward: true }; this.navBackward(event); } event.preventDefault(); break; } //left arrow case 37: { cellContent.tabIndex = '-1'; var prevCell = cell.previousElementSibling; if (prevCell) { var focusCell = prevCell.children[0]; if (DomHandler.hasClass(focusCell, 'ui-state-disabled') || DomHandler.hasClass(focusCell.parentElement, 'ui-datepicker-weeknumber')) { this.navigateToMonth(true, groupIndex); } else { focusCell.tabIndex = '0'; focusCell.focus(); } } else { this.navigateToMonth(true, groupIndex); } event.preventDefault(); break; } //right arrow case 39: { cellContent.tabIndex = '-1'; var nextCell = cell.nextElementSibling; if (nextCell) { var focusCell = nextCell.children[0]; if (DomHandler.hasClass(focusCell, 'ui-state-disabled')) { this.navigateToMonth(false, groupIndex); } else { focusCell.tabIndex = '0'; focusCell.focus(); } } else { this.navigateToMonth(false, groupIndex); } event.preventDefault(); break; } //enter case 13: { this.onDateSelect(event, date); event.preventDefault(); break; } //escape case 27: { this.overlayVisible = false; event.preventDefault(); break; } //tab case 9: { if (!this.inline) { this.trapFocus(event); } break; } default: //no op break; } }; Calendar.prototype.onMonthCellKeydown = function (event, index) { var cell = event.currentTarget; switch (event.which) { //arrows case 38: case 40: { cell.tabIndex = '-1'; var cells = cell.parentElement.children; var cellIndex = DomHandler.index(cell); var nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex - 3]; if (nextCell) { nextCell.tabIndex = '0'; nextCell.focus(); } event.preventDefault(); break; } //left arrow case 37: { cell.tabIndex = '-1'; var prevCell = cell.previousElementSibling; if (prevCell) { prevCell.tabIndex = '0'; prevCell.focus(); } event.preventDefault(); break; } //right arrow case 39: { cell.tabIndex = '-1'; var nextCell = cell.nextElementSibling; if (nextCell) { nextCell.tabIndex = '0'; nextCell.focus(); } event.preventDefault(); break; } //enter case 13: { this.onMonthSelect(event, index); event.preventDefault(); break; } //escape case 27: { this.overlayVisible = false; event.preventDefault(); break; } //tab case 9: { if (!this.inline) { this.trapFocus(event); } break; } default: //no op break; } }; Calendar.prototype.navigateToMonth = function (prev, groupIndex) { if (prev) { if (this.numberOfMonths === 1 || (groupIndex === 0)) { this.navigationState = { backward: true }; this.navBackward(event); } else { var prevMonthContainer = this.contentViewChild.nativeElement.children[groupIndex - 1]; var cells = DomHandler.find(prevMonthContainer, '.ui-datepicker-calendar td a'); var focusCell = cells[cells.length - 1]; focusCell.tabIndex = '0'; focusCell.focus(); } } else { if (this.numberOfMonths === 1 || (groupIndex === this.numberOfMonths - 1)) { this.navigationState = { backward: false }; this.navForward(event); } else { var nextMonthContainer = this.contentViewChild.nativeElement.children[groupIndex + 1]; var focusCell = DomHandler.findSingle(nextMonthContainer, '.ui-datepicker-calendar td a'); focusCell.tabIndex = '0'; focusCell.focus(); } } }; Calendar.prototype.updateFocus = function () { var cell; if (this.navigationState) { if (this.navigationState.button) { this.initFocusableCell(); if (this.navigationState.backward) DomHandler.findSingle(this.contentViewChild.nativeElement, '.ui-datepicker-prev').focus(); else DomHandler.findSingle(this.contentViewChild.nativeElement, '.ui-datepicker-next').focus(); } else { if (this.navigationState.backward) { var cells = DomHandler.find(this.contentViewChild.nativeElement, '.ui-datepicker-calendar td a'); cell = cells[cells.length - 1]; } else { cell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.ui-datepicker-calendar td a'); } if (cell) { cell.tabIndex = '0'; cell.focus(); } } this.navigationState = null; } else { this.initFocusableCell(); } }; Calendar.prototype.initFocusableCell = function () { var cell; if (this.view === 'month') { var cells = DomHandler.find(this.contentViewChild.nativeElement, '.ui-monthpicker .ui-monthpicker-month:not(.ui-state-disabled)'); var selectedCell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.ui-monthpicker .ui-monthpicker-month.ui-state-highlight'); cells.forEach(function (cell) { return cell.tabIndex = -1; }); cell = selectedCell || cells[0]; if (cells.length === 0) { var disabledCells = DomHandler.find(this.contentViewChild.nativeElement, '.ui-monthpicker .ui-monthpicker-month.ui-state-disabled[tabindex = "0"]'); disabledCells.forEach(function (cell) { return cell.tabIndex = -1; }); } } else { cell = DomHandler.findSingle(this.contentViewChild.nativeElement, 'a.ui-state-active'); if (!cell) { var todayCell = DomHandler.findSingle(this.contentViewChild.nativeElement, 'td.ui-datepicker-today a:not(.ui-state-disabled)'); if (todayCell) cell = todayCell; else cell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.ui-datepicker-calendar td a'); } } if (cell) { cell.tabIndex = '0'; } }; Calendar.prototype.trapFocus = function (event) { event.preventDefault(); var focusableElements = DomHandler.getFocusableElements(this.contentViewChild.nativeElement); if (focusableElements && focusableElements.length > 0) { if (!document.activeElement) { focusableElements[0].focus(); } else { var focusedIndex = focusableElements.indexOf(document.activeElement); if (event.shiftKey) { if (focusedIndex == -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus(); else focusableElements[focusedIndex - 1].focus(); } else { if (focusedIndex == -1 || focusedIndex === (focusableElements.length - 1)) focusableElements[0].focus(); else focusableElements[focusedIndex + 1].focus(); } } } }; Calendar.prototype.onMonthDropdownChange = function (m) { this.currentMonth = parseInt(m); this.onMonthChange.emit({ month: this.currentMonth + 1, year: this.currentYear }); this.createMonths(this.currentMonth, this.currentYear); }; Calendar.prototype.onYearDropdownChange = function (y) { this.currentYear = parseInt(y); this.onYearChange.emit({ month: this.currentMonth + 1, year: this.currentYear }); this.createMonths(this.currentMonth, this.currentYear); }; Calendar.prototype.validateTime = function (hour, minute, second, pm) { var value = this.value; var convertedHour = this.convertTo24Hour(hour, pm); if (this.isRangeSelection()) { value = this.value[1] || this.value[0]; } if (this.isMultipleSelection()) { value = this.value[this.value.length - 1]; } var valueDateString = value ? value.toDateString() : null; if (this.minDate && valueDateString && this.minDate.toDateString() === valueDateString) { if (this.minDate.getHours() > convertedHour) { return false; } if (this.minDate.getHours() === convertedHour) { if (this.minDate.getMinutes() > minute) { return false; } if (this.minDate.getMinutes() === minute) { if (this.minDate.getSeconds() > second) { return false; } } } } if (this.maxDate && valueDateString && this.maxDate.toDateString() === valueDateString) { if (this.maxDate.getHours() < convertedHour) { return false; } if (this.maxDate.getHours() === convertedHour) { if (this.maxDate.getMinutes() < minute) { return false; } if (this.maxDate.getMinutes() === minute) { if (this.maxDate.getSeconds() < second) { return false; } } } } return true; }; Calendar.prototype.incrementHour = function (event) { var prevHour = this.currentHour; var newHour = this.currentHour + this.stepHour; var newPM = this.pm; if (this.hourFormat == '24') newHour = (newHour >= 24) ? (newHour - 24) : newHour; else if (this.hourFormat == '12') { // Before the AM/PM break, now after if (prevHour < 12 && newHour > 11) { newPM = !this.pm; } newHour = (newHour >= 13) ? (newHour - 12) : newHour; } if (this.validateTime(newHour, this.currentMinute, this.currentSecond, newPM)) { this.currentHour = newHour; this.pm = newPM; } event.preventDefault(); }; Calendar.prototype.onTimePickerElementMouseDown = function (event, type, direction) { if (!this.disabled) { this.repeat(event, null, type, direction); event.preventDefault(); } }; Calendar.prototype.onTimePickerElementMouseUp = function (event) { if (!this.disabled) { this.clearTimePickerTimer(); this.updateTime(); } }; Calendar.prototype.onTimePickerElementMouseOut = function (event) { if (!this.disabled) { this.clearTimePickerTimer(); this.updateTime(); } }; Calendar.prototype.repeat = function (event, interval, type, direction) { var _this = this; var i = interval || 500; this.clearTimePickerTimer(); this.timePickerTimer = setTimeout(function () { _this.repeat(event, 100, type, direction); }, i); switch (type) { case 0: if (direction === 1) this.incrementHour(event); else this.decrementHour(event); break; case 1: if (direction === 1) this.incrementMinute(event); else this.decrementMinute(event); break; case 2: if (direction === 1) this.incrementSecond(event); else this.decrementSecond(event); break; } this.updateInputfield(); }; Calendar.prototype.clearTimePickerTimer = function () { if (this.timePickerTimer) { clearTimeout(this.timePickerTimer); } }; Calendar.prototype.decrementHour = function (event) { var newHour = this.currentHour - this.stepHour; var newPM = this.pm; if (this.hourFormat == '24') newHour = (newHour < 0) ? (24 + newHour) : newHour; else if (this.hourFormat == '12') { // If we were at noon/midnight, then switch if (this.currentHour === 12) { newPM = !this.pm; } newHour = (newHour <= 0) ? (12 + newHour) : newHour; } if (this.validateTime(newHour, this.currentMinute, this.currentSecond, newPM)) { this.currentHour = newHour; this.pm = newPM; } event.preventDefault(); }; Calendar.prototype.incrementMinute = function (event) { var newMinute = this.currentMinute + this.stepMinute; newMinute = (newMinute > 59) ? newMinute - 60 : newMinute; if (this.validateTime(this.currentHour, newMinute, this.currentSecond, this.pm))