@uiowa/date-range-picker
Version:
An Angular library for date range picker.
455 lines (445 loc) • 32 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, ElementRef, Component, ChangeDetectionStrategy, Input, Output, ViewChild, Injectable, Pipe, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i1 from '@ng-bootstrap/ng-bootstrap';
import { NgbDate, NgbDateParserFormatter, NgbDatepickerModule, NgbDateNativeAdapter } from '@ng-bootstrap/ng-bootstrap';
/**
* DateRange Type represents start date and end date.
*/
class DateRange {
/**
* 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 (DateRange.isValidDate(start)) {
startDate = new Date(start);
}
if (DateRange.isValidDate(end)) {
endDate = new Date(end);
}
return new DateRange(startDate, endDate);
}
/**
* Examples:
```typescript
const isValid = DateRange.isValidDate(new Date());
```
* @param value date you want to verify as date
*/
static 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;
}
}
/**
* Examples:
```typescript
const a = new DateRange();
const isEqual = a.equals(new DateRange());
```
* @param dateRange another DateRange object
*/
equals(dateRange) {
if (!dateRange) {
return false;
}
return (DateRange.dateEqual(dateRange.start, this.start) &&
DateRange.dateEqual(dateRange.end, this.end));
}
/**
*
* @param date1 a Date object or NULL
* @param date2 a Date object or NULL
*/
static 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();
}
}
class DateRangePickerComponent {
constructor(dateAdapter) {
this.dateAdapter = dateAdapter;
this.id = '';
this.dateRange = new DateRange();
this.disabled = false;
this.dateRangeChange = new EventEmitter();
this.hoveredDate = null;
this.fromDate = null;
this.toDate = null;
this.min = null;
this.max = null;
this.isInside = (date) => date.after(this.fromDate) && date.before(this.toDate);
this.isFrom = (date) => date.equals(this.fromDate);
this.isTo = (date) => date.equals(this.toDate);
this.isDisabled = (date) => date.after(this.max) || date.before(this.min);
this.isInFuture = (date) => date.after(this.toDate);
}
ngOnInit() {
this.id =
this.id || `date-range-picker-` + Math.random().toString(36).substring(4);
this.fromDate = NgbDate.from(this.dateAdapter.fromModel(this.dateRange.start));
this.toDate = NgbDate.from(this.dateAdapter.fromModel(this.dateRange.end));
this.min = NgbDate.from(this.minDate ? this.dateAdapter.fromModel(this.minDate) : null);
this.max = NgbDate.from(this.maxDate ? this.dateAdapter.fromModel(this.maxDate) : null);
this.inputElRef.nativeElement.value = this.formatInputText();
if (this.fromDate) {
this.dp.startDate = {
year: this.fromDate.year,
month: this.fromDate.month,
};
}
}
ngOnChanges(changes) {
if (changes['dateRange'] || changes['disabled']) {
this.ngOnInit();
}
}
onDateChange(date, dp) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
this.dateRange.start = this.dateAdapter.toModel(this.fromDate);
}
else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
this.toDate = date;
this.dateRange.end = this.dateAdapter.toModel(this.toDate);
dp.close();
}
else {
this.toDate = null;
this.fromDate = date;
this.dateRange.start = this.dateAdapter.toModel(this.fromDate);
this.dateRange.end = null;
}
this.inputElRef.nativeElement.value = this.formatInputText();
this.dateRangeChange.emit(this.dateRange);
}
formatInputText() {
if (this.dateRange.start &&
this.dateRange.end &&
DateRange.isValidDate(this.dateRange.start) &&
DateRange.isValidDate(this.dateRange.end)) {
return `${this.dateRange.start.toLocaleDateString()} - ${this.dateRange.end.toLocaleDateString()}`;
}
return '';
}
isHovered(date) {
return (this.fromDate &&
!this.toDate &&
this.hoveredDate &&
date.after(this.fromDate) &&
date.before(this.hoveredDate));
}
isWeekend(date) {
const d = new Date(date.year, date.month - 1, date.day);
return d.getDay() === 0 || d.getDay() === 6;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1.NgbDateNativeAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: DateRangePickerComponent, selector: "date-range-picker", inputs: { id: "id", dateRange: "dateRange", minDate: "minDate", maxDate: "maxDate", disabled: "disabled" }, outputs: { dateRangeChange: "dateRangeChange" }, viewQueries: [{ propertyName: "inputElRef", first: true, predicate: ["dp"], descendants: true, read: ElementRef, static: true }, { propertyName: "dp", first: true, predicate: ["dp"], descendants: true, static: true }], usesOnChanges: 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: 208px; cursor: pointer\"\r\n readonly\r\n [attr.id]=\"id\"\r\n [disabled]=\"disabled\"\r\n [autoClose]=\"false\"\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 />\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 <svg\r\n aria-hidden=\"true\"\r\n role=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 448 512\"\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z\"\r\n ></path>\r\n </svg>\r\n </button>\r\n</div>\r\n\r\n<ng-template\r\n #t\r\n let-date=\"date\"\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]=\"\r\n isFrom(date) || isTo(date) || isInside(date) || isHovered(date)\r\n \"\r\n [class.faded]=\"isHovered(date) || isInside(date)\"\r\n [class.weekend]=\"isWeekend(date)\"\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.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: "directive", type: i1.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: "17.0.5", ngImport: i0, type: DateRangePickerComponent, decorators: [{
type: Component,
args: [{ selector: 'date-range-picker', 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: 208px; cursor: pointer\"\r\n readonly\r\n [attr.id]=\"id\"\r\n [disabled]=\"disabled\"\r\n [autoClose]=\"false\"\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 />\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 <svg\r\n aria-hidden=\"true\"\r\n role=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 448 512\"\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z\"\r\n ></path>\r\n </svg>\r\n </button>\r\n</div>\r\n\r\n<ng-template\r\n #t\r\n let-date=\"date\"\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]=\"\r\n isFrom(date) || isTo(date) || isInside(date) || isHovered(date)\r\n \"\r\n [class.faded]=\"isHovered(date) || isInside(date)\"\r\n [class.weekend]=\"isWeekend(date)\"\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.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: { id: [{
type: Input
}], dateRange: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], disabled: [{
type: Input
}], dateRangeChange: [{
type: Output
}], inputElRef: [{
type: ViewChild,
args: ['dp', { read: ElementRef, static: true }]
}], dp: [{
type: ViewChild,
args: ['dp', { static: true }]
}] } });
class DatePickerComponent {
constructor(dateAdapter, calendar) {
this.dateAdapter = dateAdapter;
this.calendar = calendar;
this.id = '';
this.date = null;
this.disabled = false;
this.isInvalid = false;
this.allowClear = false;
this.dateChange = new EventEmitter();
this.ngbDate = null;
this.today = this.calendar.getToday();
this.isDisabled = (date) => date.after(this.ngbMaxDate) || date.before(this.ngbMinDate);
}
ngOnInit() {
this.ngbDate = NgbDate.from(this.dateAdapter.fromModel(this.date));
if (!this.id) {
this.id = `date-picker-` + Math.random().toString(36).substring(4);
}
if (this.minDate) {
this.ngbMinDate = this.dateAdapter.fromModel(new Date(this.minDate)) || {
year: 1900,
month: 1,
day: 1,
};
}
if (this.maxDate) {
this.ngbMaxDate = this.dateAdapter.fromModel(new Date(this.maxDate)) || {
year: 2099,
month: 12,
day: 31,
};
}
}
ngOnChanges(changes) {
this.ngOnInit();
}
onDateChange(date) {
const newDate = this.dateAdapter.toModel(date);
if (newDate)
this.dateChange.emit(newDate);
}
isWeekend(date) {
const d = new Date(date.year, date.month - 1, date.day);
return d.getDay() === 0 || d.getDay() === 6;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1.NgbDateNativeAdapter }, { token: i1.NgbCalendar }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: DatePickerComponent, selector: "date-picker", inputs: { id: "id", date: "date", disabled: "disabled", minDate: "minDate", maxDate: "maxDate", isInvalid: "isInvalid", allowClear: "allowClear" }, outputs: { dateChange: "dateChange" }, usesOnChanges: true, 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: 208px; 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 d-flex align-items-center\"\r\n (click)=\"d.toggle()\"\r\n [disabled]=\"disabled\"\r\n >\r\n <svg\r\n aria-hidden=\"true\"\r\n role=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 448 512\"\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z\"\r\n ></path>\r\n </svg>\r\n </button>\r\n</div>\r\n\r\n<ng-template\r\n #dayTemplate\r\n let-date=\"date\"\r\n let-disabled=\"disabled\"\r\n let-currentMonth=\"currentMonth\"\r\n>\r\n <span\r\n class=\"custom-day\"\r\n [class.weekend]=\"isWeekend(date)\"\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 <div *ngIf=\"allowClear\">\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 = today; onDateChange(today); d.close()\"\r\n >\r\n Today\r\n </button>\r\n <button\r\n class=\"btn btn-secondary btn-sm m-2 float-end\"\r\n (click)=\"ngbDate = null; dateChange.emit(undefined); d.close()\"\r\n >\r\n Clear\r\n </button>\r\n </div>\r\n</ng-template>\r\n", styles: [".custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.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: "17.0.5", ngImport: i0, type: DatePickerComponent, decorators: [{
type: Component,
args: [{ selector: 'date-picker', 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: 208px; 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 d-flex align-items-center\"\r\n (click)=\"d.toggle()\"\r\n [disabled]=\"disabled\"\r\n >\r\n <svg\r\n aria-hidden=\"true\"\r\n role=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 448 512\"\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z\"\r\n ></path>\r\n </svg>\r\n </button>\r\n</div>\r\n\r\n<ng-template\r\n #dayTemplate\r\n let-date=\"date\"\r\n let-disabled=\"disabled\"\r\n let-currentMonth=\"currentMonth\"\r\n>\r\n <span\r\n class=\"custom-day\"\r\n [class.weekend]=\"isWeekend(date)\"\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 <div *ngIf=\"allowClear\">\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 = today; onDateChange(today); d.close()\"\r\n >\r\n Today\r\n </button>\r\n <button\r\n class=\"btn btn-secondary btn-sm m-2 float-end\"\r\n (click)=\"ngbDate = null; dateChange.emit(undefined); d.close()\"\r\n >\r\n Clear\r\n </button>\r\n </div>\r\n</ng-template>\r\n", styles: [".custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.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 }, { type: i1.NgbCalendar }], propDecorators: { id: [{
type: Input
}], date: [{
type: Input
}], disabled: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], isInvalid: [{
type: Input
}], allowClear: [{
type: Input
}], dateChange: [{
type: Output
}] } });
function padNumber(value) {
if (isNumber(value)) {
return `0${value}`.slice(-2);
}
else {
return '';
}
}
function isNumber(value) {
return !isNaN(toInteger(value));
}
function toInteger(value) {
return parseInt(`${value}`, 10);
}
class NgbDateNativeParserFormatter extends NgbDateParserFormatter {
parse(value) {
if (value) {
const dateParts = value.trim().split('/');
if (dateParts.length === 1 && isNumber(dateParts[0])) {
return { year: toInteger(dateParts[0]), month: 0, day: 0 };
}
else if (dateParts.length === 2 &&
isNumber(dateParts[0]) &&
isNumber(dateParts[1])) {
return {
year: toInteger(dateParts[1]),
month: toInteger(dateParts[0]),
day: 0,
};
}
else if (dateParts.length === 3 &&
isNumber(dateParts[0]) &&
isNumber(dateParts[1]) &&
isNumber(dateParts[2])) {
return {
year: toInteger(dateParts[2]),
month: toInteger(dateParts[1]),
day: toInteger(dateParts[0]),
};
}
}
return { year: 0, month: 0, day: 0 };
}
format(date) {
let stringDate = '';
if (date) {
stringDate += isNumber(date.month) ? padNumber(date.month) + '/' : '';
stringDate += isNumber(date.day) ? padNumber(date.day) + '/' : '';
stringDate += date.year;
}
return stringDate;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: NgbDateNativeParserFormatter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: NgbDateNativeParserFormatter }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: NgbDateNativeParserFormatter, decorators: [{
type: Injectable
}] });
class DateTimePipe {
transform(d, ...args) {
if (!d) {
return 'NA';
}
const year = d.getFullYear();
const month = (d.getMonth() + 1).toString();
const day = d.getDate().toString();
let hours = d.getHours();
const minutes = d.getMinutes().toString();
const meridiem = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12 || 12;
return `${month.padStart(2, '0')}/${day.padStart(2, '0')}/${year} ${hours
.toString()
.padStart(2, '0')}:${minutes.padStart(2, '0')} ${meridiem}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: DateTimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: DateTimePipe, name: "dateTime" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: DateTimePipe, decorators: [{
type: Pipe,
args: [{
name: 'dateTime',
}]
}] });
class DateRangePickerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: DateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: DateRangePickerModule, declarations: [DateRangePickerComponent, DatePickerComponent, DateTimePipe], imports: [CommonModule, FormsModule, NgbDatepickerModule], exports: [DateRangePickerComponent, DatePickerComponent, DateTimePipe] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: DateRangePickerModule, providers: [
NgbDateNativeAdapter,
{ provide: NgbDateParserFormatter, useClass: NgbDateNativeParserFormatter },
], imports: [CommonModule, FormsModule, NgbDatepickerModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: DateRangePickerModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, FormsModule, NgbDatepickerModule],
declarations: [DateRangePickerComponent, DatePickerComponent, DateTimePipe],
providers: [
NgbDateNativeAdapter,
{ provide: NgbDateParserFormatter, useClass: NgbDateNativeParserFormatter },
],
exports: [DateRangePickerComponent, DatePickerComponent, DateTimePipe],
}]
}] });
/*
* Public API Surface of date-range-picker
*/
/**
* Generated bundle index. Do not edit.
*/
export { DatePickerComponent, DateRange, DateRangePickerComponent, DateRangePickerModule, DateTimePipe };
//# sourceMappingURL=uiowa-date-range-picker.mjs.map