ngx-daterangepicker-material
Version:
Angular 9 and 10 date range picker (with material design theme)
1,085 lines • 283 kB
JavaScript
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import dayjs, { Dayjs } from 'dayjs/esm';
import { LocaleService } from './locale.service';
import localeData from 'dayjs/esm/plugin/localeData';
import LocalizedFormat from 'dayjs/esm/plugin/localizedFormat';
import isoWeek from 'dayjs/esm/plugin/isoWeek';
import week from 'dayjs/esm/plugin/weekOfYear';
import customParseFormat from 'dayjs/esm/plugin/customParseFormat';
import utc from 'dayjs/esm/plugin/utc';
import * as i0 from "@angular/core";
import * as i1 from "./locale.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
dayjs.extend(localeData);
dayjs.extend(LocalizedFormat);
dayjs.extend(isoWeek);
dayjs.extend(week);
dayjs.extend(customParseFormat);
dayjs.extend(utc);
export var SideEnum;
(function (SideEnum) {
SideEnum["left"] = "left";
SideEnum["right"] = "right";
})(SideEnum || (SideEnum = {}));
export class DaterangepickerComponent {
constructor(el, ref, localeHolderService) {
this.el = el;
this.ref = ref;
this.localeHolderService = localeHolderService;
this.startDate = dayjs().utc(true).startOf('day');
this.endDate = dayjs().utc(true).endOf('day');
this.dateLimit = null;
this.autoApply = false;
this.singleDatePicker = false;
this.showDropdowns = false;
this.showWeekNumbers = false;
this.showISOWeekNumbers = false;
this.linkedCalendars = false;
this.autoUpdateInput = true;
this.alwaysShowCalendars = false;
this.maxSpan = false;
this.lockStartDate = false;
this.timePicker = false;
this.timePicker24Hour = false;
this.timePickerIncrement = 1;
this.timePickerSeconds = false;
this.showClearButton = false;
this.firstMonthDayClass = null;
this.lastMonthDayClass = null;
this.emptyWeekRowClass = null;
this.emptyWeekColumnClass = null;
this.firstDayOfNextMonthClass = null;
this.lastDayOfPreviousMonthClass = null;
this.showCancel = false;
this.keepCalendarOpeningWithRange = false;
this.showRangeLabelOnInput = false;
this.customRangeDirection = false;
this.closeOnAutoApply = true;
this.calendarVariables = {};
this.timepickerVariables = {};
this.daterangepicker = { start: new FormControl(), end: new FormControl() };
this.applyBtn = { disabled: false };
this.sideEnum = SideEnum;
this.rangesArray = [];
this.isShown = false;
this.inline = true;
this.leftCalendar = { month: null, calendar: [] };
this.rightCalendar = { month: null, calendar: [] };
this.showCalInRanges = false;
this.nowHoveredDate = null;
this.pickingDate = false;
this.localeHolder = {};
this.rangesHolder = {};
this.cachedVersion = { start: null, end: null };
this.clickNext = (side) => {
if (side === SideEnum.left) {
this.leftCalendar.month = this.leftCalendar.month.add(1, 'month');
}
else {
this.rightCalendar.month = this.rightCalendar.month.add(1, 'month');
if (this.linkedCalendars) {
this.leftCalendar.month = this.leftCalendar.month.add(1, 'month');
}
}
this.updateCalendars();
};
this.choosedDate = new EventEmitter();
this.rangeClicked = new EventEmitter();
this.datesUpdated = new EventEmitter();
this.startDateChanged = new EventEmitter();
this.endDateChanged = new EventEmitter();
this.cancelClicked = new EventEmitter();
this.clearClicked = new EventEmitter();
}
get minDate() {
return this.minDateHolder;
}
set minDate(value) {
if (dayjs.isDayjs(value)) {
this.minDateHolder = value;
}
else if (typeof value === 'string') {
this.minDateHolder = dayjs(value).utc(true);
}
else {
this.minDateHolder = null;
}
}
get locale() {
return this.localeHolder;
}
set locale(value) {
this.localeHolder = { ...this.localeHolderService.config, ...value };
if (value.locale) {
this.localeHolder = this.localeHolderService.configWithLocale(value.locale);
}
}
get ranges() {
return this.rangesHolder;
}
set ranges(value) {
this.rangesHolder = value;
this.renderRanges();
}
get maxDate() {
return this.maxDateHolder;
}
set maxDate(value) {
if (dayjs.isDayjs(value)) {
this.maxDateHolder = value;
}
else if (typeof value === 'string') {
this.maxDateHolder = dayjs(value).utc(true);
}
else {
this.maxDateHolder = null;
}
}
isInvalidDate(date) {
return false;
}
isCustomDate(date) {
return false;
}
isTooltipDate(date) {
return null;
}
handleInternalClick(e) {
return e.stopPropagation();
}
ngOnChanges(changes) {
if ((changes.startDate || changes.endDate) && this.inline) {
this.updateView();
}
}
ngOnInit() {
this.buildLocale();
const daysOfWeek = [...this.locale.daysOfWeek];
this.locale.firstDay = this.locale.firstDay % 7;
if (this.locale.firstDay !== 0) {
let iterator = this.locale.firstDay;
while (iterator > 0) {
daysOfWeek.push(daysOfWeek.shift());
iterator--;
}
}
this.locale.daysOfWeek = daysOfWeek;
if (this.inline) {
this.cachedVersion.start = this.startDate.clone();
this.cachedVersion.end = this.endDate.clone();
}
if (this.startDate && this.timePicker) {
this.setStartDate(this.startDate);
this.renderTimePicker(SideEnum.left);
}
if (this.endDate && this.timePicker) {
this.setEndDate(this.endDate);
this.renderTimePicker(SideEnum.right);
}
this.updateMonthsInView();
this.renderCalendar(SideEnum.left);
this.renderCalendar(SideEnum.right);
this.renderRanges();
}
renderRanges() {
this.rangesArray = [];
let start;
let end;
if (typeof this.ranges === 'object') {
for (const range in this.ranges) {
if (this.ranges[range]) {
if (typeof this.ranges[range][0] === 'string') {
start = dayjs(this.ranges[range][0], this.locale.format).utc(true);
}
else {
start = dayjs(this.ranges[range][0]).utc(true);
}
if (typeof this.ranges[range][1] === 'string') {
end = dayjs(this.ranges[range][1], this.locale.format).utc(true);
}
else {
end = dayjs(this.ranges[range][1]).utc(true);
}
if (this.minDate && start.isBefore(this.minDate)) {
start = this.minDate.clone();
}
let maxDate = this.maxDate;
if (this.maxSpan && maxDate && start.clone().add(this.maxSpan).isAfter(maxDate)) {
maxDate = start.clone().add(this.maxSpan);
}
if (maxDate && end.isAfter(maxDate)) {
end = maxDate.clone();
}
if ((this.minDate && end.isBefore(this.minDate, this.timePicker ? 'minute' : 'day')) ||
(maxDate && start.isAfter(maxDate, this.timePicker ? 'minute' : 'day'))) {
continue;
}
const elem = document.createElement('textarea');
elem.innerHTML = range;
const rangeHtml = elem.value;
this.ranges[rangeHtml] = [start, end];
}
}
for (const range in this.ranges) {
if (this.ranges[range]) {
this.rangesArray.push(range);
}
}
if (this.showCustomRangeLabel) {
this.rangesArray.push(this.locale.customRangeLabel);
}
this.showCalInRanges = !this.rangesArray.length || this.alwaysShowCalendars;
if (!this.timePicker) {
this.startDate = this.startDate.startOf('day');
this.endDate = this.endDate.endOf('day');
}
}
}
renderTimePicker(side) {
let selected;
let minDate;
const maxDate = this.maxDate;
if (side === SideEnum.left) {
selected = this.startDate.clone();
minDate = this.minDate;
}
else if (side === SideEnum.right && this.endDate) {
selected = this.endDate.clone();
minDate = this.startDate;
}
else if (side === SideEnum.right && !this.endDate) {
selected = this.getDateWithTime(this.startDate, SideEnum.right);
if (selected.isBefore(this.startDate)) {
selected = this.startDate.clone();
}
minDate = this.startDate;
}
const start = this.timePicker24Hour ? 0 : 1;
const end = this.timePicker24Hour ? 23 : 12;
this.timepickerVariables[side] = {
hours: [],
minutes: [],
minutesLabel: [],
seconds: [],
secondsLabel: [],
disabledHours: [],
disabledMinutes: [],
disabledSeconds: [],
selectedHour: 0,
selectedMinute: 0,
selectedSecond: 0,
selected
};
for (let i = start; i <= end; i++) {
let iIn24 = i;
if (!this.timePicker24Hour) {
iIn24 = selected.hour() >= 12 ? (i === 12 ? 12 : i + 12) : i === 12 ? 0 : i;
}
const time = selected.clone().hour(iIn24);
let disabled = false;
if (minDate && time.minute(59).isBefore(minDate)) {
disabled = true;
}
if (maxDate && time.minute(0).isAfter(maxDate)) {
disabled = true;
}
this.timepickerVariables[side].hours.push(i);
if (iIn24 === selected.hour() && !disabled) {
this.timepickerVariables[side].selectedHour = i;
}
else if (disabled) {
this.timepickerVariables[side].disabledHours.push(i);
}
}
for (let i = 0; i < 60; i += this.timePickerIncrement) {
const padded = i < 10 ? `0${i}` : `${i}`;
const time = selected.clone().minute(i);
let disabled = false;
if (minDate && time.second(59).isBefore(minDate)) {
disabled = true;
}
if (maxDate && time.second(0).isAfter(maxDate)) {
disabled = true;
}
this.timepickerVariables[side].minutes.push(i);
this.timepickerVariables[side].minutesLabel.push(padded);
if (selected.minute() === i && !disabled) {
this.timepickerVariables[side].selectedMinute = i;
}
else if (disabled) {
this.timepickerVariables[side].disabledMinutes.push(i);
}
}
if (this.timePickerSeconds) {
for (let i = 0; i < 60; i++) {
const padded = i < 10 ? `0${i}` : `${i}`;
const time = selected.clone().second(i);
let disabled = false;
if (minDate && time.isBefore(minDate)) {
disabled = true;
}
if (maxDate && time.isAfter(maxDate)) {
disabled = true;
}
this.timepickerVariables[side].seconds.push(i);
this.timepickerVariables[side].secondsLabel.push(padded);
if (selected.second() === i && !disabled) {
this.timepickerVariables[side].selectedSecond = i;
}
else if (disabled) {
this.timepickerVariables[side].disabledSeconds.push(i);
}
}
}
if (!this.timePicker24Hour) {
if (minDate && selected.clone().hour(12).minute(0).second(0).isBefore(minDate)) {
this.timepickerVariables[side].amDisabled = true;
}
if (maxDate && selected.clone().hour(0).minute(0).second(0).isAfter(maxDate)) {
this.timepickerVariables[side].pmDisabled = true;
}
if (selected.hour() >= 12) {
this.timepickerVariables[side].ampmModel = 'PM';
}
else {
this.timepickerVariables[side].ampmModel = 'AM';
}
}
this.timepickerVariables[side].selected = selected;
}
renderCalendar(side) {
const mainCalendar = side === SideEnum.left ? this.leftCalendar : this.rightCalendar;
const month = mainCalendar.month.month();
const year = mainCalendar.month.year();
const hour = mainCalendar.month.hour();
const minute = mainCalendar.month.minute();
const second = mainCalendar.month.second();
const daysInMonth = dayjs(new Date(year, month)).utc(true).daysInMonth();
const firstDay = dayjs(new Date(year, month, 1)).utc(true);
const lastDay = dayjs(new Date(year, month, daysInMonth)).utc(true);
const lastMonth = dayjs(firstDay).utc(true).subtract(1, 'month').month();
const lastYear = dayjs(firstDay).utc(true).subtract(1, 'month').year();
const daysInLastMonth = dayjs(new Date(lastYear, lastMonth)).utc(true).daysInMonth();
const dayOfWeek = firstDay.day();
const calendar = [];
calendar.firstDay = firstDay;
calendar.lastDay = lastDay;
for (let i = 0; i < 6; i++) {
calendar[i] = [];
}
let startDay = daysInLastMonth - dayOfWeek + this.locale.firstDay + 1;
if (startDay > daysInLastMonth) {
startDay -= 7;
}
if (dayOfWeek === this.locale.firstDay) {
startDay = daysInLastMonth - 6;
}
let curDate = dayjs(new Date(lastYear, lastMonth, startDay, 12, minute, second)).utc(true);
for (let i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = dayjs(curDate).utc(true).add(24, 'hours')) {
if (i > 0 && col % 7 === 0) {
col = 0;
row++;
}
calendar[row][col] = curDate.clone().hour(hour).minute(minute).second(second);
curDate = curDate.hour(12);
if (this.minDate &&
calendar[row][col].format('YYYY-MM-DD') === this.minDate.format('YYYY-MM-DD') &&
calendar[row][col].isBefore(this.minDate) &&
side === 'left') {
calendar[row][col] = this.minDate.clone();
}
if (this.maxDate &&
calendar[row][col].format('YYYY-MM-DD') === this.maxDate.format('YYYY-MM-DD') &&
calendar[row][col].isAfter(this.maxDate) &&
side === 'right') {
calendar[row][col] = this.maxDate.clone();
}
}
if (side === SideEnum.left) {
this.leftCalendar.calendar = calendar;
}
else {
this.rightCalendar.calendar = calendar;
}
let minDate = side === 'left' ? this.minDate : this.startDate;
let maxDate = this.maxDate;
if (this.endDate === null && this.dateLimit) {
const maxLimit = this.startDate.clone().add(this.dateLimit, 'day').endOf('day');
if (!maxDate || maxLimit.isBefore(maxDate)) {
maxDate = maxLimit;
}
if (this.customRangeDirection) {
minDate = this.minDate;
const minLimit = this.startDate.clone().subtract(this.dateLimit, 'day').endOf('day');
if (!minDate || minLimit.isAfter(minDate)) {
minDate = minLimit;
}
}
}
this.calendarVariables[side] = {
month,
year,
hour,
minute,
second,
daysInMonth,
firstDay,
lastDay,
lastMonth,
lastYear,
daysInLastMonth,
dayOfWeek,
calRows: Array.from(Array(6).keys()),
calCols: Array.from(Array(7).keys()),
classes: {},
minDate,
maxDate,
calendar
};
if (this.showDropdowns) {
const currentMonth = calendar[1][1].month();
const currentYear = calendar[1][1].year();
const realCurrentYear = dayjs().utc(true).year();
const maxYear = (maxDate && maxDate.year()) || realCurrentYear + 5;
const minYear = (minDate && minDate.year()) || realCurrentYear - 50;
const inMinYear = currentYear === minYear;
const inMaxYear = currentYear === maxYear;
const years = [];
for (let y = minYear; y <= maxYear; y++) {
years.push(y);
}
this.calendarVariables[side].dropdowns = {
currentMonth,
currentYear,
maxYear,
minYear,
inMinYear,
inMaxYear,
monthArrays: Array.from(Array(12).keys()),
yearArrays: years
};
}
this.buildCells(calendar, side);
}
setStartDate(startDate) {
if (typeof startDate === 'string') {
this.startDate = dayjs(startDate, this.locale.format).utc(true);
}
if (typeof startDate === 'object') {
this.pickingDate = true;
this.startDate = dayjs(startDate).utc(true);
}
if (!this.timePicker) {
this.pickingDate = true;
this.startDate = this.startDate.startOf('day');
}
if (this.timePicker && this.timePickerIncrement) {
this.startDate = this.startDate.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
}
if (this.minDate && this.startDate.isBefore(this.minDate)) {
this.startDate = this.minDate.clone();
if (this.timePicker && this.timePickerIncrement) {
this.startDate = this.startDate.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
}
}
if (this.maxDate && this.startDate.isAfter(this.maxDate)) {
this.startDate = this.maxDate.clone();
if (this.timePicker && this.timePickerIncrement) {
this.startDate = this.startDate.minute(Math.floor(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
}
}
if (!this.isShown) {
this.updateElement();
}
this.startDateChanged.emit({ startDate: this.startDate });
this.updateMonthsInView();
}
setEndDate(endDate) {
if (typeof endDate === 'string') {
this.endDate = dayjs(endDate, this.locale.format).utc(true);
}
if (typeof endDate === 'object') {
this.pickingDate = false;
this.endDate = dayjs(endDate).utc(true);
}
if (!this.timePicker) {
this.pickingDate = false;
this.endDate = this.endDate.add(1, 'd').startOf('day').subtract(1, 'second');
}
if (this.timePicker && this.timePickerIncrement) {
this.endDate.minute(Math.round(this.endDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
}
if (this.endDate.isBefore(this.startDate)) {
this.endDate = this.startDate.clone();
}
if (this.maxDate && this.endDate.isAfter(this.maxDate)) {
this.endDate = this.maxDate.clone();
}
if (this.dateLimit && this.startDate.clone().add(this.dateLimit, 'day').isBefore(this.endDate)) {
this.endDate = this.startDate.clone().add(this.dateLimit, 'day');
}
if (!this.isShown) {
}
this.endDateChanged.emit({ endDate: this.endDate });
this.updateMonthsInView();
}
updateView() {
if (this.timePicker) {
this.renderTimePicker(SideEnum.left);
this.renderTimePicker(SideEnum.right);
}
this.updateMonthsInView();
this.updateCalendars();
}
updateMonthsInView() {
if (this.endDate) {
if (!this.singleDatePicker &&
this.leftCalendar.month &&
this.rightCalendar.month &&
((this.startDate && this.leftCalendar && this.startDate.format('YYYY-MM') === this.leftCalendar.month.format('YYYY-MM')) ||
(this.startDate && this.rightCalendar && this.startDate.format('YYYY-MM') === this.rightCalendar.month.format('YYYY-MM'))) &&
(this.endDate.format('YYYY-MM') === this.leftCalendar.month.format('YYYY-MM') ||
this.endDate.format('YYYY-MM') === this.rightCalendar.month.format('YYYY-MM'))) {
return;
}
if (this.startDate) {
this.leftCalendar.month = this.startDate.clone().date(2);
if (!this.linkedCalendars && (this.endDate.month() !== this.startDate.month() || this.endDate.year() !== this.startDate.year())) {
this.rightCalendar.month = this.endDate.clone().date(2);
}
else {
this.rightCalendar.month = this.startDate.clone().date(2).add(1, 'month');
}
}
}
else {
if (this.leftCalendar.month.format('YYYY-MM') !== this.startDate.format('YYYY-MM') &&
this.rightCalendar.month.format('YYYY-MM') !== this.startDate.format('YYYY-MM')) {
this.leftCalendar.month = this.startDate.clone().date(2);
this.rightCalendar.month = this.startDate.clone().date(2).add(1, 'month');
}
}
if (this.maxDate && this.linkedCalendars && !this.singleDatePicker && this.rightCalendar.month > this.maxDate) {
this.rightCalendar.month = this.maxDate.clone().date(2);
this.leftCalendar.month = this.maxDate.clone().date(2).subtract(1, 'month');
}
}
updateCalendars() {
this.renderCalendar(SideEnum.left);
this.renderCalendar(SideEnum.right);
if (this.endDate === null) {
return;
}
this.calculateChosenLabel();
}
updateElement() {
const format = this.locale.displayFormat ? this.locale.displayFormat : this.locale.format;
if (!this.singleDatePicker && this.autoUpdateInput) {
if (this.startDate && this.endDate) {
if (this.rangesArray.length &&
this.showRangeLabelOnInput === true &&
this.chosenRange &&
this.locale.customRangeLabel !== this.chosenRange) {
this.chosenLabel = this.chosenRange;
}
else {
this.chosenLabel = this.startDate.format(format) + this.locale.separator + this.endDate.format(format);
}
}
}
else if (this.autoUpdateInput) {
this.chosenLabel = this.startDate.format(format);
}
}
remove() {
this.isShown = false;
}
calculateChosenLabel() {
if (!this.locale || !this.locale.separator) {
this.buildLocale();
}
let customRange = true;
let i = 0;
if (this.rangesArray.length > 0) {
for (const range in this.ranges) {
if (this.ranges[range]) {
if (this.timePicker) {
const format = this.timePickerSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
if (this.startDate.format(format) === this.ranges[range][0].format(format) &&
this.endDate.format(format) === this.ranges[range][1].format(format)) {
customRange = false;
this.chosenRange = this.rangesArray[i];
break;
}
}
else {
if (this.startDate.format('YYYY-MM-DD') === this.ranges[range][0].format('YYYY-MM-DD') &&
this.endDate.format('YYYY-MM-DD') === this.ranges[range][1].format('YYYY-MM-DD')) {
customRange = false;
this.chosenRange = this.rangesArray[i];
break;
}
}
i++;
}
}
if (customRange) {
if (this.showCustomRangeLabel) {
this.chosenRange = this.locale.customRangeLabel;
}
else {
this.chosenRange = null;
}
this.showCalInRanges = true;
}
}
this.updateElement();
}
clickApply(e) {
if (!this.singleDatePicker && this.startDate && !this.endDate) {
this.endDate = this.getDateWithTime(this.startDate, SideEnum.right);
this.calculateChosenLabel();
}
if (this.isInvalidDate && this.startDate && this.endDate) {
let d = this.startDate.clone();
while (d.isBefore(this.endDate)) {
if (this.isInvalidDate(d)) {
this.endDate = d.subtract(1, 'days');
this.calculateChosenLabel();
break;
}
d = d.add(1, 'days');
}
}
if (this.chosenLabel) {
this.choosedDate.emit({ chosenLabel: this.chosenLabel, startDate: this.startDate, endDate: this.endDate });
}
this.datesUpdated.emit({ startDate: this.startDate, endDate: this.endDate });
if (e || (this.closeOnAutoApply && !e)) {
this.hide();
}
}
clickCancel(e) {
this.startDate = this.cachedVersion.start;
this.endDate = this.cachedVersion.end;
if (this.inline) {
this.updateView();
}
this.cancelClicked.emit();
this.hide();
}
monthChanged(monthEvent, side) {
const year = this.calendarVariables[side].dropdowns.currentYear;
const month = parseInt(monthEvent.target.value, 10);
this.monthOrYearChanged(month, year, side);
}
yearChanged(yearEvent, side) {
const month = this.calendarVariables[side].dropdowns.currentMonth;
const year = parseInt(yearEvent.target.value, 10);
this.monthOrYearChanged(month, year, side);
}
timeChanged(timeEvent, side) {
let hour = parseInt(String(this.timepickerVariables[side].selectedHour), 10);
const minute = parseInt(String(this.timepickerVariables[side].selectedMinute), 10);
const second = this.timePickerSeconds ? parseInt(String(this.timepickerVariables[side].selectedSecond), 10) : 0;
if (!this.timePicker24Hour) {
const ampm = this.timepickerVariables[side].ampmModel;
if (ampm === 'PM' && hour < 12) {
hour += 12;
}
if (ampm === 'AM' && hour === 12) {
hour = 0;
}
}
if (side === SideEnum.left) {
let start = this.startDate.clone();
start = start.hour(hour);
start = start.minute(minute);
start = start.second(second);
this.setStartDate(start);
if (this.singleDatePicker) {
this.endDate = this.startDate.clone();
}
else if (this.endDate && this.endDate.format('YYYY-MM-DD') === start.format('YYYY-MM-DD') && this.endDate.isBefore(start)) {
this.setEndDate(start.clone());
}
else if (!this.endDate && this.timePicker) {
const startClone = this.getDateWithTime(start, SideEnum.right);
if (startClone.isBefore(start)) {
this.timepickerVariables[SideEnum.right].selectedHour = hour;
this.timepickerVariables[SideEnum.right].selectedMinute = minute;
this.timepickerVariables[SideEnum.right].selectedSecond = second;
}
}
}
else if (this.endDate) {
let end = this.endDate.clone();
end = end.hour(hour);
end = end.minute(minute);
end = end.second(second);
this.setEndDate(end);
}
this.updateCalendars();
this.renderTimePicker(SideEnum.left);
this.renderTimePicker(SideEnum.right);
if (this.autoApply) {
this.clickApply();
}
}
monthOrYearChanged(month, year, side) {
const isLeft = side === SideEnum.left;
let newMonth = month;
let newYear = year;
if (!isLeft) {
if (newYear < this.startDate.year() || (newYear === this.startDate.year() && newMonth < this.startDate.month())) {
newMonth = this.startDate.month();
newYear = this.startDate.year();
}
}
if (this.minDate) {
if (newYear < this.minDate.year() || (newYear === this.minDate.year() && newMonth < this.minDate.month())) {
newMonth = this.minDate.month();
newYear = this.minDate.year();
}
}
if (this.maxDate) {
if (newYear > this.maxDate.year() || (newYear === this.maxDate.year() && newMonth > this.maxDate.month())) {
newMonth = this.maxDate.month();
newYear = this.maxDate.year();
}
}
this.calendarVariables[side].dropdowns.currentYear = newYear;
this.calendarVariables[side].dropdowns.currentMonth = newMonth;
if (isLeft) {
this.leftCalendar.month = this.leftCalendar.month.month(newMonth).year(newYear);
if (this.linkedCalendars) {
this.rightCalendar.month = this.leftCalendar.month.clone().add(1, 'month');
}
}
else {
this.rightCalendar.month = this.rightCalendar.month.month(newMonth).year(newYear);
if (this.linkedCalendars) {
this.leftCalendar.month = this.rightCalendar.month.clone().subtract(1, 'month');
}
}
this.updateCalendars();
}
clickPrev(side) {
if (side === SideEnum.left) {
this.leftCalendar.month = this.leftCalendar.month.subtract(1, 'month');
if (this.linkedCalendars) {
this.rightCalendar.month = this.rightCalendar.month.subtract(1, 'month');
}
}
else {
this.rightCalendar.month = this.rightCalendar.month.subtract(1, 'month');
}
this.updateCalendars();
}
hoverDate(e, side, row, col) {
const leftCalDate = this.calendarVariables.left.calendar[row][col];
const rightCalDate = this.calendarVariables.right.calendar[row][col];
if (this.pickingDate) {
this.nowHoveredDate = side === SideEnum.left ? leftCalDate : rightCalDate;
this.renderCalendar(SideEnum.left);
this.renderCalendar(SideEnum.right);
}
}
clickDate(e, side, row, col) {
if (e.target.tagName === 'TD') {
if (!e.target.classList.contains('available')) {
return;
}
}
else if (e.target.tagName === 'SPAN') {
if (!e.target.parentElement.classList.contains('available')) {
return;
}
}
if (this.rangesArray.length) {
this.chosenRange = this.locale.customRangeLabel;
}
let date = side === SideEnum.left ? this.leftCalendar.calendar[row][col] : this.rightCalendar.calendar[row][col];
if ((this.endDate || (date.isBefore(this.startDate, 'day') && this.customRangeDirection === false)) && this.lockStartDate === false) {
if (this.timePicker) {
date = this.getDateWithTime(date, SideEnum.left);
}
this.endDate = null;
this.setStartDate(date.clone());
}
else if (!this.endDate && date.isBefore(this.startDate) && this.customRangeDirection === false) {
this.setEndDate(this.startDate.clone());
}
else {
if (this.timePicker) {
date = this.getDateWithTime(date, SideEnum.right);
}
if (date.isBefore(this.startDate, 'day') === true && this.customRangeDirection === true) {
this.setEndDate(this.startDate);
this.setStartDate(date.clone());
}
else {
this.setEndDate(date.clone());
}
if (this.autoApply) {
this.calculateChosenLabel();
}
}
if (this.singleDatePicker) {
this.setEndDate(this.startDate);
this.updateElement();
if (this.autoApply) {
this.clickApply();
}
}
this.updateView();
if (this.autoApply && this.startDate && this.endDate) {
this.clickApply();
}
e.stopPropagation();
}
clickRange(e, label) {
this.chosenRange = label;
if (label === this.locale.customRangeLabel) {
this.isShown = true;
this.showCalInRanges = true;
}
else {
const dates = this.ranges[label];
console.log('1 ', dates);
this.startDate = dates[0].clone();
this.endDate = dates[1].clone();
if (this.showRangeLabelOnInput && label !== this.locale.customRangeLabel) {
this.chosenLabel = label;
}
else {
this.calculateChosenLabel();
}
this.showCalInRanges = !this.rangesArray.length || this.alwaysShowCalendars;
if (!this.timePicker) {
this.startDate = this.startDate.startOf('day');
this.endDate = this.endDate.endOf('day');
}
if (!this.alwaysShowCalendars) {
this.isShown = false;
}
this.rangeClicked.emit({ label, dates });
if (!this.keepCalendarOpeningWithRange || this.autoApply) {
this.clickApply();
}
else {
if (!this.alwaysShowCalendars) {
return this.clickApply();
}
if (this.maxDate && this.maxDate.isSame(dates[0], 'month')) {
this.rightCalendar.month = this.rightCalendar.month.month(dates[0].month());
this.rightCalendar.month = this.rightCalendar.month.year(dates[0].year());
this.leftCalendar.month = this.leftCalendar.month.month(dates[0].month() - 1);
this.leftCalendar.month = this.leftCalendar.month.year(dates[1].year());
}
else {
this.leftCalendar.month = this.leftCalendar.month.month(dates[0].month());
this.leftCalendar.month = this.leftCalendar.month.year(dates[0].year());
const nextMonth = !this.linkedCalendars ? dates[1].clone() : dates[0].clone().add(1, 'month');
this.rightCalendar.month = this.rightCalendar.month.month(nextMonth.month());
this.rightCalendar.month = this.rightCalendar.month.year(nextMonth.year());
}
this.updateCalendars();
if (this.timePicker) {
this.renderTimePicker(SideEnum.left);
this.renderTimePicker(SideEnum.right);
}
}
}
}
show(e) {
if (this.isShown) {
return;
}
this.cachedVersion.start = this.startDate.clone();
this.cachedVersion.end = this.endDate.clone();
this.isShown = true;
this.updateView();
}
hide(e) {
if (!this.isShown) {
return;
}
if (!this.endDate) {
if (this.cachedVersion.start) {
this.startDate = this.cachedVersion.start.clone();
}
if (this.cachedVersion.end) {
this.endDate = this.cachedVersion.end.clone();
}
}
if (!this.startDate.isSame(this.cachedVersion.start) || !this.endDate.isSame(this.cachedVersion.end)) {
}
this.updateElement();
this.isShown = false;
this.ref.detectChanges();
}
updateLocale(locale) {
for (const key in locale) {
if (Object.prototype.hasOwnProperty.call(locale, key)) {
this.locale[key] = locale[key];
if (key === 'customRangeLabel') {
this.renderRanges();
}
}
}
}
clear() {
this.startDate = dayjs().utc(true).startOf('day');
this.endDate = dayjs().utc(true).endOf('day');
this.choosedDate.emit({ chosenLabel: '', startDate: null, endDate: null });
this.datesUpdated.emit({ startDate: null, endDate: null });
this.clearClicked.emit();
this.hide();
}
disableRange(range) {
if (range === this.locale.customRangeLabel) {
return false;
}
const rangeMarkers = this.ranges[range];
const areBothBefore = rangeMarkers.every((date) => {
if (!this.minDate) {
return false;
}
return date.isBefore(this.minDate);
});
const areBothAfter = rangeMarkers.every((date) => {
if (!this.maxDate) {
return false;
}
return date.isAfter(this.maxDate);
});
return areBothBefore || areBothAfter;
}
getDateWithTime(date, side) {
let hour = parseInt(String(this.timepickerVariables[side].selectedHour), 10);
if (!this.timePicker24Hour) {
const ampm = this.timepickerVariables[side].ampmModel;
if (ampm === 'PM' && hour < 12) {
hour += 12;
}
if (ampm === 'AM' && hour === 12) {
hour = 0;
}
}
const minute = parseInt(String(this.timepickerVariables[side].selectedMinute), 10);
const second = this.timePickerSeconds ? parseInt(String(this.timepickerVariables[side].selectedSecond), 10) : 0;
return date.clone().hour(hour).minute(minute).second(second);
}
buildLocale() {
this.locale = { ...this.localeHolderService.config, ...this.locale };
if (!this.locale.format) {
if (this.timePicker) {
this.locale.format = dayjs.localeData().longDateFormat('lll');
}
else {
this.locale.format = dayjs.localeData().longDateFormat('L');
}
}
}
buildCells(calendar, side) {
for (let row = 0; row < 6; row++) {
this.calendarVariables[side].classes[row] = { classList: '' };
const rowClasses = [];
if (this.emptyWeekRowClass &&
Array.from(Array(7).keys()).some((i) => calendar[row][i].month() !== this.calendarVariables[side].month)) {
rowClasses.push(this.emptyWeekRowClass);
}
for (let col = 0; col < 7; col++) {
const classes = [];
if (this.emptyWeekColumnClass) {
if (calendar[row][col].month() !== this.calendarVariables[side].month) {
classes.push(this.emptyWeekColumnClass);
}
}
if (calendar[row][col].isSame(dayjs().utc(true), 'day')) {
classes.push('today');
}
if (calendar[row][col].isoWeekday() > 5) {
classes.push('weekend');
}
if (calendar[row][col].month() !== calendar[1][1].month()) {
classes.push('off');
if (this.lastDayOfPreviousMonthClass &&
(calendar[row][col].month() < calendar[1][1].month() || calendar[1][1].month() === 0) &&
calendar[row][col].date() === this.calendarVariables[side].daysInLastMonth) {
classes.push(this.lastDayOfPreviousMonthClass);
}
if (this.firstDayOfNextMonthClass &&
(calendar[row][col].month() > calendar[1][1].month() || calendar[row][col].month() === 0) &&
calendar[row][col].date() === 1) {
classes.push(this.firstDayOfNextMonthClass);
}
}
if (this.firstMonthDayClass &&
calendar[row][col].month() === calendar[1][1].month() &&
calendar[row][col].date() === calendar.firstDay.date()) {
classes.push(this.firstMonthDayClass);
}
if (this.lastMonthDayClass &&
calendar[row][col].month() === calendar[1][1].month() &&
calendar[row][col].date() === calendar.lastDay.date()) {
classes.push(this.lastMonthDayClass);
}
if (this.minDate && calendar[row][col].isBefore(this.minDate, 'day')) {
classes.push('off', 'disabled');
}
if (this.calendarVariables[side].maxDate && calendar[row][col].isAfter(this.calendarVariables[side].maxDate, 'day')) {
classes.push('off', 'disabled');
}
if (this.isInvalidDate(calendar[row][col])) {
classes.push('off', 'disabled', 'invalid');
}
if (this.startDate && calendar[row][col].format('YYYY-MM-DD') === this.startDate.format('YYYY-MM-DD')) {
classes.push('active', 'start-date');
}
if (this.endDate != null && calendar[row][col].format('YYYY-MM-DD') === this.endDate.format('YYYY-MM-DD')) {
classes.push('active', 'end-date');
}
if (((this.nowHoveredDate != null && this.pickingDate) || this.endDate != null) &&
calendar[row][col] > this.startDate &&
(calendar[row][col] < this.endDate || (calendar[row][col] < this.nowHoveredDate && this.pickingDate)) &&
!classes.find((el) => el === 'off')) {
classes.push('in-range');
}
const isCustom = this.isCustomDate(calendar[row][col]);
if (isCustom !== false) {
if (typeof isCustom === 'string') {
classes.push(isCustom);
}
else {
Array.prototype.push.apply(classes, isCustom);
}
}
let cname = '';
let disabled = false;
for (const className of classes) {
cname += className + ' ';
if (className === 'disabled') {
disabled = true;
}
}
if (!disabled) {
cname += 'available';
}
this.calendarVariables[side].classes[row][col] = cname.replace(/^\s+|\s+$/g, '');
}
this.calendarVariables[side].classes[row].classList = rowClasses.join(' ');
}
}
}
DaterangepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DaterangepickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.LocaleService }], target: i0.ɵɵFactoryTarget.Component });
DaterangepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DaterangepickerComponent, selector: "ngx-daterangepicker-material", inputs: { startDate: "startDate", endDate: "endDate", dateLimit: "dateLimit", autoApply: "autoApply", singleDatePicker: "singleDatePicker", showDropdowns: "showDropdowns", showWeekNumbers: "showWeekNumbers", showISOWeekNumbers: "showISOWeekNumbers", linkedCalendars: "linkedCalendars", autoUpdateInput: "autoUpdateInput", alwaysShowCalendars: "alwaysShowCalendars", maxSpan: "maxSpan", lockStartDate: "lockStartDate", timePicker: "timePicker", timePicker24Hour: "timePicker24Hour", timePickerIncrement: "timePickerIncrement", timePickerSeconds: "timePickerSeconds", showClearButton: "showClearButton", firstMonthDayClass: "firstMonthDayClass", lastMonthDayClass: "lastMonthDayClass", emptyWeekRowClass: "emptyWeekRowClass", emptyWeekColumnClass: "emptyWeekColumnClass", firstDayOfNextMonthClass: "firstDayOfNextMonthClass", lastDayOfPreviousMonthClass: "lastDayOfPreviousMonthClass", showCustomRangeLabel: "showCustomRangeLabel", showCancel: "showCancel", keepCalendarOpeningWithRange: "keepCalendarOpeningWithRange", showRangeLabelOnInput: "showRangeLabelOnInput", customRangeDirection: "customRangeDirection", drops: "drops", opens: "opens", closeOnAutoApply: "closeOnAutoApply", minDate: "minDate", locale: "locale", ranges: "ranges", maxDate: "maxDate", isInvalidDate: "isInvalidDate", isCustomDate: "isCustomDate", isTooltipDate: "isTooltipDate" }, outputs: { choosedDate: "choosedDate", rangeClicked: "rangeClicked", datesUpdated: "datesUpdated", startDateChanged: "startDateChanged", endDateChanged: "endDateChanged", cancelClicked: "cancelClicked", clearClicked: "clearClicked" }, host: { listeners: { "click": "handleInternalClick($event)" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DaterangepickerComponent),
multi: true
}
], viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["pickerContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"md-drppicker\"\n #pickerContainer\n [ngClass]=\"{\n ltr: locale.direction === 'ltr',\n rtl: this.locale.direction === 'rtl',\n shown: isShown || inline,\n hidden: !isShown && !inline,\n inline: inline,\n double: !singleDatePicker && showCalInRanges,\n 'show-ranges': rangesArray.length\n }\"\n [class]=\"'drops-' + drops + '-' + opens\">\n <ng-container *ngIf=\"rangesArray.length\">\n <div class=\"ranges\">\n <ul>\n <li *ngFor=\"let range of rangesArray\">\n <button\n type=\"button\"\n (click)=\"clickRange($event, range)\"\n [disabled]=\"disableRange(range)\"\n [ngClass]=\"{ active: range === chosenRange }\">\n {{ range }}\n </button>\n </li>\n </ul>\n </div>\n </ng-container>\n <div class=\"calendar\" [ngClass]=\"{ right: singleDatePicker, left: !singleDatePicker }\" *ngIf=\"showCalInRanges\">\n <div class=\"calendar-table\">\n <table class=\"table-condensed\" *ngIf=\"calendarVariables\">\n <thead>\n <tr>\n <th *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n <ng-container\n *ngIf=\"\n !calendarVariables.left.minDate ||\n (calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) &&\n (!this.linkedCalendars || true))\n \">\n <th (click)=\"clickPrev(sideEnum.left)\" class=\"prev available\"></th>\n </ng-container>\n <ng-container\n *ngIf=\"\n !(\n !calendarVariables.left.minDate ||\n (calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) &&\n (!this.linkedCalendars || true))\n )\n \">\n <th></th>\n </ng-container>\n <th colspan=\"5\" class=\"month drp-animate\">\n <ng-container *ngIf=\"showDropdowns && calendarVariables.left.dropdowns\">\n <div class=\"dropdowns\">\n {{ this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()] }}\n <select class=\"monthselect\" (chang