ngx-daterange
Version:
Date-Range Selector for Angular
636 lines (625 loc) • 49.6 kB
JavaScript
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, HostListener, Pipe, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as momentNs from 'moment';
import { isMoment } from 'moment';
import { extendMoment } from 'moment-range';
const moment = momentNs;
const { range } = extendMoment(moment);
class CalendarComponent {
constructor() {
this.singleCalendar = false;
this.dateChanged = new EventEmitter();
this.monthChanged = new EventEmitter();
this.yearChanged = new EventEmitter();
}
get monthText() {
return moment.monthsShort()[this.month];
}
ngOnChanges(changes) {
var _a;
// Set the right calendar month and year equal to the left calendar
// if the left calendar's date if after the right
if (!this.isLeft) {
let currentValue = (_a = changes === null || changes === void 0 ? void 0 : changes.selectedFromDate) === null || _a === void 0 ? void 0 : _a.currentValue;
if (currentValue) {
if (!moment.isMoment(currentValue)) {
currentValue = moment(currentValue);
}
const month = currentValue.month();
const year = currentValue.year();
if (year > this.year || (year === this.year && month > this.month)) {
this.month = month;
this.year = year;
}
}
}
this.createCalendarGridData();
}
getWeekNumbers(monthRange) {
const weekNumbers = [];
const weeks = Array.from(monthRange.by('weeks'));
for (let i = 0; i < weeks.length; i++) {
const week = weeks[i];
if (i < 6) {
weekNumbers.push(week.week());
}
else {
break;
}
}
return weekNumbers;
}
getWeeksRange(weeks) {
const weeksRange = [];
for (let i = 0; i < weeks.length; i++) {
const weekNumber = weeks[i];
let firstWeekDay = moment([this.year, this.month]).week(weekNumber).day(0);
let lastWeekDay = moment([this.year, this.month]).week(weekNumber).day(6);
// Set year to the next year if the week number is lower than the starting week
// this indicates that the week is in January of the next year
if (weekNumber < weeks[0]) {
firstWeekDay = moment([this.year + 1, 0]).week(weekNumber).day(0);
lastWeekDay = moment([this.year + 1, 0]).week(weekNumber).day(6);
}
weeksRange.push(range(firstWeekDay, lastWeekDay));
}
return weeksRange;
}
createCalendarGridData() {
const firstDay = moment([this.year, this.month]).startOf('month');
const endDay = moment([this.year, this.month]).endOf('month').add(1, 'week');
const monthRange = range(firstDay, endDay);
const weeksRange = this.getWeeksRange(this.getWeekNumbers(monthRange));
const weekList = [];
weeksRange === null || weeksRange === void 0 ? void 0 : weeksRange.map(week => {
const daysList = [];
Array.from(week.by('days')).forEach((day) => {
if (day.isSame(this.minDate, 'date')) {
day = this.minDate;
}
else if (day.isSame(this.maxDate, 'date')) {
day = this.maxDate;
}
;
daysList.push(day);
});
weekList.push(daysList);
});
this.weekList = weekList;
}
isDisabled(day) {
return (day.isBefore(this.minDate) || day.isAfter(this.maxDate)) || (day.isBefore(this.selectedFromDate) && !this.isLeft);
}
isDateAvailable(day) {
if (this.isLeft) {
return day.isSameOrBefore(this.selectedToDate, 'date') && !day.isSameOrBefore(this.minDate, 'date');
}
return day.isSameOrAfter(this.selectedFromDate, 'date') && !day.isSameOrAfter(this.maxDate, 'date');
}
isSelectedDate(day) {
const date = this.isLeft ? this.selectedFromDate : this.selectedToDate;
return date && day.isSame(date, 'date');
}
isDateInRange(day) {
if (this.selectedFromDate && this.selectedToDate) {
const selectedRange = range(this.selectedFromDate, this.selectedToDate);
return selectedRange.contains(day);
}
return false;
}
isDifferentMonth(day) {
return day.get('month') !== this.month;
}
dateSelected(event, data) {
const target = event.target;
if (!target.classList.contains('disabled')) {
this.dateChanged.emit({ day: data.day, isLeft: this.isLeft });
}
event.stopPropagation();
}
monthSelected(event, data) {
this.monthChanged.emit({ value: data.value, isLeft: this.isLeft });
event.stopPropagation();
}
yearSelected(event, data) {
this.yearChanged.emit({ value: data.value, isLeft: this.isLeft });
event.stopPropagation();
}
}
CalendarComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: 'calendar',
template: "<div class=\"row\">\n <div class=\"col text-center\">\n <div class=\"d-flex align-items-center calendar-pagination {{ icons === 'material' ? 'material' : '' }}\">\n <div>\n <button type=\"button\" class=\"btn btn-link btn-previous-year\" (click)=\"yearSelected($event, { value: -1 })\">\n <i *ngIf=\"icons === 'material'\" class=\"material-icons\">first_page</i>\n <i *ngIf=\"icons === 'font-awesome'\" class=\"fas fa-angle-double-left\"></i>\n <img *ngIf=\"icons === 'default'\" src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MDcuNDM2IDQwNy40MzYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwNy40MzYgNDA3LjQzNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMjY2LjQ1MiwyMS4xNzggMjQ1LjIwNCwwIDQyLjE0OSwyMDMuNzE4IDI0NS4yMDQsNDA3LjQzNiAyNjYuNDUyLDM4Ni4yNTggODQuNTA3LDIwMy43MTggICIgZmlsbD0iIzAwMDAwMCIvPgoJPHBvbHlnb24gcG9pbnRzPSIzNjUuMjg2LDIxLjE3OCAzNDQuMDM4LDAgMTQwLjk4MywyMDMuNzE4IDM0NC4wMzgsNDA3LjQzNiAzNjUuMjg2LDM4Ni4yNTggMTgzLjM0MSwyMDMuNzE4ICAiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K\" />\n </button>\n </div>\n <div>\n <button type=\"button\" class=\"btn btn-link btn-previous-month\" (click)=\"monthSelected($event, { value: -1 })\">\n <i *ngIf=\"icons === 'material'\" class=\"material-icons\">chevron_left</i>\n <i *ngIf=\"icons === 'font-awesome'\" class=\"fas fa-angle-left\"></i>\n <img *ngIf=\"icons === 'default'\" src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0NC41MzEgNDQ0LjUzMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjUzMSA0NDQuNTMxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTIxMy4xMywyMjIuNDA5TDM1MS44OCw4My42NTNjNy4wNS03LjA0MywxMC41NjctMTUuNjU3LDEwLjU2Ny0yNS44NDFjMC0xMC4xODMtMy41MTgtMTguNzkzLTEwLjU2Ny0yNS44MzUgICBsLTIxLjQwOS0yMS40MTZDMzIzLjQzMiwzLjUyMSwzMTQuODE3LDAsMzA0LjYzNywwcy0xOC43OTEsMy41MjEtMjUuODQxLDEwLjU2MUw5Mi42NDksMTk2LjQyNSAgIGMtNy4wNDQsNy4wNDMtMTAuNTY2LDE1LjY1Ni0xMC41NjYsMjUuODQxczMuNTIxLDE4Ljc5MSwxMC41NjYsMjUuODM3bDE4Ni4xNDYsMTg1Ljg2NGM3LjA1LDcuMDQzLDE1LjY2LDEwLjU2NCwyNS44NDEsMTAuNTY0ICAgczE4Ljc5NS0zLjUyMSwyNS44MzQtMTAuNTY0bDIxLjQwOS0yMS40MTJjNy4wNS03LjAzOSwxMC41NjctMTUuNjA0LDEwLjU2Ny0yNS42OTdjMC0xMC4wODUtMy41MTgtMTguNzQ2LTEwLjU2Ny0yNS45NzggICBMMjEzLjEzLDIyMi40MDl6IiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==\" />\n </button>\n </div>\n <div class=\"flex-grow-1 month-year\">\n {{ monthText }} {{ year }}\n </div>\n <div>\n <button type=\"button\" class=\"btn btn-link btn-next-month\" (click)=\"monthSelected($event, { value: 1 })\">\n <i *ngIf=\"icons === 'material'\" class=\"material-icons\">chevron_right</i>\n <i *ngIf=\"icons === 'font-awesome'\" class=\"fas fa-angle-right\"></i>\n <img *ngIf=\"icons === 'default'\" src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0NC44MTkgNDQ0LjgxOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjgxOSA0NDQuODE5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTM1Mi4wMjUsMTk2LjcxMkwxNjUuODg0LDEwLjg0OEMxNTkuMDI5LDMuNjE1LDE1MC40NjksMCwxNDAuMTg3LDBjLTEwLjI4MiwwLTE4Ljg0MiwzLjYxOS0yNS42OTcsMTAuODQ4TDkyLjc5MiwzMi4yNjQgICBjLTcuMDQ0LDcuMDQzLTEwLjU2NiwxNS42MDQtMTAuNTY2LDI1LjY5MmMwLDkuODk3LDMuNTIxLDE4LjU2LDEwLjU2NiwyNS45ODFsMTM4Ljc1MywxMzguNDczTDkyLjc4NiwzNjEuMTY4ICAgYy03LjA0Miw3LjA0My0xMC41NjQsMTUuNjA0LTEwLjU2NCwyNS42OTNjMCw5Ljg5NiwzLjUyMSwxOC41NjIsMTAuNTY0LDI1Ljk4bDIxLjcsMjEuNDEzICAgYzcuMDQzLDcuMDQzLDE1LjYxMiwxMC41NjQsMjUuNjk3LDEwLjU2NGMxMC4wODksMCwxOC42NTYtMy41MjEsMjUuNjk3LTEwLjU2NGwxODYuMTQ1LTE4NS44NjQgICBjNy4wNDYtNy40MjMsMTAuNTcxLTE2LjA4NCwxMC41NzEtMjUuOTgxQzM2Mi41OTcsMjEyLjMyMSwzNTkuMDcxLDIwMy43NTUsMzUyLjAyNSwxOTYuNzEyeiIgZmlsbD0iIzAwMDAwMCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=\" />\n </button>\n </div>\n <div>\n <button type=\"button\" class=\"btn btn-link btn-next-year\" (click)=\"yearSelected($event, { value: 1 })\">\n <i *ngIf=\"icons === 'material'\" class=\"material-icons\">last_page</i>\n <i *ngIf=\"icons === 'font-awesome'\" class=\"fas fa-angle-double-right\"></i>\n <img *ngIf=\"icons === 'default'\" src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MDcuNDM2IDQwNy40MzYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwNy40MzYgNDA3LjQzNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMTYyLjIzMSwwIDE0MC45ODMsMjEuMTc4IDMyMi45MjksMjAzLjcxOCAxNDAuOTgzLDM4Ni4yNTggMTYyLjIzMSw0MDcuNDM2IDM2NS4yODYsMjAzLjcxOCAgIiBmaWxsPSIjMDAwMDAwIi8+Cgk8cG9seWdvbiBwb2ludHM9IjYzLjM5NywwIDQyLjE0OSwyMS4xNzggMjI0LjA5NSwyMDMuNzE4IDQyLjE0OSwzODYuMjU4IDYzLjM5Nyw0MDcuNDM2IDI2Ni40NTIsMjAzLjcxOCAgIiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==\" />\n </button>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"row\">\n <div class=\"col\">\n <table class=\"table table-borderless mb-0 w-100\">\n <thead>\n <tr class=\"week-days\">\n <th>Sun</th>\n <th>Mon</th>\n <th>Tue</th>\n <th>Wed</th>\n <th>Thu</th>\n <th>Fri</th>\n <th>Sat</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let week of weekList; let i = index\">\n <td *ngFor=\"let day of weekList[i]\" (click)=\"dateSelected($event, { day: day })\" [attr.data-day]=\"day | date:'MM-dd-yyyy'\" [ngClass]=\"{ 'selected': isSelectedDate(day), 'in-selected-range': isDateInRange(day), 'disabled': isDisabled(day), 'different-month': isDifferentMonth(day) }\">\n {{ day.format('D') }}\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n</div>\n",
styles: [".calendar.calendar-single .table td.in-selected-range{background-color:transparent}.calendar .calendar-pagination{font-size:16px;margin:.5rem -15px 0}.calendar .calendar-pagination .btn,.calendar .calendar-pagination .btn-link{background-color:transparent;min-width:auto;width:auto}.calendar .calendar-pagination.material .btn.btn-previous-year{padding-right:3px}.calendar .calendar-pagination.material .btn.btn-previous-month{padding-left:0}.calendar .calendar-pagination.material .btn.btn-next-month{padding-right:0}.calendar .calendar-pagination.material .btn.btn-next-year{padding-left:3px}.calendar .calendar-pagination .month-year{font-weight:600}.calendar .week-days{text-transform:uppercase}.calendar .table td,.calendar .table th{border-radius:0;color:#333;font-size:12px;height:36px;line-height:1;padding:0;text-align:center;vertical-align:middle}.calendar .table th{font-weight:400}.calendar .table td{border-radius:5px;cursor:pointer;font-weight:900;max-width:32px;width:32px}.calendar .table td:not(.disabled):not(.selected):hover{background-color:#eee;color:#333}.calendar .table td.selected{color:#fff;font-size:12px}.calendar .table td.selected,.calendar .table td.selected.in-selected-range{background-color:#003d79;border-radius:5px}.calendar .table td.selected.different-month{color:#fff}.calendar .table td.selected:hover{background-color:#003d79}.calendar .table td.in-selected-range{background-color:#dfefff;border-radius:0;font-size:12px}.calendar .table td.disabled{background-color:transparent;color:#666;cursor:not-allowed;font-weight:400}.calendar .table td.different-month{color:#888;font-weight:500}.calendar .table td.different-month.disabled{color:#ccc}"]
},] }
];
CalendarComponent.propDecorators = {
month: [{ type: Input }],
year: [{ type: Input }],
selectedFromDate: [{ type: Input }],
selectedToDate: [{ type: Input }],
isLeft: [{ type: Input }],
format: [{ type: Input }],
minDate: [{ type: Input }],
maxDate: [{ type: Input }],
singleCalendar: [{ type: Input }],
icons: [{ type: Input }],
dateChanged: [{ type: Output }],
monthChanged: [{ type: Output }],
yearChanged: [{ type: Output }]
};
const defaultDateFormat = 'YYYY-MM-DD';
const defaultTimeFormat = 'HH:mm';
const defaultDateRangePickerOptions = {
autoApply: true,
clickOutsideAllowed: true,
disabled: false,
disableInputDisplay: false,
icons: 'default',
format: defaultDateFormat,
labelText: 'Date Range',
maxDate: null,
minDate: null,
position: 'left',
preDefinedRanges: [],
showResetButton: true,
singleCalendar: false,
};
const moment$1 = momentNs;
let instanceCount = 0;
class DateRangePickerComponent {
constructor() {
this.options = defaultDateRangePickerOptions;
this.controlName = 'dateRange';
this.instanceId = null;
this.fromDate = null;
this.toDate = null;
this.datepickerReset = new EventEmitter();
this.rangeSelected = new EventEmitter();
this.isMobile = false;
this.range = '';
this.showCalendars = false;
this.displayStyle = false;
if (!this.instanceId) {
// assign auto-id
this.instanceId = `dateRangePicker-${instanceCount++}`;
}
}
get enableApplyButton() {
let enabled = !this.options.autoApply && this.fromDate !== null;
if (this.options.singleCalendar) {
return enabled;
}
return enabled && this.toDate !== null;
}
handleClick(event) {
var _a;
const target = event.target;
// close the DatePicker if clicking outside is not allowed
if (!this.options.clickOutsideAllowed) {
let targetPathClassNames = [];
try {
targetPathClassNames = event.composedPath().map((obj) => obj['className']) || [''];
}
catch (error) {
// IE / Edge
targetPathClassNames = (_a = event['path']) === null || _a === void 0 ? void 0 : _a.map(obj => obj.className);
}
let containerElementClassRoot = this.options.modal === true ? 'dateRangePickerModal' : 'dateRangePicker';
const targetExistsInPath = targetPathClassNames === null || targetPathClassNames === void 0 ? void 0 : targetPathClassNames.some(className => {
if (typeof className === 'string') {
return className && className.includes(containerElementClassRoot);
}
return false;
});
if (!targetExistsInPath) {
this.toggleCalendarVisibility(false);
}
}
// Close the DatePicker if the target input was clicked
if (target.id === this.instanceId) {
this.toggleCalendarVisibility(!this.showCalendars);
}
}
ngOnInit() {
if (navigator) {
if (navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {
this.isMobile = true;
}
}
// ensure dates in options are valid
this.validateOptionDates();
// ensure input dates are within the min/max dates in options
this.validateInputDates();
if (this.options.preDefinedRanges && this.options.preDefinedRanges.length > 0) {
this.defaultRanges = this.validateAndAssignPredefinedRanges(this.options.preDefinedRanges);
}
// assign values not present in options with default values
const optionsKeys = Object.keys(this.options);
const defaultValuesKeys = Object.keys(defaultDateRangePickerOptions);
defaultValuesKeys.forEach((key) => {
if (!optionsKeys.includes(key)) {
this.options[key] = defaultDateRangePickerOptions[key];
}
});
// update calendar grid
this.updateCalendar();
// create parent form group if it doesn't exist
if (!this.parentFormGroup) {
this.parentFormGroup = new FormGroup({});
}
// add form control to parent form group
const value = this.formatRangeAsString();
const control = new FormControl({ value, disabled: this.options.disableInputDisplay }, this.options.validators);
if (this.options.disabled) {
control.disable();
}
this.parentFormGroup.addControl(this.controlName, control);
// set value of control
this.setRange();
}
validateInputDates() {
if (typeof this.fromDate === 'string') {
this.fromDate = moment$1(this.fromDate);
}
if (typeof this.toDate === 'string') {
this.toDate = moment$1(this.toDate);
}
if (this.fromDate && this.options.minDate && this.fromDate.isBefore(this.options.minDate, 'date')) {
throw new RangeError(' fromDate is before the specified minDate in options');
}
if (this.toDate && this.options.maxDate && this.toDate.isAfter(this.options.maxDate, 'date')) {
throw new RangeError(' toDate is after the specified maxDate in options');
}
}
validateOptionDates() {
// validate maxDate isn't before minDate or vice versa
if (this.options) {
if (this.options.minDate && this.options.maxDate) {
if (this.options.minDate.isAfter(this.options.maxDate, 'date')) {
throw new RangeError('minDate specified in options is after the maxDate');
}
else if (this.options.maxDate.isBefore(this.options.minDate, 'date')) {
throw new RangeError('maxDate specified in options is before the minDate');
}
}
}
}
// assists CSS to fix small positioning bug with From:/To: date text
checkChrome() {
return window['chrome'] ? 'is-chrome' : '';
}
toggleCalendarVisibility(value) {
if (this.options.modal === true) {
this.displayStyle = value !== null ? value === false ? false : true : this.showCalendars === false ? false : true;
}
else {
this.showCalendars = value !== null ? value : !this.showCalendars;
}
}
setFromToMonthYear(fromDate, toDate) {
let tempFromDate = fromDate || this.fromDate || moment$1();
let tempToDate = toDate || this.toDate || moment$1();
if (!(tempFromDate instanceof moment$1)) {
tempFromDate = moment$1(tempFromDate, defaultDateFormat);
}
if (!(tempToDate instanceof moment$1)) {
tempToDate = moment$1(tempToDate, defaultDateFormat);
}
this.fromMonth = tempFromDate.get('month');
this.fromYear = tempFromDate.get('year');
this.toMonth = tempToDate.get('month');
this.toYear = tempToDate.get('year');
}
updateCalendar() {
// get month and year to show calendar
this.setFromToMonthYear();
this.setRange();
}
// update from/to based on selection
dateChanged(changedData) {
const value = changedData.day;
const isLeft = changedData.isLeft;
if (isLeft) {
this.fromDate = value;
if (this.fromDate.isAfter(this.toDate, 'date')) {
this.toDate = this.fromDate.clone();
}
}
else {
this.toDate = value;
if (this.toDate.isBefore(this.fromDate, 'date')) {
this.fromDate = this.toDate.clone();
}
}
this.setFromToMonthYear(this.fromDate, this.toDate);
if (this.options.autoApply && (this.toDate || this.options.singleCalendar)) {
this.toggleCalendarVisibility(false);
this.setRange();
this.emitRangeSelected();
}
}
emitRangeSelected(data) {
if (!data) {
data = this.options.singleCalendar ? { start: this.fromDate } : { start: this.fromDate, end: this.toDate };
}
this.rangeSelected.emit(data);
}
getMoment(value) {
return moment$1(value, this.options.format);
}
formatRangeAsString() {
let range = '';
if (this.options.singleCalendar && this.fromDate) {
if (typeof this.fromDate === 'string') {
this.fromDate = moment$1(this.fromDate);
}
range = this.fromDate.format(this.options.format);
}
else if (!this.options.singleCalendar && this.fromDate && this.toDate) {
if (typeof this.fromDate === 'string') {
this.fromDate = moment$1(this.fromDate);
}
if (typeof this.toDate === 'string') {
this.toDate = moment$1(this.toDate);
}
range = `${this.fromDate.format(this.options.format)} - ${this.toDate.format(this.options.format)}`;
}
return range;
}
setRange() {
var _a;
this.range = this.formatRangeAsString();
if (this.parentFormGroup) {
const control = (_a = this.parentFormGroup) === null || _a === void 0 ? void 0 : _a.get(this.controlName);
if (control) {
control.setValue(this.range);
control.updateValueAndValidity();
}
}
}
setDateFromInput(event) {
const isLeft = event.isLeft;
const target = event.event.target;
try {
if (target.value) {
const day = this.getMoment(target.value);
if (!day.isBefore(this.options.minDate) && !day.isAfter(this.options.maxDate)) {
if (isLeft && !this.fromDate) {
this.fromDate = day;
}
if (!isLeft && !this.toDate) {
this.toDate = day;
}
this.dateChanged({
day,
isLeft,
});
if (this.fromDate && this.toDate) {
this.setFromToMonthYear(this.fromDate, this.toDate);
if (!this.options.autoApply) {
this.emitRangeSelected();
}
}
}
else {
// assume nothing - reset values
this.fromDate = null;
this.toDate = null;
target.value = '';
target.focus();
}
}
}
catch (e) {
console.error(e);
}
}
monthChanged(data) {
let temp;
if (data.isLeft) {
temp = moment$1([this.fromYear, this.fromMonth]).add(data.value, 'month');
this.fromMonth = temp === null || temp === void 0 ? void 0 : temp.get('month');
this.fromYear = temp === null || temp === void 0 ? void 0 : temp.get('year');
}
else {
temp = moment$1([this.toYear, this.toMonth]).add(data.value, 'month');
this.toMonth = temp === null || temp === void 0 ? void 0 : temp.get('month');
this.toYear = temp === null || temp === void 0 ? void 0 : temp.get('year');
}
}
yearChanged(data) {
let temp;
if (data.isLeft) {
temp = moment$1([this.fromYear, this.fromMonth]).add(data.value, 'year');
this.fromMonth = temp === null || temp === void 0 ? void 0 : temp.get('month');
this.fromYear = temp === null || temp === void 0 ? void 0 : temp.get('year');
}
else {
temp = moment$1([this.toYear, this.toMonth]).add(data.value, 'year');
this.toMonth = temp === null || temp === void 0 ? void 0 : temp.get('month');
this.toYear = temp === null || temp === void 0 ? void 0 : temp.get('year');
}
}
close(event) {
this.toggleCalendarVisibility(false);
event.stopPropagation();
}
reset(event) {
this.fromDate = null;
this.toDate = null;
this.setRange();
this.datepickerReset.emit();
event.stopPropagation();
}
apply(event) {
this.toggleCalendarVisibility(false);
this.setRange();
this.emitRangeSelected();
event.stopPropagation();
}
applyPredefinedRange(event) {
// adjust to/from month/year so calendar months and years match range
this.setFromToMonthYear(event.definedDateRange.value.start, event.definedDateRange.value.end);
this.fromDate = event.definedDateRange.value.start;
this.toDate = event.definedDateRange.value.end;
if (this.options.autoApply) {
this.apply(event.event);
}
}
validateAndAssignPredefinedRanges(ranges) {
return ranges.filter(range => {
if (range.value.start.isAfter(range.value.end, 'date')) {
throw new RangeError(`Pre-defined range "${range.name}" start date cannot be after the end date for the range.`);
}
if (this.options.minDate && range.value.start.isBefore(this.options.minDate)) {
throw new RangeError(`Pre-defined range "${range.name}" start date is before the specified minDate in your options.`);
}
if (this.options.maxDate && range.value.end.isAfter(this.options.maxDate)) {
throw new RangeError(`Pre-defined range "${range.name}" end date is after the specified maxDate in your options.`);
}
// add range to ranges
return true;
});
}
}
DateRangePickerComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.Emulated,
selector: 'date-range-picker',
template: "<div class=\"dateRangePicker-wrapper\" *ngIf=\"parentFormGroup\">\n <div #content>\n <ng-content></ng-content>\n </div>\n <div class=\"form-group\" [formGroup]=\"parentFormGroup\">\n <ng-container *ngIf=\"content.childNodes.length === 0\">\n <label [attr.for]=\"instanceId\">{{ options.labelText }}</label>\n <input [attr.id]=\"instanceId\" class=\"form-control\" type=\"text\" [formControlName]=\"controlName\">\n </ng-container>\n\n <div class=\"modal\" tabindex=\"-1\" role=\"dialog\" [ngClass]=\"{ 'modal-display': displayStyle}\">\n <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n <div class=\"modal-content\">\n <div class=\"modal-body\">\n <div [ngClass]=\"{'dateRangePickerModal': true, 'dateRangePicker-single': options.singleCalendar, 'is-chrome': checkChrome(), 'mobile': isMobile }\">\n <div class=\"container-fluid\">\n <div class=\"row\">\n <div class=\"col\">\n \n <!-- Manual Inputs -->\n <manual-inputs [options]=\"options\" [fromDate]=\"fromDate\" [toDate]=\"toDate\" [isMobile]=\"isMobile\" (dateFromInput)=\"setDateFromInput($event)\"></manual-inputs>\n \n <!-- Calendars -->\n <div class=\"row row-calendars\">\n <div [ngClass]=\"{ 'col-12': true, 'col-sm-6': !isMobile && !options.singleCalendar }\">\n <calendar [ngClass]=\"{ 'calendar': true, 'calendar-single': options.singleCalendar }\" [isLeft]=\"true\" [month]=\"fromMonth\" [year]=\"fromYear\" (monthChanged)=monthChanged($event) (yearChanged)=\"yearChanged($event)\" (dateChanged)=\"dateChanged($event)\" [format]=\"options.format\" [selectedFromDate]=\"fromDate\" [selectedToDate]=\"toDate\" [minDate]=\"options.minDate\" [maxDate]=\"options.maxDate\" [singleCalendar]=\"options.singleCalendar\" [icons]=\"options.icons\"></calendar>\n </div>\n \n <div [ngClass]=\"{ 'col-12': true, 'col-sm-6': !isMobile, 'col__mobile': isMobile }\" *ngIf=\"!options.singleCalendar\">\n <calendar class=\"calendar\" [month]=\"toMonth\" [year]=\"toYear\" [format]=\"options.format\" (dateChanged)=\"dateChanged($event)\" (monthChanged)=\"monthChanged($event)\" (yearChanged)=\"yearChanged($event)\" [selectedFromDate]=\"fromDate\" [selectedToDate]=\"toDate\" [minDate]=\"options.minDate\" [maxDate]=\"options.maxDate\" [icons]=\"options.icons\"></calendar>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Pre-Defined Date Ranges -->\n <predefined-date-ranges [options]=\"options\" [range]=\"range\" [enableApplyButton]=\"enableApplyButton\" (closeEvent)=\"close($event)\" (resetEvent)=\"reset($event)\" (applyEvent)=\"apply($event)\" (predefinedRange)=\"applyPredefinedRange($event)\"></predefined-date-ranges>\n \n </div>\n </div>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"close($event)\">Close</button>\n <button type=\"button\" class=\"btn btn-outline-secondary btn-sm ml-3\" (click)=\"reset($event)\" *ngIf=\"range && options.showResetButton\">Reset</button>\n <button type=\"button\" class=\"btn btn-primary btn-sm ml-3\" [disabled]=\"!enableApplyButton\" (click)=\"apply($event)\" *ngIf=\"!options.autoApply\">Apply</button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Desktop Browsers -->\n <div [ngClass]=\"{'dateRangePicker': true, 'invisible': !showCalendars, 'dateRangePicker-single': options.singleCalendar, 'is-chrome': checkChrome(), 'open-left': options.position === 'left', 'open-right': options.position === 'right', 'mobile': isMobile }\">\n <div class=\"container-fluid\">\n <div class=\"row\">\n <div class=\"col\">\n\n <!-- Manual Inputs -->\n <manual-inputs [options]=\"options\" [fromDate]=\"fromDate\" [toDate]=\"toDate\" [isMobile]=\"isMobile\" (dateFromInput)=\"setDateFromInput($event)\"></manual-inputs>\n\n <!-- Calendars -->\n <div class=\"row row-calendars\">\n <div [ngClass]=\"{ 'col-12': true, 'col-sm-6': !isMobile && !options.singleCalendar }\">\n <calendar [ngClass]=\"{ 'calendar': true, 'calendar-single': options.singleCalendar }\" [isLeft]=\"true\" [month]=\"fromMonth\" [year]=\"fromYear\" (monthChanged)=monthChanged($event) (yearChanged)=\"yearChanged($event)\" (dateChanged)=\"dateChanged($event)\" [format]=\"options.format\" [selectedFromDate]=\"fromDate\" [selectedToDate]=\"toDate\" [minDate]=\"options.minDate\" [maxDate]=\"options.maxDate\" [singleCalendar]=\"options.singleCalendar\" [icons]=\"options.icons\"></calendar>\n </div>\n\n <div [ngClass]=\"{ 'col-12': true, 'col-sm-6': !isMobile, 'col__mobile': isMobile }\" *ngIf=\"!options.singleCalendar\">\n <calendar class=\"calendar\" [month]=\"toMonth\" [year]=\"toYear\" [format]=\"options.format\" (dateChanged)=\"dateChanged($event)\" (monthChanged)=\"monthChanged($event)\" (yearChanged)=\"yearChanged($event)\" [selectedFromDate]=\"fromDate\" [selectedToDate]=\"toDate\" [minDate]=\"options.minDate\" [maxDate]=\"options.maxDate\" [icons]=\"options.icons\"></calendar>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Pre-Defined Date Ranges -->\n <predefined-date-ranges [options]=\"options\" [range]=\"range\" [enableApplyButton]=\"enableApplyButton\" (closeEvent)=\"close($event)\" (resetEvent)=\"reset($event)\" (applyEvent)=\"apply($event)\"></predefined-date-ranges>\n\n </div>\n </div>\n\n </div>\n</div>\n",
styles: [".dateRangePicker-wrapper{border:none;position:relative}.dateRangePicker-wrapper input.form-control[disabled]{background-color:#fff}.dateRangePicker-wrapper .modal-body{padding:0!important}.dateRangePicker-wrapper .modal{-webkit-backdrop-filter:brightness(50%);backdrop-filter:brightness(50%)}.dateRangePicker-wrapper .modal-display{display:flex}.dateRangePicker-wrapper .modal-display .modal-dialog{box-shadow:none;display:flex}.dateRangePicker-wrapper .modal-content{border:0;border-radius:8px;box-shadow:0 0 10px 0 rgba(129,139,144,.5);display:flex;width:602px}.dateRangePicker-wrapper .modal-content .modal-footer .btn{width:auto}.dateRangePicker-wrapper .dateRangePickerModal{border-top-left-radius:5px;border-top-right-radius:5px;font-family:Roboto,Helvetica,Arial,sans-serif;overflow:visible;z-index:3000}@media screen and (min-width:576px){.dateRangePicker-wrapper .dateRangePickerModal{min-width:600px}}.dateRangePicker-wrapper .dateRangePickerModal.dateRangePicker-single,.dateRangePicker-wrapper .dateRangePickerModal.mobile{min-width:300px}.dateRangePicker-wrapper .dateRangePickerModal.dateRangePicker-single:after,.dateRangePicker-wrapper .dateRangePickerModal.dateRangePicker-single:before,.dateRangePicker-wrapper .dateRangePickerModal.mobile:after,.dateRangePicker-wrapper .dateRangePickerModal.mobile:before{border-bottom-color:#fff}.dateRangePicker-wrapper .dateRangePickerModal.is-chrome .form-inputs .input-with-icon span{position:relative;top:1px}.dateRangePicker-wrapper .dateRangePickerModal .btn,.dateRangePicker-wrapper .dateRangePickerModal .btn.btn-link{min-width:60px;width:60px}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs{background-color:#6e777c;border-top-left-radius:5px;border-top-right-radius:5px;color:#fff;font-size:16px}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs>.col{min-width:270px;padding:.5rem 15px}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .input-with-icon{align-content:flex-start;align-items:center!important;display:flex}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .input-with-icon i{color:#fff;margin-right:.5rem}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .input-with-icon i.material-icons{top:0}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .input-with-icon span{line-height:1}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .form-control{background:none;border:0;color:#fff;display:inline-block;padding:0;width:150px}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .form-control::-moz-placeholder{color:#fff}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .form-control::placeholder{color:#fff}.dateRangePicker-wrapper .dateRangePickerModal .row-1s .col__mobile{border-top:1px dotted #ccc;margin-top:1rem}.dateRangePicker-wrapper .dateRangePickerModal:not(.mobile) .form-inputs>div:nth-child(2),.dateRangePicker-wrapper .dateRangePickerModal:not(.mobile) .row-calendars>div:nth-child(2){border-left:2px solid #c6d1d6}.dateRangePicker-wrapper .dateRangePicker{background:#fff;border-radius:9px;box-shadow:0 0 10px 0 rgba(129,139,144,.5);font-family:Roboto,Helvetica,Arial,sans-serif;overflow:visible;position:absolute;top:88px;z-index:3000}@media screen and (min-width:576px){.dateRangePicker-wrapper .dateRangePicker{min-width:600px}}.dateRangePicker-wrapper .dateRangePicker.dateRangePicker-single,.dateRangePicker-wrapper .dateRangePicker.mobile{min-width:300px}.dateRangePicker-wrapper .dateRangePicker.dateRangePicker-single:after,.dateRangePicker-wrapper .dateRangePicker.dateRangePicker-single:before,.dateRangePicker-wrapper .dateRangePicker.mobile:after,.dateRangePicker-wrapper .dateRangePicker.mobile:before{border-bottom-color:#fff}.dateRangePicker-wrapper .dateRangePicker:after,.dateRangePicker-wrapper .dateRangePicker:before{border-bottom:10px solid #6e777c;border-left:10px solid transparent;border-right:10px solid transparent;content:\"\";height:0;position:absolute;top:-10px;width:0}.dateRangePicker-wrapper .dateRangePicker.open-left{left:0}.dateRangePicker-wrapper .dateRangePicker.open-left:before{left:10px}.dateRangePicker-wrapper .dateRangePicker.open-left:after{display:none}.dateRangePicker-wrapper .dateRangePicker.open-right{right:0}.dateRangePicker-wrapper .dateRangePicker.open-right:before{display:none}.dateRangePicker-wrapper .dateRangePicker.open-right:after{right:10px}.dateRangePicker-wrapper .dateRangePicker.is-chrome .form-inputs .input-with-icon span{position:relative;top:1px}.dateRangePicker-wrapper .dateRangePicker .btn,.dateRangePicker-wrapper .dateRangePicker .btn.btn-link{min-width:auto;width:auto}.dateRangePicker-wrapper .dateRangePicker .form-inputs{background-color:#6e777c;border-top-left-radius:5px;border-top-right-radius:5px;color:#fff;font-size:16px}.dateRangePicker-wrapper .dateRangePicker .form-inputs>.col{min-width:270px;padding:.5rem 15px}.dateRangePicker-wrapper .dateRangePicker .form-inputs .input-with-icon{align-content:flex-start;align-items:center!important;display:flex}.dateRangePicker-wrapper .dateRangePicker .form-inputs .input-with-icon i{color:#fff;margin-right:.5rem}.dateRangePicker-wrapper .dateRangePicker .form-inputs .input-with-icon i.material-icons{top:0}.dateRangePicker-wrapper .dateRangePicker .form-inputs .input-with-icon span{line-height:1}.dateRangePicker-wrapper .dateRangePicker .form-inputs .form-control{background:none;border:0;color:#fff;display:inline-block;padding:0;width:150px}.dateRangePicker-wrapper .dateRangePicker .form-inputs .form-control::-moz-placeholder{color:#fff}.dateRangePicker-wrapper .dateRangePicker .form-inputs .form-control::placeholder{color:#fff}.dateRangePicker-wrapper .dateRangePicker .row-calendars .col__mobile{border-top:1px dotted #ccc;margin-top:1rem}.dateRangePicker-wrapper .dateRangePicker:not(.mobile) .form-inputs>div:nth-child(2),.dateRangePicker-wrapper .dateRangePicker:not(.mobile) .row-calendars>div:nth-child(2){border-left:2px solid #c6d1d6}.dateRangePicker-wrapper i.material-icons{position:relative;top:2px}"]
},] }
];
DateRangePickerComponent.ctorParameters = () => [];
DateRangePickerComponent.propDecorators = {
options: [{ type: Input }],
controlName: [{ type: Input }],
instanceId: [{ type: Input }],
parentFormGroup: [{ type: Input }],
fromDate: [{ type: Input }],
toDate: [{ type: Input }],
datepickerReset: [{ type: Output }],
rangeSelected: [{ type: Output }],
handleClick: [{ type: HostListener, args: ['document:click', ['$event'],] }]
};
const moment$2 = momentNs;
class FormatMomentDatePipe {
transform(value, format) {
let valueToFormat = value;
if (valueToFormat && !isMoment(valueToFormat)) {
valueToFormat = moment$2(valueToFormat);
}
return valueToFormat ? valueToFormat.format(format) : '';
}
}
FormatMomentDatePipe.decorators = [
{ type: Pipe, args: [{
name: 'formatMomentDate'
},] }
];
const moment$3 = momentNs;
class ManualInputsComponent {
constructor() {
this.fromDate = null;
this.toDate = null;
this.dateFromInput = new EventEmitter();
}
ngOnInit() {
}
setDateFromInput(event, isLeft = false) {
this.dateFromInput.emit({ event, isLeft });
}
}
ManualInputsComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.Emulated,
selector: 'manual-inputs',
template: "<ng-container *ngIf=\"!isMobile\">\n\n\t<div class=\"row form-inputs mb-0\" *ngIf=\"!options.singleCalendar\">\n\t\t<div class=\"col\">\n\t\t\t<div *ngIf=\"options.icons !== 'default'\">\n\t\t\t\t<div [ngClass]=\"{ 'd-flex align-items-center input-with-icon': true, 'material': options.icons === 'material' }\">\n\t\t\t\t\t<i *ngIf=\"options.icons === 'material'\" class=\"material-icons\">event</i>\n\t\t\t\t\t<i *ngIf=\"options.icons === 'font-awesome'\" class=\"far fa-calendar-alt\"></i>\n\t\t\t\t\t<span *ngIf=\"fromDate\">From: </span>\n\t\t\t\t\t<input class=\"form-control\" [ngModel]=\"fromDate | formatMomentDate: options.format\" (blur)=\"setDateFromInput($event, true)\" type=\"text\" name=\"daterangepicker_start\" [ngModelOptions]=\"{ standalone: true }\" placeholder=\"Select From Date\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\n\t\t\t<input *ngIf=\"options.icons === 'default'\" class=\"form-control\" [ngModel]=\"fromDate | formatMomentDate: options.format\" (blur)=\"setDateFromInput($event, true)\" type=\"text\" name=\"daterangepicker_start\" [ngModelOptions]=\"{standalone: true}\" placeholder=\"Select From Date\" />\n\t\t</div>\n\t\n\t\t<div class=\"col\">\n\t\t\t<div *ngIf=\"options.icons !== 'default'\">\n\t\t\t\t\t<div [ngClass]=\"{ 'd-flex align-items-center input-with-icon': true, 'material': options.icons === 'material' }\">\n\t\t\t\t\t\t<i *ngIf=\"options.icons === 'material'\" class=\"material-icons\">event</i>\n\t\t\t\t\t\t<i *ngIf=\"options.icons === 'font-awesome'\" class=\"far fa-calendar-alt\"></i>\n\t\t\t\t\t\t<span *ngIf=\"toDate\">To: </span>\n\t\t\t\t\t\t<input class=\"form-control\" [ngModel]=\"toDate | formatMomentDate: options.format\" (blur)=\"setDateFromInput($event)\" type=\"text\" name=\"daterangepicker_end\" [ngModelOptions]=\"{ standalone: true }\" placeholder=\"Select To Date\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\n\t\t\t<input *ngIf=\"options.icons === 'default'\" class=\"form-control\" [ngModel]=\"toDate | formatMomentDate: options.format\" (blur)=\"setDateFromInput($event)\" name=\"daterangepicker_end\" [ngModelOptions]=\"{standalone: true}\" />\n\t\t</div>\n\t</div>\n</ng-container>",
styles: [".is-chrome .form-inputs .input-with-icon span{position:relative;top:1px}.form-inputs{background-color:#6e777c;border-top-left-radius:8px;border-top-right-radius:8px;color:#fff;font-size:16px}.form-inputs>.col{min-width:270px;padding:.5rem 15px}.form-inputs .input-with-icon{align-content:flex-start;align-items:center!important;display:flex}.form-inputs .input-with-icon i{color:#fff;margin-right:.5rem}.form-inputs .input-with-icon i.material-icons{top:0}.form-inputs .input-with-icon span{line-height:1}.form-inputs .form-control{background:none;border:0;color:#fff;display:inline-block;padding:0;width:150px}.form-inputs .form-control::-moz-placeholder{color:#fff}.form-inputs .form-control::placeholder{color:#fff}:not(.mobile) .form-inputs>div:nth-child(2),:not(.mobile) .row-calendars>div:nth-child(2){border-left:2px solid #c6d1d6}"]
},] }
];
ManualInputsComponent.ctorParameters = () => [];
ManualInputsComponent.propDecorators = {
options: [{ type: Input }],
fromDate: [{ type: Input }],
toDate: [{ type: Input }],
isMobile: [{ type: Input }],
dateFromInput: [{ type: Output }]
};
class PredefinedDateRangesComponent {
constructor() {
this.closeEvent = new EventEmitter();
this.resetEvent = new EventEmitter();
this.applyEvent = new EventEmitter();
this.predefinedRange = new EventEmitter();
}
ngOnInit() {
}
applyPredefinedRange(event, definedDateRange) {
this.predefinedRange.emit({ event: event, definedDateRange: definedDateRange });
}
close(event) {
this.closeEvent.emit(event);
event.stopPropagation();
}
reset(event) {
this.resetEvent.emit(event);
event.stopPropagation();
}
apply(event) {
this.applyEvent.emit(event);
event.stopPropagation();
}
}
PredefinedDateRangesComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.Emulated,
selector: 'predefined-date-ranges',
template: "<div class=\"row text-center my-3\">\n\t<div class=\"col\">\n\t\t<div class=\"row mb-2\" *ngIf=\"!options.singleCalendar && options.preDefinedRanges && options.preDefinedRanges.length > 0\">\n\t\t\t<div class=\"col\">\n\t\t\t\t<button type=\"button\" *ngFor=\"let range of options.preDefinedRanges\" class=\"btn btn-link\" (click)=\"applyPredefinedRange($event, range)\">{{ range.name }}</button>\n\t\t\t</div>\n\t\t</div>\n\t\t<ng-container *ngIf=\"!options.modal\">\n\t\t\t<button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"close($event)\">Close</button>\n\t\t\t<button type=\"button\" class=\"btn btn-outline-secondary btn-sm ml-3\" (click)=\"reset($event)\" *ngIf=\"range && options.showResetButton\">Reset</button>\n\t\t\t<button type=\"button\" class=\"btn btn-primary btn-sm ml-3\" [disabled]=\"!enableApplyButton\" (click)=\"apply($event)\" *ngIf=\"!options.autoApply\">Apply</button>\n\t\t</ng-container>\n\t</div>\n</div>",
styles: [".btn,.btn.btn-link{min-width:60px}"]
},] }
];
PredefinedDateRangesComponent.ctorParameters = () => [];
PredefinedDateRangesComponent.propDecorators = {
options: [{ type: Input }],
range: [{ type: Input }],
enableApplyButton: [{ type: Input }],
closeEvent: [{ type: Output }],
resetEvent: [{ type: Output }],
applyEvent: [{ type: Output }],
predefinedRange: [{ type: Output }]
};
const declarations = [
CalendarComponent,
DateRangePickerComponent,
FormatMomentDatePipe,
ManualInputsComponent,
PredefinedDateRangesComponent
];
class NgxDateRangeModule {
}
NgxDateRangeModule.decorators = [
{ type: NgModule, args: [{
declarations: [...declarations],
exports: [...declarations],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
],
},] }
];
/**
* Generated bundle index. Do not edit.
*/
export { CalendarComponent, DateRangePickerComponent, NgxDateRangeModule, FormatMomentDatePipe as ɵa, ManualInputsComponent as ɵb, PredefinedDateRangesComponent as ɵc };
//# sourceMappingURL=ngx-daterange.js.map