ngx-daterangepicker-bootstrap
Version:
Date Range Picker - Angular 20 and Bootstrap 5
374 lines (365 loc) • 21.8 kB
TypeScript
import * as i0 from '@angular/core';
import { OnInit, WritableSignal, ModelSignal, InputSignal, InputSignalWithTransform, Signal, ElementRef, OutputEmitterRef, InjectionToken, OnDestroy, AfterViewInit, AfterViewChecked, ModuleWithProviders, EnvironmentProviders } from '@angular/core';
import { Dayjs } from 'dayjs';
import * as i1 from '@angular/common';
import * as i2 from '@angular/forms';
declare enum SideEnum {
left = "left",
right = "right"
}
declare class NgxDaterangepickerBootstrapComponent implements OnInit {
private _localeService;
$event: any;
chosenLabel?: string;
calendarVariables: {
left: any;
right: any;
};
timepickerVariables: {
left: any;
right: any;
};
readonly applyBtnDisabled: WritableSignal<Boolean>;
chosenRange?: string | null;
rangesArray: Array<any>;
inline: boolean;
showCalInRanges: Boolean;
private tooltiptext;
private leftCalendar;
private rightCalendar;
private nowHoveredDate;
private pickingDate;
private _old;
_minDate?: Dayjs | null;
_maxDate?: Dayjs | null;
private _ranges;
readonly startDate: ModelSignal<Dayjs | null | undefined>;
readonly endDate: ModelSignal<Dayjs | null | undefined>;
readonly dateLimit: InputSignal<number | null>;
readonly autoApply: InputSignal<Boolean>;
readonly singleDatePicker: InputSignal<Boolean>;
readonly showDropdowns: InputSignal<Boolean>;
readonly showWeekNumbers: InputSignal<Boolean>;
readonly showISOWeekNumbers: InputSignal<Boolean>;
readonly linkedCalendars: InputSignal<Boolean>;
readonly autoUpdateInput: InputSignal<Boolean>;
readonly alwaysShowCalendars: InputSignal<Boolean>;
readonly maxSpan: InputSignal<Boolean>;
readonly lockStartDate: InputSignal<Boolean>;
readonly timePicker: InputSignal<Boolean>;
readonly timePicker24Hour: InputSignal<Boolean>;
readonly timePickerIncrement: InputSignal<number>;
readonly timePicker24HourInterval: InputSignal<number[]>;
readonly timePickerSeconds: InputSignal<Boolean>;
readonly showClearButton: InputSignal<Boolean>;
readonly firstMonthDayClass: InputSignal<string | null | undefined>;
readonly lastMonthDayClass: InputSignal<string | null | undefined>;
readonly emptyWeekRowClass: InputSignal<string | null | undefined>;
readonly emptyWeekColumnClass: InputSignal<string | null | undefined>;
readonly firstDayOfNextMonthClass: InputSignal<string | null | undefined>;
readonly lastDayOfPreviousMonthClass: InputSignal<string | null | undefined>;
readonly showCustomRangeLabel: InputSignal<boolean | undefined>;
readonly showCancel: InputSignal<boolean>;
readonly keepCalendarOpeningWithRange: InputSignal<boolean>;
readonly showRangeLabelOnInput: InputSignal<boolean>;
readonly customRangeDirection: InputSignal<boolean>;
readonly drops: InputSignal<string | undefined>;
readonly opens: InputSignal<string | undefined>;
readonly closeOnAutoApply: InputSignal<boolean>;
readonly minDate: InputSignalWithTransform<Dayjs | null | undefined, Dayjs | string>;
readonly maxDate: InputSignalWithTransform<Dayjs | null | undefined, Dayjs | string>;
readonly locale: InputSignal<any>;
readonly _locale: Signal<any>;
readonly ranges: InputSignalWithTransform<any, any>;
readonly isInvalidDate: InputSignal<Function | null | undefined>;
readonly isCustomDate: InputSignal<Function | null | undefined>;
readonly isTooltipDate: InputSignal<Function | null | undefined>;
readonly isShown: WritableSignal<Boolean>;
readonly pickerContainer: Signal<ElementRef | undefined>;
readonly chosenDate: OutputEmitterRef<Object>;
readonly rangeClicked: OutputEmitterRef<Object>;
readonly datesUpdated: OutputEmitterRef<Object>;
readonly startDateChanged: OutputEmitterRef<Object>;
readonly endDateChanged: OutputEmitterRef<Object>;
readonly cancelClicked: OutputEmitterRef<void>;
readonly clearClicked: OutputEmitterRef<void>;
constructor();
ngOnInit(): void;
renderRanges(): void;
renderTimePicker(side: SideEnum): void;
renderCalendar(side: SideEnum): void;
setStartDate(startDate: any): void;
setEndDate(endDate: any): void;
updateView(): void;
updateMonthsInView(): void;
/**
* This is responsible for updating the calendars
*/
updateCalendars(): void;
updateElement(): void;
remove(): void;
/**
* this should calculate the label
*/
calculateChosenLabel(): void;
clickApply(e?: any): void;
clickCancel(e: any): void;
/**
* called when month is changed
* @param object get month value in $event.target.value / side left or right
*/
monthChanged(object: {
$event: any;
side: SideEnum;
}): void;
/**
* called when year is changed
* @param object get year value in $event.target.value / side left or right
*/
yearChanged(object: {
$event: any;
side: SideEnum;
}): void;
/**
* called when time is changed
* @param object time $event / side left or right
*/
timeChanged(object: {
$event: any;
side: SideEnum;
}): void;
/**
* call when month or year changed
* @param month month number 0 -11
* @param year year eg: 1995
* @param side left or right
*/
monthOrYearChanged(month: number, year: number, side: SideEnum): void;
/**
* Click on previous month
* @param object previous $event / side left or right calendar
*/
clickPrev(object: {
$event: MouseEvent;
side: SideEnum;
}): void;
/**
* Click on next month
* @param object next $event / side left or right calendar
*/
clickNext(object: {
$event: MouseEvent;
side: SideEnum;
}): void;
/**
* When hovering a date
* @param object get value by $event.target.value / side left or right / row or col position of the current date clicked
*/
hoverDate(object: {
$event: any;
side: SideEnum;
row: number;
col: number;
}): void;
/**
* When selecting a date
* @param object get value by $event.target.value / side left or right / row or col position of the current date clicked
*/
clickDate(object: {
$event: any;
side: SideEnum;
row: number;
col: number;
}): void;
/**
* Click on the custom range
* @param object $event / label
*/
clickRange(object: {
$event: MouseEvent;
label: string;
}): void;
show(e?: any): void;
hide(e?: any): void;
clearIncompleteDateSelection(): void;
/**
* handle click on all element in the component, useful for outside of click
* @param e event
*/
handleInternalClick(e: any): void;
/**
* update the locale options
* @param locale
*/
updateLocale(locale: any): void;
/**
* clear the daterange picker
*/
clickClear($event: any): void;
/**
* Find out if the selected range should be disabled if it doesn't
* fit into minDate and maxDate limitations.
*/
disableRange(range: any): any;
/**
*
* @param date the date to add time
* @param side left or right
*/
private _getDateWithTime;
/**
* build the locale config
*/
private _buildLocale;
private _buildCells;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxDaterangepickerBootstrapComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgxDaterangepickerBootstrapComponent, "ngx-daterangepicker-bootstrap", never, { "startDate": { "alias": "startDate"; "required": false; "isSignal": true; }; "endDate": { "alias": "endDate"; "required": false; "isSignal": true; }; "dateLimit": { "alias": "dateLimit"; "required": false; "isSignal": true; }; "autoApply": { "alias": "autoApply"; "required": false; "isSignal": true; }; "singleDatePicker": { "alias": "singleDatePicker"; "required": false; "isSignal": true; }; "showDropdowns": { "alias": "showDropdowns"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "showISOWeekNumbers": { "alias": "showISOWeekNumbers"; "required": false; "isSignal": true; }; "linkedCalendars": { "alias": "linkedCalendars"; "required": false; "isSignal": true; }; "autoUpdateInput": { "alias": "autoUpdateInput"; "required": false; "isSignal": true; }; "alwaysShowCalendars": { "alias": "alwaysShowCalendars"; "required": false; "isSignal": true; }; "maxSpan": { "alias": "maxSpan"; "required": false; "isSignal": true; }; "lockStartDate": { "alias": "lockStartDate"; "required": false; "isSignal": true; }; "timePicker": { "alias": "timePicker"; "required": false; "isSignal": true; }; "timePicker24Hour": { "alias": "timePicker24Hour"; "required": false; "isSignal": true; }; "timePickerIncrement": { "alias": "timePickerIncrement"; "required": false; "isSignal": true; }; "timePicker24HourInterval": { "alias": "timePicker24HourInterval"; "required": false; "isSignal": true; }; "timePickerSeconds": { "alias": "timePickerSeconds"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "firstMonthDayClass": { "alias": "firstMonthDayClass"; "required": false; "isSignal": true; }; "lastMonthDayClass": { "alias": "lastMonthDayClass"; "required": false; "isSignal": true; }; "emptyWeekRowClass": { "alias": "emptyWeekRowClass"; "required": false; "isSignal": true; }; "emptyWeekColumnClass": { "alias": "emptyWeekColumnClass"; "required": false; "isSignal": true; }; "firstDayOfNextMonthClass": { "alias": "firstDayOfNextMonthClass"; "required": false; "isSignal": true; }; "lastDayOfPreviousMonthClass": { "alias": "lastDayOfPreviousMonthClass"; "required": false; "isSignal": true; }; "showCustomRangeLabel": { "alias": "showCustomRangeLabel"; "required": false; "isSignal": true; }; "showCancel": { "alias": "showCancel"; "required": false; "isSignal": true; }; "keepCalendarOpeningWithRange": { "alias": "keepCalendarOpeningWithRange"; "required": false; "isSignal": true; }; "showRangeLabelOnInput": { "alias": "showRangeLabelOnInput"; "required": false; "isSignal": true; }; "customRangeDirection": { "alias": "customRangeDirection"; "required": false; "isSignal": true; }; "drops": { "alias": "drops"; "required": false; "isSignal": true; }; "opens": { "alias": "opens"; "required": false; "isSignal": true; }; "closeOnAutoApply": { "alias": "closeOnAutoApply"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "ranges": { "alias": "ranges"; "required": false; "isSignal": true; }; "isInvalidDate": { "alias": "isInvalidDate"; "required": false; "isSignal": true; }; "isCustomDate": { "alias": "isCustomDate"; "required": false; "isSignal": true; }; "isTooltipDate": { "alias": "isTooltipDate"; "required": false; "isSignal": true; }; }, { "startDate": "startDateChange"; "endDate": "endDateChange"; "locale": "localeChange"; "chosenDate": "chosenDate"; "rangeClicked": "rangeClicked"; "datesUpdated": "datesUpdated"; "startDateChanged": "startDateChanged"; "endDateChanged": "endDateChanged"; "cancelClicked": "cancelClicked"; "clearClicked": "clearClicked"; }, never, never, true, never>;
}
declare const LOCALE_CONFIG: InjectionToken<LocaleConfig>;
/**
* LocaleConfig Interface
*/
interface LocaleConfig {
direction?: string;
separator?: string;
weekLabel?: string;
applyLabel?: string;
cancelLabel?: string;
clearLabel?: string;
customRangeLabel?: string;
daysOfWeek?: string[];
monthNames?: string[];
firstDay?: number;
format?: string;
displayFormat?: string;
startDate?: string;
endDate?: string;
}
/**
* DefaultLocaleConfig
*/
declare const DefaultLocaleConfig: LocaleConfig;
declare class NgxDaterangepickerBootstrapDirective implements OnInit, OnDestroy, AfterViewInit, AfterViewChecked {
private viewContainerRef;
private injector;
private applicationRef;
private elementRef;
private _renderer;
private _localeService;
$event: any;
daterangepicker: NgxDaterangepickerBootstrapComponent | any;
private daterangepickerRef?;
private daterangepickerElement?;
private firstMonthDayClass?;
private _onChange;
private _onTouched;
private _disabled?;
private _value;
private _resizeObserver?;
readonly minDate: InputSignal<Dayjs | null | undefined>;
readonly maxDate: InputSignal<Dayjs | null | undefined>;
readonly autoApply: InputSignal<boolean>;
readonly alwaysShowCalendars: InputSignal<boolean>;
readonly showCustomRangeLabel: InputSignal<boolean | undefined>;
readonly linkedCalendars: InputSignal<boolean>;
readonly dateLimit: InputSignal<number | null>;
readonly singleDatePicker: InputSignal<boolean>;
readonly showWeekNumbers: InputSignal<boolean>;
readonly showISOWeekNumbers: InputSignal<boolean>;
readonly showDropdowns: InputSignal<boolean>;
readonly isInvalidDate: InputSignal<Function | null | undefined>;
readonly isCustomDate: InputSignal<Function | null | undefined>;
readonly isTooltipDate: InputSignal<Function | null | undefined>;
readonly showClearButton: InputSignal<boolean>;
readonly customRangeDirection: InputSignal<boolean>;
readonly ranges: InputSignal<any>;
readonly opens: ModelSignal<string>;
readonly drops: ModelSignal<string>;
readonly lastMonthDayClass: InputSignal<string | null | undefined>;
readonly emptyWeekRowClass: InputSignal<string | null | undefined>;
readonly emptyWeekColumnClass: InputSignal<string | null | undefined>;
readonly firstDayOfNextMonthClass: InputSignal<string | null | undefined>;
readonly lastDayOfPreviousMonthClass: InputSignal<string | null | undefined>;
readonly keepCalendarOpeningWithRange: InputSignal<boolean>;
readonly showRangeLabelOnInput: InputSignal<boolean>;
readonly showCancel: InputSignal<boolean>;
readonly lockStartDate: InputSignal<Boolean>;
readonly closeOnAutoApply: InputSignal<boolean>;
readonly timePicker: InputSignal<Boolean>;
readonly timePicker24Hour: InputSignal<Boolean>;
readonly timePickerIncrement: InputSignal<number>;
readonly timePicker24HourInterval: InputSignal<number[]>;
readonly timePickerSeconds: InputSignal<Boolean>;
readonly formlyCustomField: InputSignal<Boolean>;
readonly startKey: InputSignal<string>;
readonly endKey: InputSignal<string>;
readonly locale: InputSignal<object>;
readonly _startKey: Signal<string>;
readonly _endKey: Signal<string>;
readonly _locale: Signal<LocaleConfig>;
readonly change: OutputEmitterRef<Object>;
readonly rangeClicked: OutputEmitterRef<Object>;
readonly datesUpdated: OutputEmitterRef<Object>;
readonly startDateChanged: OutputEmitterRef<Object>;
readonly endDateChanged: OutputEmitterRef<Object>;
readonly clearClicked: OutputEmitterRef<void>;
get disabled(): boolean | undefined;
get value(): any;
set value(val: any);
private rangeClickedSubs;
private datesUpdatedSubs;
private startDateChangedSubs;
private endDateChangedSubs;
private clearClickedSubs;
private chosenDateSubs;
constructor();
ngOnInit(): void;
ngOnDestroy(): void;
ngAfterViewInit(): void;
ngAfterViewChecked(): void;
onWindowResize(event?: any): void;
open(event?: any): void;
hide(event?: any): void;
onBlur(): void;
toggle(event?: any): void;
clear(): void;
writeValue(value: any): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
setDisabledState(state: boolean): void;
private setValue;
pickerResizeObserver(): void;
/**
* Set position of the calendar, this works as expected only if you add daterangepickerElement to DOM body
*/
setPosition(): void;
getOffset(element: any): {
top: any;
left: any;
width: any;
height: any;
};
inputChanged(event: any): void;
/**
* For click outside the calendar's container
* @param event event object
*/
outsideClick(event: any): void;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxDaterangepickerBootstrapDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NgxDaterangepickerBootstrapDirective, "input[ngxDaterangepickerBootstrap]", never, { "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "autoApply": { "alias": "autoApply"; "required": false; "isSignal": true; }; "alwaysShowCalendars": { "alias": "alwaysShowCalendars"; "required": false; "isSignal": true; }; "showCustomRangeLabel": { "alias": "showCustomRangeLabel"; "required": false; "isSignal": true; }; "linkedCalendars": { "alias": "linkedCalendars"; "required": false; "isSignal": true; }; "dateLimit": { "alias": "dateLimit"; "required": false; "isSignal": true; }; "singleDatePicker": { "alias": "singleDatePicker"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "showISOWeekNumbers": { "alias": "showISOWeekNumbers"; "required": false; "isSignal": true; }; "showDropdowns": { "alias": "showDropdowns"; "required": false; "isSignal": true; }; "isInvalidDate": { "alias": "isInvalidDate"; "required": false; "isSignal": true; }; "isCustomDate": { "alias": "isCustomDate"; "required": false; "isSignal": true; }; "isTooltipDate": { "alias": "isTooltipDate"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "customRangeDirection": { "alias": "customRangeDirection"; "required": false; "isSignal": true; }; "ranges": { "alias": "ranges"; "required": false; "isSignal": true; }; "opens": { "alias": "opens"; "required": false; "isSignal": true; }; "drops": { "alias": "drops"; "required": false; "isSignal": true; }; "lastMonthDayClass": { "alias": "lastMonthDayClass"; "required": false; "isSignal": true; }; "emptyWeekRowClass": { "alias": "emptyWeekRowClass"; "required": false; "isSignal": true; }; "emptyWeekColumnClass": { "alias": "emptyWeekColumnClass"; "required": false; "isSignal": true; }; "firstDayOfNextMonthClass": { "alias": "firstDayOfNextMonthClass"; "required": false; "isSignal": true; }; "lastDayOfPreviousMonthClass": { "alias": "lastDayOfPreviousMonthClass"; "required": false; "isSignal": true; }; "keepCalendarOpeningWithRange": { "alias": "keepCalendarOpeningWithRange"; "required": false; "isSignal": true; }; "showRangeLabelOnInput": { "alias": "showRangeLabelOnInput"; "required": false; "isSignal": true; }; "showCancel": { "alias": "showCancel"; "required": false; "isSignal": true; }; "lockStartDate": { "alias": "lockStartDate"; "required": false; "isSignal": true; }; "closeOnAutoApply": { "alias": "closeOnAutoApply"; "required": false; "isSignal": true; }; "timePicker": { "alias": "timePicker"; "required": false; "isSignal": true; }; "timePicker24Hour": { "alias": "timePicker24Hour"; "required": false; "isSignal": true; }; "timePickerIncrement": { "alias": "timePickerIncrement"; "required": false; "isSignal": true; }; "timePicker24HourInterval": { "alias": "timePicker24HourInterval"; "required": false; "isSignal": true; }; "timePickerSeconds": { "alias": "timePickerSeconds"; "required": false; "isSignal": true; }; "formlyCustomField": { "alias": "formlyCustomField"; "required": false; "isSignal": true; }; "startKey": { "alias": "startKey"; "required": false; "isSignal": true; }; "endKey": { "alias": "endKey"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; }, { "opens": "opensChange"; "drops": "dropsChange"; "startKey": "startKeyChange"; "endKey": "endKeyChange"; "locale": "localeChange"; "change": "change"; "rangeClicked": "rangeClicked"; "datesUpdated": "datesUpdated"; "startDateChanged": "startDateChanged"; "endDateChanged": "endDateChanged"; "clearClicked": "clearClicked"; }, never, never, true, never>;
}
declare class NgxDaterangepickerBootstrapModule {
static forRoot(config?: LocaleConfig): ModuleWithProviders<NgxDaterangepickerBootstrapModule>;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxDaterangepickerBootstrapModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<NgxDaterangepickerBootstrapModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i2.ReactiveFormsModule, typeof NgxDaterangepickerBootstrapComponent, typeof NgxDaterangepickerBootstrapDirective], [typeof NgxDaterangepickerBootstrapComponent, typeof NgxDaterangepickerBootstrapDirective]>;
static ɵinj: i0.ɵɵInjectorDeclaration<NgxDaterangepickerBootstrapModule>;
}
declare class NgxDaterangepickerLocaleService {
private _config;
get config(): LocaleConfig;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxDaterangepickerLocaleService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<NgxDaterangepickerLocaleService>;
}
declare function provideDaterangepickerLocale(config?: LocaleConfig): EnvironmentProviders;
export { DefaultLocaleConfig, LOCALE_CONFIG, NgxDaterangepickerBootstrapComponent, NgxDaterangepickerBootstrapDirective, NgxDaterangepickerBootstrapModule, NgxDaterangepickerLocaleService, provideDaterangepickerLocale };
export type { LocaleConfig };