primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [ || 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;
};
import { NgModule, Component, ElementRef, OnDestroy, OnInit, Input, Output, EventEmitter, forwardRef, Renderer2, ViewChild, ChangeDetectorRef, TemplateRef, ContentChildren, QueryList, NgZone } 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 { SharedModule, PrimeTemplate } from 'primeng/api';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
export const CALENDAR_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => Calendar),
multi: true
};
let Calendar = class Calendar {
constructor(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 = false;
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 = () => { };
this.onModelTouched = () => { };
this.inputFieldValue = null;
this.navigationState = null;
}
set content(content) {
this.contentViewChild = content;
if (this.contentViewChild) {
if (this.isMonthNavigate) {
Promise.resolve(null).then(() => this.updateFocus());
this.isMonthNavigate = false;
}
else {
this.initFocusableCell();
}
}
}
;
get minDate() {
return this._minDate;
}
set minDate(date) {
this._minDate = date;
if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
this.createMonths(this.currentMonth, this.currentYear);
}
}
get maxDate() {
return this._maxDate;
}
set maxDate(date) {
this._maxDate = date;
if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
this.createMonths(this.currentMonth, this.currentYear);
}
}
get disabledDates() {
return this._disabledDates;
}
set disabledDates(disabledDates) {
this._disabledDates = disabledDates;
if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
this.createMonths(this.currentMonth, this.currentYear);
}
}
get disabledDays() {
return this._disabledDays;
}
set disabledDays(disabledDays) {
this._disabledDays = disabledDays;
if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
this.createMonths(this.currentMonth, this.currentYear);
}
}
get yearRange() {
return this._yearRange;
}
set yearRange(yearRange) {
this._yearRange = yearRange;
if (yearRange) {
const years = yearRange.split(':');
const yearStart = parseInt(years[0]);
const yearEnd = parseInt(years[1]);
this.populateYearOptions(yearStart, yearEnd);
}
}
get showTime() {
return this._showTime;
}
set showTime(showTime) {
this._showTime = showTime;
if (this.currentHour === undefined) {
this.initTime(this.value || new Date());
}
this.updateInputfield();
}
get locale() {
return this._locale;
}
set locale(newLocale) {
this._locale = newLocale;
if (this.view === 'date') {
this.createWeekDays();
this.createMonths(this.currentMonth, this.currentYear);
}
else if (this.view === 'month') {
this.createMonthPickerValues();
}
}
ngOnInit() {
const 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();
}
}
ngAfterContentInit() {
this.templates.forEach((item) => {
switch (item.getType()) {
case 'date':
this.dateTemplate = item.template;
break;
case 'disabledDate':
this.disabledDateTemplate = item.template;
break;
default:
this.dateTemplate = item.template;
break;
}
});
}
populateYearOptions(start, end) {
this.yearOptions = [];
for (let i = start; i <= end; i++) {
this.yearOptions.push(i);
}
}
createWeekDays() {
this.weekDays = [];
let dayIndex = this.locale.firstDayOfWeek;
for (let i = 0; i < 7; i++) {
this.weekDays.push(this.locale.dayNamesMin[dayIndex]);
dayIndex = (dayIndex == 6) ? 0 : ++dayIndex;
}
}
createMonthPickerValues() {
this.monthPickerValues = [];
for (let i = 0; i <= 11; i++) {
this.monthPickerValues.push(this.locale.monthNamesShort[i]);
}
}
createMonths(month, year) {
this.months = this.months = [];
for (let i = 0; i < this.numberOfMonths; i++) {
let m = month + i;
let y = year;
if (m > 11) {
m = m % 11 - 1;
y = year + 1;
}
this.months.push(this.createMonth(m, y));
}
}
getWeekNumber(date) {
let checkDate = new Date(date.getTime());
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
let time = checkDate.getTime();
checkDate.setMonth(0);
checkDate.setDate(1);
return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
}
createMonth(month, year) {
let dates = [];
let firstDay = this.getFirstDayOfMonthIndex(month, year);
let daysLength = this.getDaysCountInMonth(month, year);
let prevMonthDaysLength = this.getDaysCountInPrevMonth(month, year);
let dayNo = 1;
let today = new Date();
let weekNumbers = [];
let monthRows = Math.ceil((daysLength + firstDay) / 7);
for (let i = 0; i < monthRows; i++) {
let week = [];
if (i == 0) {
for (let j = (prevMonthDaysLength - firstDay + 1); j <= prevMonthDaysLength; j++) {
let 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) });
}
let remainingDaysLength = 7 - week.length;
for (let 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 (let j = 0; j < 7; j++) {
if (dayNo > daysLength) {
let 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
};
}
initTime(date) {
this.pm = date.getHours() > 11;
if (this.showTime) {
this.currentMinute = date.getMinutes();
this.currentSecond = date.getSeconds();
if (this.hourFormat == '12')
this.currentHour = date.getHours() == 0 ? 12 : date.getHours() % 12;
else
this.currentHour = date.getHours();
}
else if (this.timeOnly) {
this.currentMinute = 0;
this.currentHour = 0;
this.currentSecond = 0;
}
}
navBackward(event) {
event.stopPropagation();
if (this.disabled) {
event.preventDefault();
return;
}
this.isMonthNavigate = true;
if (this.view === 'month') {
this.decrementYear();
setTimeout(() => {
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);
}
}
navForward(event) {
event.stopPropagation();
if (this.disabled) {
event.preventDefault();
return;
}
this.isMonthNavigate = true;
if (this.view === 'month') {
this.incrementYear();
setTimeout(() => {
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);
}
}
decrementYear() {
this.currentYear--;
if (this.yearNavigator && this.currentYear < this.yearOptions[0]) {
let difference = this.yearOptions[this.yearOptions.length - 1] - this.yearOptions[0];
this.populateYearOptions(this.yearOptions[0] - difference, this.yearOptions[this.yearOptions.length - 1] - difference);
}
}
incrementYear() {
this.currentYear++;
if (this.yearNavigator && this.currentYear > this.yearOptions[this.yearOptions.length - 1]) {
let difference = this.yearOptions[this.yearOptions.length - 1] - this.yearOptions[0];
this.populateYearOptions(this.yearOptions[0] + difference, this.yearOptions[this.yearOptions.length - 1] + difference);
}
}
onDateSelect(event, dateMeta) {
if (this.disabled || !dateMeta.selectable) {
event.preventDefault();
return;
}
if (this.isMultipleSelection() && this.isSelected(dateMeta)) {
this.value = this.value.filter((date, i) => {
return !this.isDateEquals(date, dateMeta);
});
this.updateModel(this.value);
}
else {
if (this.shouldSelectDate(dateMeta)) {
if (dateMeta.otherMonth) {
this.currentMonth = dateMeta.month;
this.currentYear = dateMeta.year;
this.createMonths(this.currentMonth, this.currentYear);
this.selectDate(dateMeta);
}
else {
this.selectDate(dateMeta);
}
}
}
if (this.isSingleSelection() && (!this.showTime || this.hideOnDateTimeSelect)) {
setTimeout(() => {
event.preventDefault();
this.hideOverlay();
if (this.mask) {
this.disableModality();
}
this.cd.markForCheck();
}, 150);
}
this.updateInputfield();
event.preventDefault();
}
shouldSelectDate(dateMeta) {
if (this.isMultipleSelection())
return this.maxDateCount != null ? this.maxDateCount > (this.value ? this.value.length : 0) : true;
else
return true;
}
onMonthSelect(event, index) {
if (!DomHandler.hasClass(event.target, 'ui-state-disabled')) {
this.onDateSelect(event, { year: this.currentYear, month: index, day: 1, selectable: true });
}
}
updateInputfield() {
let formattedValue = '';
if (this.value) {
if (this.isSingleSelection()) {
formattedValue = this.formatDateTime(this.value);
}
else if (this.isMultipleSelection()) {
for (let i = 0; i < this.value.length; i++) {
let 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) {
let startDate = this.value[0];
let 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;
}
}
formatDateTime(date) {
let 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;
}
selectDate(dateMeta) {
let 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.currentHour = date.getHours();
this.currentMinute = date.getMinutes();
this.currentSecond = date.getSeconds();
}
if (this.maxDate && this.maxDate < date) {
date = this.maxDate;
this.currentHour = date.getHours();
this.currentMinute = date.getMinutes();
this.currentSecond = date.getSeconds();
}
if (this.isSingleSelection()) {
this.updateModel(date);
}
else if (this.isMultipleSelection()) {
this.updateModel(this.value ? [...this.value, date] : [date]);
}
else if (this.isRangeSelection()) {
if (this.value && this.value.length) {
let startDate = this.value[0];
let 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);
}
updateModel(value) {
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 {
let stringArrValue = null;
if (this.value) {
stringArrValue = this.value.map(date => this.formatDateTime(date));
}
this.onModelChange(stringArrValue);
}
}
}
getFirstDayOfMonthIndex(month, year) {
let day = new Date();
day.setDate(1);
day.setMonth(month);
day.setFullYear(year);
let dayIndex = day.getDay() + this.getSundayIndex();
return dayIndex >= 7 ? dayIndex - 7 : dayIndex;
}
getDaysCountInMonth(month, year) {
return 32 - this.daylightSavingAdjust(new Date(year, month, 32)).getDate();
}
getDaysCountInPrevMonth(month, year) {
let prev = this.getPreviousMonthAndYear(month, year);
return this.getDaysCountInMonth(prev.month, prev.year);
}
getPreviousMonthAndYear(month, year) {
let m, y;
if (month === 0) {
m = 11;
y = year - 1;
}
else {
m = month - 1;
y = year;
}
return { 'month': m, 'year': y };
}
getNextMonthAndYear(month, year) {
let m, y;
if (month === 11) {
m = 0;
y = year + 1;
}
else {
m = month + 1;
y = year;
}
return { 'month': m, 'year': y };
}
getSundayIndex() {
return this.locale.firstDayOfWeek > 0 ? 7 - this.locale.firstDayOfWeek : 0;
}
isSelected(dateMeta) {
if (this.value) {
if (this.isSingleSelection()) {
return this.isDateEquals(this.value, dateMeta);
}
else if (this.isMultipleSelection()) {
let selected = false;
for (let date of this.value) {
selected = this.isDateEquals(date, dateMeta);
if (selected) {
break;
}
}
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;
}
}
isMonthSelected(month) {
let 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 });
}
isDateEquals(value, dateMeta) {
if (value)
return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
else
return false;
}
isDateBetween(start, end, dateMeta) {
let between = false;
if (start && end) {
let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
}
return between;
}
isSingleSelection() {
return this.selectionMode === 'single';
}
isRangeSelection() {
return this.selectionMode === 'range';
}
isMultipleSelection() {
return this.selectionMode === 'multiple';
}
isToday(today, day, month, year) {
return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
}
isSelectable(day, month, year, otherMonth) {
let validMin = true;
let validMax = true;
let validDate = true;
let 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;
}
isDateDisabled(day, month, year) {
if (this.disabledDates) {
for (let disabledDate of this.disabledDates) {
if (disabledDate.getFullYear() === year && disabledDate.getMonth() === month && disabledDate.getDate() === day) {
return true;
}
}
}
return false;
}
isDayDisabled(day, month, year) {
if (this.disabledDays) {
let weekday = new Date(year, month, day);
let weekdayNumber = weekday.getDay();
return this.disabledDays.indexOf(weekdayNumber) !== -1;
}
return false;
}
onInputFocus(event) {
this.focus = true;
if (this.showOnFocus) {
this.showOverlay();
}
this.onFocus.emit(event);
}
onInputClick(event) {
if (this.overlay && this.autoZIndex) {
this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
}
if (this.showOnFocus && !this.overlayVisible) {
this.showOverlay();
}
}
onInputBlur(event) {
this.focus = false;
this.onBlur.emit(event);
if (!this.keepInvalid) {
this.updateInputfield();
}
this.onModelTouched();
}
onButtonClick(event, inputfield) {
if (!this.overlayVisible) {
inputfield.focus();
this.showOverlay();
}
else {
this.hideOverlay();
}
}
onPrevButtonClick(event) {
this.navigationState = { backward: true, button: true };
this.navBackward(event);
}
onNextButtonClick(event) {
this.navigationState = { backward: false, button: true };
this.navForward(event);
}
onContainerButtonKeydown(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;
}
}
onInputKeydown(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();
}
}
}
onDateCellKeydown(event, date, groupIndex) {
const cellContent = event.currentTarget;
const cell = cellContent.parentElement;
switch (event.which) {
//down arrow
case 40: {
cellContent.tabIndex = '-1';
let cellIndex = DomHandler.index(cell);
let nextRow = cell.parentElement.nextElementSibling;
if (nextRow) {
let 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';
let cellIndex = DomHandler.index(cell);
let prevRow = cell.parentElement.previousElementSibling;
if (prevRow) {
let 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';
let prevCell = cell.previousElementSibling;
if (prevCell) {
let 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';
let nextCell = cell.nextElementSibling;
if (nextCell) {
let 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;
}
}
onMonthCellKeydown(event, index) {
const cell = event.currentTarget;
switch (event.which) {
//arrows
case 38:
case 40: {
cell.tabIndex = '-1';
var cells = cell.parentElement.children;
var cellIndex = DomHandler.index(cell);
let 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';
let prevCell = cell.previousElementSibling;
if (prevCell) {
prevCell.tabIndex = '0';
prevCell.focus();
}
event.preventDefault();
break;
}
//right arrow
case 39: {
cell.tabIndex = '-1';
let 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;
}
}
navigateToMonth(prev, groupIndex) {
if (prev) {
if (this.numberOfMonths === 1 || (groupIndex === 0)) {
this.navigationState = { backward: true };
this.navBackward(event);
}
else {
let prevMonthContainer = this.contentViewChild.nativeElement.children[groupIndex - 1];
let cells = DomHandler.find(prevMonthContainer, '.ui-datepicker-calendar td a');
let 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 {
let nextMonthContainer = this.contentViewChild.nativeElement.children[groupIndex + 1];
let focusCell = DomHandler.findSingle(nextMonthContainer, '.ui-datepicker-calendar td a');
focusCell.tabIndex = '0';
focusCell.focus();
}
}
}
updateFocus() {
let 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) {
let 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();
}
}
initFocusableCell() {
let cell;
if (this.view === 'month') {
let cells = DomHandler.find(this.contentViewChild.nativeElement, '.ui-monthpicker .ui-monthpicker-month:not(.ui-state-disabled)');
let selectedCell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.ui-monthpicker .ui-monthpicker-month.ui-state-highlight');
cells.forEach(cell => cell.tabIndex = -1);
cell = selectedCell || cells[0];
if (cells.length === 0) {
let disabledCells = DomHandler.find(this.contentViewChild.nativeElement, '.ui-monthpicker .ui-monthpicker-month.ui-state-disabled[tabindex = "0"]');
disabledCells.forEach(cell => cell.tabIndex = -1);
}
}
else {
cell = DomHandler.findSingle(this.contentViewChild.nativeElement, 'a.ui-state-active');
if (!cell) {
let 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';
}
}
trapFocus(event) {
event.preventDefault();
let focusableElements = DomHandler.getFocusableElements(this.contentViewChild.nativeElement);
if (focusableElements && focusableElements.length > 0) {
if (!document.activeElement) {
focusableElements[0].focus();
}
else {
let 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();
}
}
}
}
onMonthDropdownChange(m) {
this.currentMonth = parseInt(m);
this.onMonthChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
this.createMonths(this.currentMonth, this.currentYear);
}
onYearDropdownChange(y) {
this.currentYear = parseInt(y);
this.onYearChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
this.createMonths(this.currentMonth, this.currentYear);
}
incrementHour(event) {
const prevHour = this.currentHour;
const newHour = this.currentHour + this.stepHour;
if (this.validateHour(newHour)) {
if (this.hourFormat == '24')
this.currentHour = (newHour >= 24) ? (newHour - 24) : newHour;
else if (this.hourFormat == '12') {
// Before the AM/PM break, now after
if (prevHour < 12 && newHour > 11) {
this.pm = !this.pm;
}
this.currentHour = (newHour >= 13) ? (newHour - 12) : newHour;
}
}
event.preventDefault();
}
onTimePickerElementMouseDown(event, type, direction) {
if (!this.disabled) {
this.repeat(event, null, type, direction);
event.preventDefault();
}
}
onTimePickerElementMouseUp(event) {
if (!this.disabled) {
this.clearTimePickerTimer();
this.updateTime();
}
}
onTimePickerElementMouseOut(event) {
if (!this.disabled) {
this.clearTimePickerTimer();
this.updateTime();
}
}
repeat(event, interval, type, direction) {
let i = interval || 500;
this.clearTimePickerTimer();
this.timePickerTimer = setTimeout(() => {
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();
}
clearTimePickerTimer() {
if (this.timePickerTimer) {
clearInterval(this.timePickerTimer);
}
}
decrementHour(event) {
const newHour = this.currentHour - this.stepHour;
if (this.validateHour(newHour)) {
if (this.hourFormat == '24')
this.currentHour = (newHour < 0) ? (24 + newHour) : newHour;
else if (this.hourFormat == '12') {
// If we were at noon/midnight, then switch
if (this.currentHour === 12) {
this.pm = !this.pm;
}
this.currentHour = (newHour <= 0) ? (12 + newHour) : newHour;
}
}
event.preventDefault();
}
validateHour(hour) {
let valid = true;
let value = this.value;
if (this.isRangeSelection()) {
value = this.value[1] || this.value[0];
}
if (this.isMultipleSelection()) {
value = this.value[this.value.length - 1];
}
let valueDateString = value ? value.toDateString() : null;
if (this.minDate && valueDateString && this.minDate.toDateString() === valueDateString) {
if (this.minDate.getHours() > hour) {
valid = false;
}
}
if (this.maxDate && valueDateString && this.maxDate.toDateString() === valueDateString) {
if (this.maxDate.getHours() < hour) {
valid = false;
}
}
return valid;
}
incrementMinute(event) {
let newMinute = this.currentMinute + this.stepMinute;
if (this.validateMinute(newMinute)) {
this.currentMinute = (newMinute > 59) ? newMinute - 60 : newMinute;
}
event.preventDefault();
}
decrementMinute(event) {
let newMinute = this.currentMinute - this.stepMinute;
newMinute = (newMinute < 0) ? 60 + newMinute : newMinute;
if (this.validateMinute(newMinute)) {
this.currentMinute = newMinute;
}
event.preventDefault();
}
validateMinute(minute) {
let valid = true;
let value = this.value;
if (this.isRangeSelection()) {
value = this.value[1] || this.value[0];
}
if (this.isMultipleSelection()) {
value = this.value[this.value.length - 1];
}
let valueDateString = value ? value.toDateString() : null;
if (this.minDate && valueDateString && this.minDate.toDateString() === valueDateString) {
if (value.getHours() == this.minDate.getHours()) {
if (this.minDate.getMinutes() > minute) {
valid = false;
}
}
}
if (this.maxDate && valueDateString && this.maxDate.toDateString() === valueDateString) {
if (value.getHours() == this.maxDate.getHours()) {
if (this.maxDate.getMinutes() < minute) {
valid = false;
}
}
}
return valid;
}
incrementSecond(event) {
let newSecond = this.currentSecond + this.stepSecond;
if (this.validateSecond(newSecond)) {
this.currentSecond = (newSecond > 59) ? newSecond - 60 : newSecond;
}
event.preventDefault();
}
decrementSecond(event) {
let newSecond = this.currentSecond - this.stepSecond;
newSecond = (newSecond < 0) ? 60 + newSecond : newSecond;
if (this.validateSecond(newSecond)) {
this.currentSecond = newSecond;
}
event.preventDefault();
}
validateSecond(second) {
let valid = true;
let value = this.value;
if (this.isRangeSelection()) {
value = this.value[1] || this.value[0];
}
if (this.isMultipleSelection()) {
value = this.value[this.value.length - 1];
}
let valueDateString = value ? value.toDateString() : null;
if (this.minDate && valueDateString && this.minDate.toDateString() === valueDateString) {
if (this.minDate.getSeconds() > second) {
valid = false;
}
}
if (this.maxDate && valueDateString && this.maxDate.toDateString() === valueDateString) {
if (this.maxDate.getSeconds() < second) {
valid = false;
}
}
return valid;
}
updateTime() {
let value = this.value;
if (this.isRangeSelection()) {
value = this.value[1] || this.value[0];
}
if (this.isMultipleSelection()) {
value = this.value[this.value.length - 1];
}
value = value ? new Date(value.getTime()) : new Date();
if (this.hourFormat == '12') {
if (this.currentHour === 12)
value.setHours(this.pm ? 12 : 0);
else
value.setHours(this.pm ? this.currentHour + 12 : this.currentHour);
}
else {
value.setHours(this.currentHour);
}
value.setMinutes(this.currentMinute);
value.setSeconds(this.currentSecond);
if (this.isRangeSelection()) {
if (this.value[1])
value = [this.value[0], value];
else
value = [value, null];
}
if (this.isMultipleSelection()) {
value = [...this.value.slice(0, -1), value];
}
this.updateModel(value);
this.onSelect.emit(value);
this.updateInputfield();
}
toggleAMPM(event) {
this.pm = !this.pm;
this.updateTime();
event.preventDefault();
}
onUserInput(event) {
// IE 11 Workaround for input placeholder : https://github.com/primefaces/primeng/issues/2026
if (!this.isKeydown) {
return;
}
this.isKeydown = false;
let val = event.target.value;
try {
let value = this.parseValueFromString(val);
if (this.isValidSelection(value)) {
this.updateModel(value);
this.updateUI();
}
}
catch (err) {
//invalid date
this.updateModel(null);
}
this.filled = val != null && val.length;
this.onInput.emit(event);
}
isValidSelection(value) {
let isValid = true;
if (this.isSingleSelection()) {
if (!this.isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false)) {
isValid = false;
}
}
else if (value.every(v => this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false))) {
if (this.isRangeSelection()) {
isValid = value.length > 1 && value[1] > value[0] ? true : false;
}
}
return isValid;
}
parseValueFromString(text) {
if (!text || text.trim().length === 0) {
return null;
}
let value;
if (this.isSingleSelection()) {
value = this.parseDateTime(text);
}
else if (this.isMultipleSelection()) {
let tokens = text.split(this.multipleSeparator);
value = [];
for (let token of tokens) {
value.push(this.parseDateTime(token.trim()));
}
}
else if (this.isRangeSelection()) {
let tokens = text.split(' ' + this.rangeSeparator + ' ');
value = [];
for (let i = 0; i < tokens.length; i++) {
value[i] = this.parseDateTime(tokens[i].trim());
}
}
return value;
}
parseDateTime(text) {
let date;
let parts = text.split(' ');
if (this.timeOnly) {
date = new Date();
this.populateTime(date, parts[0], parts[1]);
}
else {
const dateFormat = this.getDateFormat();
if (this.showTime) {
let ampm = this.hourFormat == '12' ? parts.pop() : null;
let timeString = parts.pop();
date = this.parseDate(parts.join(' '), dateFormat);
this.populateTime(date, timeString, ampm);
}
else {
date = this.parseDate(text, dateFormat);
}
}
return date;
}
populateTime(value, timeString, ampm) {
if (this.hourFormat == '12' && !ampm) {
throw 'Invalid Time';
}
this.pm = (ampm === 'PM' || ampm === 'pm');
let time = this.parseTime(timeString);
value.setHours(time.hour);
value.setMinutes(time.minute);
value.setSecon