@uiowa/date-range-picker
Version:
An Angular library for date range picker.
334 lines (326 loc) • 27.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, input, computed, model, linkedSignal, inject, ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i1 from '@ng-bootstrap/ng-bootstrap';
import { NgbDateParserFormatter, NgbDate, NgbCalendar, NgbInputDatepicker, NgbDateNativeAdapter } from '@ng-bootstrap/ng-bootstrap';
/**
* This Service handles how the date is rendered and parsed from keyboard i.e. in the bound input field.
*/
class NativeDateParserFormatter extends NgbDateParserFormatter {
parse(value) {
if (value) {
const date = new Date(value);
if (date instanceof Date && !isNaN(date.valueOf())) {
return {
day: date.getDate(),
month: date.getMonth() + 1,
year: date.getFullYear(),
};
}
}
return null;
}
format(date) {
return date
? new Date(date.year, date.month - 1, date.day).toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})
: '';
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NativeDateParserFormatter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NativeDateParserFormatter });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NativeDateParserFormatter, decorators: [{
type: Injectable
}] });
class DatePicker {
dateAdapter;
idFromInput = input('', { ...(ngDevMode ? { debugName: "idFromInput" } : {}), alias: 'id' });
id = computed(() => this.idFromInput() || `date-picker-` + Math.random().toString(36).substring(4), ...(ngDevMode ? [{ debugName: "id" }] : []));
date = model(null, ...(ngDevMode ? [{ debugName: "date" }] : []));
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
ngbMinDate = computed(() => {
const min = this.minDate();
return min ? this.dateAdapter.fromModel(min) : { year: 2000, month: 1, day: 1 };
}, ...(ngDevMode ? [{ debugName: "ngbMinDate" }] : []));
maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
ngbMaxDate = computed(() => {
const max = this.maxDate();
return max ? this.dateAdapter.fromModel(max) : { year: 2099, month: 12, day: 31 };
}, ...(ngDevMode ? [{ debugName: "ngbMaxDate" }] : []));
isInvalid = input(false, ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
allowClear = input(false, ...(ngDevMode ? [{ debugName: "allowClear" }] : []));
ngbDate = linkedSignal(() => this.date() ? NgbDate.from(this.dateAdapter.fromModel(this.date())) : null, ...(ngDevMode ? [{ debugName: "ngbDate" }] : []));
today = inject(NgbCalendar).getToday();
constructor(dateAdapter) {
this.dateAdapter = dateAdapter;
}
onDateChange(date) {
const newDate = this.dateAdapter.toModel(date);
if (newDate)
this.date.set(newDate);
}
isWeekend(date) {
const d = new Date(date.year, date.month - 1, date.day);
return d.getDay() === 0 || d.getDay() === 6;
}
isDisabled = (date) => date.after(this.ngbMaxDate()) || date.before(this.ngbMinDate());
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DatePicker, deps: [{ token: i1.NgbDateNativeAdapter }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: DatePicker, isStandalone: true, selector: "date-picker", inputs: { idFromInput: { classPropertyName: "idFromInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, providers: [
NgbDateNativeAdapter,
{ provide: NgbDateParserFormatter, useClass: NativeDateParserFormatter },
], ngImport: i0, template: "<div class=\"input-group\">\r\n <input\r\n ngbDatepicker\r\n #d=\"ngbDatepicker\"\r\n class=\"form-control\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n name=\"dp\"\r\n [attr.id]=\"id()\"\r\n [(ngModel)]=\"ngbDate\"\r\n (click)=\"d.toggle()\"\r\n [disabled]=\"disabled()\"\r\n [minDate]=\"ngbMinDate()\"\r\n [maxDate]=\"ngbMaxDate()\"\r\n [markDisabled]=\"isDisabled\"\r\n [firstDayOfWeek]=\"7\"\r\n [dayTemplate]=\"dayTemplate\"\r\n [footerTemplate]=\"footerTemplate\"\r\n readonly\r\n (keydown.enter)=\"d.toggle()\"\r\n (dateSelect)=\"onDateChange($event)\"\r\n style=\"max-width: 13rem; cursor: pointer\"\r\n title=\"click to select a date\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-outline-secondary\"\r\n (click)=\"d.toggle()\"\r\n [disabled]=\"disabled()\"\r\n >\r\n \uD83D\uDCC5\r\n </button>\r\n</div>\r\n\r\n<ng-template\r\n #dayTemplate\r\n let-date=\"date\"\r\n let-today=\"today\"\r\n let-selected=\"selected\"\r\n let-disabled=\"disabled\"\r\n let-focused=\"focused\"\r\n let-currentMonth=\"currentMonth\"\r\n>\r\n <span\r\n class=\"custom-day\"\r\n [class.weekend]=\"isWeekend(date)\"\r\n [class.today]=\"today\"\r\n [class.focused]=\"focused\"\r\n [class.bg-primary]=\"selected\"\r\n [class.text-white]=\"selected\"\r\n [class.disabled]=\"disabled\"\r\n [class.outside]=\"date.month !== currentMonth\"\r\n >\r\n {{ date.day }}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n <hr class=\"my-0\" />\r\n <button\r\n class=\"btn btn-primary btn-sm m-2 float-start\"\r\n (click)=\"ngbDate.set(today); onDateChange(today); d.close()\"\r\n >\r\n Today\r\n </button>\r\n @if(allowClear()){\r\n <button\r\n class=\"btn btn-secondary btn-sm m-2 float-end\"\r\n (click)=\"ngbDate.set(null); date.set(null); d.close()\"\r\n >\r\n Clear\r\n </button>\r\n }\r\n</ng-template>\r\n", styles: [".custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem;border-radius:.5rem}.custom-day:hover,.custom-day.focused{background-color:#e6e6e6}.custom-day.today{border:1px solid #0d6efd}.custom-day.weekend{color:#d81e1e}.custom-day.disabled{color:#c8cdd2}.custom-day.outside{opacity:.5}svg{width:1rem;height:1rem}.form-control[readonly]{background-color:#fdfdfd!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DatePicker, decorators: [{
type: Component,
args: [{ selector: 'date-picker', imports: [FormsModule, NgbInputDatepicker], providers: [
NgbDateNativeAdapter,
{ provide: NgbDateParserFormatter, useClass: NativeDateParserFormatter },
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"input-group\">\r\n <input\r\n ngbDatepicker\r\n #d=\"ngbDatepicker\"\r\n class=\"form-control\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n name=\"dp\"\r\n [attr.id]=\"id()\"\r\n [(ngModel)]=\"ngbDate\"\r\n (click)=\"d.toggle()\"\r\n [disabled]=\"disabled()\"\r\n [minDate]=\"ngbMinDate()\"\r\n [maxDate]=\"ngbMaxDate()\"\r\n [markDisabled]=\"isDisabled\"\r\n [firstDayOfWeek]=\"7\"\r\n [dayTemplate]=\"dayTemplate\"\r\n [footerTemplate]=\"footerTemplate\"\r\n readonly\r\n (keydown.enter)=\"d.toggle()\"\r\n (dateSelect)=\"onDateChange($event)\"\r\n style=\"max-width: 13rem; cursor: pointer\"\r\n title=\"click to select a date\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-outline-secondary\"\r\n (click)=\"d.toggle()\"\r\n [disabled]=\"disabled()\"\r\n >\r\n \uD83D\uDCC5\r\n </button>\r\n</div>\r\n\r\n<ng-template\r\n #dayTemplate\r\n let-date=\"date\"\r\n let-today=\"today\"\r\n let-selected=\"selected\"\r\n let-disabled=\"disabled\"\r\n let-focused=\"focused\"\r\n let-currentMonth=\"currentMonth\"\r\n>\r\n <span\r\n class=\"custom-day\"\r\n [class.weekend]=\"isWeekend(date)\"\r\n [class.today]=\"today\"\r\n [class.focused]=\"focused\"\r\n [class.bg-primary]=\"selected\"\r\n [class.text-white]=\"selected\"\r\n [class.disabled]=\"disabled\"\r\n [class.outside]=\"date.month !== currentMonth\"\r\n >\r\n {{ date.day }}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n <hr class=\"my-0\" />\r\n <button\r\n class=\"btn btn-primary btn-sm m-2 float-start\"\r\n (click)=\"ngbDate.set(today); onDateChange(today); d.close()\"\r\n >\r\n Today\r\n </button>\r\n @if(allowClear()){\r\n <button\r\n class=\"btn btn-secondary btn-sm m-2 float-end\"\r\n (click)=\"ngbDate.set(null); date.set(null); d.close()\"\r\n >\r\n Clear\r\n </button>\r\n }\r\n</ng-template>\r\n", styles: [".custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem;border-radius:.5rem}.custom-day:hover,.custom-day.focused{background-color:#e6e6e6}.custom-day.today{border:1px solid #0d6efd}.custom-day.weekend{color:#d81e1e}.custom-day.disabled{color:#c8cdd2}.custom-day.outside{opacity:.5}svg{width:1rem;height:1rem}.form-control[readonly]{background-color:#fdfdfd!important}\n"] }]
}], ctorParameters: () => [{ type: i1.NgbDateNativeAdapter }], propDecorators: { idFromInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }] } });
/**
* DateRange Type represents start date and end date.
*/
class DateRange {
start;
end;
/**
* Examples:
```typescript
const d1 = new DateRange();
const d2 = new DateRange(new Date(), new Date(2018, 9, 10));
```
* @param start [Optional] Start Date. Default: null.
* @param end [Optional] End Date. Default: null
*/
constructor(start = null, end = null) {
this.start = start;
this.end = end;
}
/**
* Examples:
```typescript
const d1 = DateRange.nextDays(7);
// a date range of next week since today
```
* @param n Number of days after today.
*/
static nextDays(n) {
const start = new Date();
const end = new Date();
end.setDate(end.getDate() + n);
return new DateRange(start, end);
}
/**
* Examples:
```typescript
const d1 = DateRange.lastDays(7);
// a date range of a week before today
```
* @param n Number of days before today.
*/
static lastDays(n) {
const start = new Date();
start.setDate(start.getDate() - n);
const end = new Date();
return new DateRange(start, end);
}
/**
* Examples:
```typescript
const d1 = DateRange.nextTwoWeeks();
// a date range of next two weeks since today
```
*/
static nextTwoWeeks() {
return DateRange.nextDays(14);
}
/**
* Examples:
```typescript
const d1 = DateRange.nextMonth();
// a date range of next month since today
```
*/
static nextMonth() {
const start = new Date();
const end = new Date();
end.setMonth(end.getMonth() + 1);
return new DateRange(start, end);
}
/**
* Examples:
```typescript
const d1 = DateRange.lastMonth();
// a date range of last month till today
```
*/
static lastMonth() {
const start = new Date();
const end = new Date();
start.setMonth(start.getMonth() - 1);
return new DateRange(start, end);
}
/**
* Examples:
```typescript
const d1 = DateRange.create({});
```
* @param start start date of range you're creating
* @param end end date of range you're creating
*/
static create(start, end) {
let startDate = null;
let endDate = null;
if (isValidDate(start)) {
startDate = new Date(start);
}
if (isValidDate(end)) {
endDate = new Date(end);
}
return new DateRange(startDate, endDate);
}
/**
* Examples:
```typescript
const a = new DateRange();
const isEqual = a.equals(new DateRange());
```
* @param dateRange another DateRange object
*/
equals(dateRange) {
if (!dateRange) {
return false;
}
return dateEqual(dateRange.start, this.start) && dateEqual(dateRange.end, this.end);
}
toString() {
return `${this.start?.toLocaleDateString()} - ${this.end?.toLocaleDateString()}`;
}
}
/**
*
* @param date1 a Date object or NULL
* @param date2 a Date object or NULL
*/
function dateEqual(date1, date2) {
if (date1 === null) {
return date2 === null;
}
else if (date2 === null) {
return false;
}
const d1 = date1 instanceof Date ? date1 : new Date(date1);
const d2 = date2 instanceof Date ? date2 : new Date(date2);
return d1.toLocaleDateString() === d2.toLocaleDateString();
}
/**
* Examples:
```typescript
const isValid = DateRange.isValidDate(new Date());
```
* @param value date you want to verify as date
*/
function isValidDate(value) {
if (!value) {
return false;
}
switch (typeof value) {
case 'number':
return true;
case 'string':
return !isNaN(Date.parse(value));
default:
if (value instanceof Date) {
return !isNaN(value.getTime());
}
return false;
}
}
class DateRangePicker {
dateAdapter;
idFromInput = input('', { ...(ngDevMode ? { debugName: "idFromInput" } : {}), alias: 'id' });
id = computed(() => this.idFromInput() || `date-range-picker-` + Math.random().toString(36).substring(4), ...(ngDevMode ? [{ debugName: "id" }] : []));
dateRange = model(new DateRange(), ...(ngDevMode ? [{ debugName: "dateRange" }] : []));
fromDate = linkedSignal(() => this.dateRange().start
? NgbDate.from(this.dateAdapter.fromModel(this.dateRange().start))
: null, ...(ngDevMode ? [{ debugName: "fromDate" }] : []));
toDate = linkedSignal(() => this.dateRange().end ? NgbDate.from(this.dateAdapter.fromModel(this.dateRange().end)) : null, ...(ngDevMode ? [{ debugName: "toDate" }] : []));
minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
min = computed(() => this.minDate() ? NgbDate.from(this.dateAdapter.fromModel(this.minDate())) : null, ...(ngDevMode ? [{ debugName: "min" }] : []));
max = computed(() => this.maxDate() ? NgbDate.from(this.dateAdapter.fromModel(this.maxDate())) : null, ...(ngDevMode ? [{ debugName: "max" }] : []));
maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
hoveredDate = null;
dp = viewChild(NgbInputDatepicker, ...(ngDevMode ? [{ debugName: "dp" }] : []));
constructor(dateAdapter) {
this.dateAdapter = dateAdapter;
}
ngAfterViewInit() {
this.formatInputText();
if (this.fromDate()) {
this.dp().startDate = {
year: this.fromDate().year,
month: this.fromDate().month,
};
}
}
onDateChange(date, dp) {
if (!this.fromDate() && !this.toDate()) {
this.fromDate.set(date);
}
else if (this.fromDate() && !this.toDate() && date.after(this.fromDate())) {
this.toDate.set(date);
dp.close();
}
else {
this.toDate.set(null);
this.fromDate.set(date);
}
this.dateRange.set(new DateRange(this.dateAdapter.toModel(this.fromDate()), this.dateAdapter.toModel(this.toDate())));
}
formatInputText = computed(() => {
let text = '';
if (this.dateRange().start &&
this.dateRange().end &&
isValidDate(this.dateRange().start) &&
isValidDate(this.dateRange().end)) {
text = this.dateRange().toString();
}
return text;
}, ...(ngDevMode ? [{ debugName: "formatInputText" }] : []));
isHovered(date) {
return (this.fromDate &&
!this.toDate &&
this.hoveredDate &&
date.after(this.fromDate()) &&
date.before(this.hoveredDate));
}
isInside = (date) => date.after(this.fromDate()) && date.before(this.toDate());
isFrom = (date) => date.equals(this.fromDate());
isTo = (date) => date.equals(this.toDate());
isWeekend(date) {
const d = new Date(date.year, date.month - 1, date.day);
return d.getDay() === 0 || d.getDay() === 6;
}
isDisabled = (date) => date.after(this.max()) || date.before(this.min());
isInFuture = (date) => date.after(this.toDate());
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DateRangePicker, deps: [{ token: i1.NgbDateNativeAdapter }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.5", type: DateRangePicker, isStandalone: true, selector: "date-range-picker", inputs: { idFromInput: { classPropertyName: "idFromInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateRange: "dateRangeChange" }, providers: [NgbDateNativeAdapter], viewQueries: [{ propertyName: "dp", first: true, predicate: NgbInputDatepicker, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"input-group\">\r\n <input\r\n ngbDatepicker\r\n #dp=\"ngbDatepicker\"\r\n type=\"text\"\r\n class=\"form-control\"\r\n style=\"max-width: 13rem; cursor: pointer\"\r\n readonly\r\n [attr.id]=\"id()\"\r\n [disabled]=\"disabled()\"\r\n autoClose=\"outside\"\r\n [displayMonths]=\"2\"\r\n [dayTemplate]=\"t\"\r\n [showWeekNumbers]=\"false\"\r\n [markDisabled]=\"isDisabled\"\r\n [firstDayOfWeek]=\"7\"\r\n (click)=\"dp.toggle()\"\r\n (keydown.enter)=\"dp.toggle()\"\r\n (dateSelect)=\"onDateChange($event, dp)\"\r\n title=\"click to select a date range\"\r\n [value]=\"formatInputText()\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-outline-secondary d-flex align-items-center\"\r\n (click)=\"dp.toggle()\"\r\n [disabled]=\"disabled()\"\r\n >\r\n \uD83D\uDCC5\r\n </button>\r\n</div>\r\n\r\n<ng-template\r\n #t\r\n let-date=\"date\"\r\n let-today=\"today\"\r\n let-focused=\"focused\"\r\n let-disabled=\"disabled\"\r\n let-currentMonth=\"currentMonth\"\r\n>\r\n <span\r\n class=\"custom-day\"\r\n [class.focused]=\"focused\"\r\n [class.range]=\"isFrom(date) || isTo(date) || isInside(date) || isHovered(date)\"\r\n [class.faded]=\"isHovered(date) || isInside(date)\"\r\n [class.weekend]=\"isWeekend(date)\"\r\n [class.today]=\"today\"\r\n [class.disabled]=\"disabled\"\r\n [class.outside]=\"date.month !== currentMonth\"\r\n (mouseenter)=\"hoveredDate = date\"\r\n (mouseleave)=\"hoveredDate = null\"\r\n >\r\n {{ date.day }}\r\n </span>\r\n</ng-template>\r\n", styles: [".custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.today{border:1px solid #0d6efd}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:#0275d8;color:#fff}.custom-day.faded{background-color:#0275d880}.custom-day.weekend{color:#d81e1e}.custom-day.disabled{color:#c8cdd2}.custom-day.outside{opacity:.5}svg{width:1rem;height:1rem}.form-control[readonly]{background-color:#fdfdfd!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DateRangePicker, decorators: [{
type: Component,
args: [{ selector: 'date-range-picker', imports: [FormsModule, NgbInputDatepicker], providers: [NgbDateNativeAdapter], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"input-group\">\r\n <input\r\n ngbDatepicker\r\n #dp=\"ngbDatepicker\"\r\n type=\"text\"\r\n class=\"form-control\"\r\n style=\"max-width: 13rem; cursor: pointer\"\r\n readonly\r\n [attr.id]=\"id()\"\r\n [disabled]=\"disabled()\"\r\n autoClose=\"outside\"\r\n [displayMonths]=\"2\"\r\n [dayTemplate]=\"t\"\r\n [showWeekNumbers]=\"false\"\r\n [markDisabled]=\"isDisabled\"\r\n [firstDayOfWeek]=\"7\"\r\n (click)=\"dp.toggle()\"\r\n (keydown.enter)=\"dp.toggle()\"\r\n (dateSelect)=\"onDateChange($event, dp)\"\r\n title=\"click to select a date range\"\r\n [value]=\"formatInputText()\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-outline-secondary d-flex align-items-center\"\r\n (click)=\"dp.toggle()\"\r\n [disabled]=\"disabled()\"\r\n >\r\n \uD83D\uDCC5\r\n </button>\r\n</div>\r\n\r\n<ng-template\r\n #t\r\n let-date=\"date\"\r\n let-today=\"today\"\r\n let-focused=\"focused\"\r\n let-disabled=\"disabled\"\r\n let-currentMonth=\"currentMonth\"\r\n>\r\n <span\r\n class=\"custom-day\"\r\n [class.focused]=\"focused\"\r\n [class.range]=\"isFrom(date) || isTo(date) || isInside(date) || isHovered(date)\"\r\n [class.faded]=\"isHovered(date) || isInside(date)\"\r\n [class.weekend]=\"isWeekend(date)\"\r\n [class.today]=\"today\"\r\n [class.disabled]=\"disabled\"\r\n [class.outside]=\"date.month !== currentMonth\"\r\n (mouseenter)=\"hoveredDate = date\"\r\n (mouseleave)=\"hoveredDate = null\"\r\n >\r\n {{ date.day }}\r\n </span>\r\n</ng-template>\r\n", styles: [".custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.today{border:1px solid #0d6efd}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:#0275d8;color:#fff}.custom-day.faded{background-color:#0275d880}.custom-day.weekend{color:#d81e1e}.custom-day.disabled{color:#c8cdd2}.custom-day.outside{opacity:.5}svg{width:1rem;height:1rem}.form-control[readonly]{background-color:#fdfdfd!important}\n"] }]
}], ctorParameters: () => [{ type: i1.NgbDateNativeAdapter }], propDecorators: { idFromInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], dateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRange", required: false }] }, { type: i0.Output, args: ["dateRangeChange"] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dp: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgbInputDatepicker), { isSignal: true }] }] } });
/*
* Public API Surface of date-range-picker
*/
/**
* Generated bundle index. Do not edit.
*/
export { DatePicker, DateRange, DateRangePicker, dateEqual, isValidDate };
//# sourceMappingURL=uiowa-date-range-picker.mjs.map