@netwin/angular-datetime-picker
Version:
Angular Date Time Picker
1,317 lines (1,300 loc) • 57.8 kB
TypeScript
import * as i0 from '@angular/core';
import { InjectionToken, OutputRef, AfterContentInit, AfterViewChecked, OnInit, OnDestroy, Provider } from '@angular/core';
import * as i1 from '@angular/cdk/platform';
import * as rxjs from 'rxjs';
import { Subject } from 'rxjs';
import { ControlValueAccessor } from '@angular/forms';
declare class NativeDateTimeModule {
static ɵfac: i0.ɵɵFactoryDeclaration<NativeDateTimeModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<NativeDateTimeModule, never, [typeof i1.PlatformModule], never>;
static ɵinj: i0.ɵɵInjectorDeclaration<NativeDateTimeModule>;
}
declare class OwlNativeDateTimeModule {
static ɵfac: i0.ɵɵFactoryDeclaration<OwlNativeDateTimeModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<OwlNativeDateTimeModule, never, [typeof NativeDateTimeModule], never>;
static ɵinj: i0.ɵɵInjectorDeclaration<OwlNativeDateTimeModule>;
}
/** InjectionToken for date time picker that can be used to override default locale code. */
declare const OWL_DATE_TIME_LOCALE: InjectionToken<string>;
/** Provider for OWL_DATE_TIME_LOCALE injection token. */
declare const OWL_DATE_TIME_LOCALE_PROVIDER: {
provide: InjectionToken<string>;
useExisting: InjectionToken<string>;
};
declare abstract class DateTimeAdapter<T> {
/** The locale to use for all dates. */
protected locale: string;
/** A stream that emits when the locale changes. */
protected _localeChanges: Subject<string>;
localeChanges: rxjs.Observable<string>;
/** total milliseconds in a day. */
protected readonly millisecondsInDay = 86400000;
/** total milliseconds in a minute. */
protected readonly milliseondsInMinute = 60000;
/**
* Get the year of the given date
*/
abstract getYear(date: T): number;
/**
* Get the month of the given date
* 0 -- January
* 11 -- December
*/
abstract getMonth(date: T): number;
/**
* Get the day of the week of the given date
* 0 -- Sunday
* 6 -- Saturday
*/
abstract getDay(date: T): number;
/**
* Get the day num of the given date
*/
abstract getDate(date: T): number;
/**
* Get the hours of the given date
*/
abstract getHours(date: T): number;
/**
* Get the minutes of the given date
*/
abstract getMinutes(date: T): number;
/**
* Get the seconds of the given date
*/
abstract getSeconds(date: T): number;
/**
* Get the milliseconds timestamp of the given date
*/
abstract getTime(date: T): number;
/**
* Gets the number of days in the month of the given date.
*/
abstract getNumDaysInMonth(date: T): number;
/**
* Get the number of calendar days between the given dates.
* If dateLeft is before dateRight, it would return positive value
* If dateLeft is after dateRight, it would return negative value
*/
abstract differenceInCalendarDays(dateLeft: T, dateRight: T): number;
/**
* Gets the name for the year of the given date.
*/
abstract getYearName(date: T): string;
/**
* Get a list of month names
*/
abstract getMonthNames(style: Intl.DateTimeFormatOptions['month']): Array<string>;
/**
* Get a list of week names
*/
abstract getDayOfWeekNames(style: Intl.DateTimeFormatOptions['weekday']): Array<string>;
/**
* Gets a list of names for the dates of the month.
*/
abstract getDateNames(): Array<string>;
/**
* Return a Date object as a string, using the ISO standard
*/
abstract toIso8601(date: T): string;
/**
* Check if the give dates are equal
*/
abstract isEqual(dateLeft: T, dateRight: T): boolean;
/**
* Check if the give dates are the same day
*/
abstract isSameDay(dateLeft: T, dateRight: T): boolean;
/**
* Checks whether the given date is valid.
*/
abstract isValid(date: T): boolean;
/**
* Gets date instance that is not valid.
*/
abstract invalid(): T;
/**
* Checks whether the given object is considered a date instance by this DateTimeAdapter.
*/
abstract isDateInstance(obj: unknown): obj is T;
/**
* Add the specified number of years to the given date
*/
abstract addCalendarYears(date: T, amount: number): T;
/**
* Add the specified number of months to the given date
*/
abstract addCalendarMonths(date: T, amount: number): T;
/**
* Add the specified number of days to the given date
*/
abstract addCalendarDays(date: T, amount: number): T;
/**
* Set the hours to the given date.
*/
abstract setHours(date: T, amount: number): T;
/**
* Set the minutes to the given date.
*/
abstract setMinutes(date: T, amount: number): T;
/**
* Set the seconds to the given date.
*/
abstract setSeconds(date: T, amount: number): T;
/**
* Creates a date with the given year, month, date, hour, minute and second. Does not allow over/under-flow of the
* month and date.
*/
abstract createDate(year: number, month: number, date: number): T;
abstract createDate(year: number, month: number, date: number, hours: number, minutes: number, seconds: number): T;
/**
* Clone the given date
*/
abstract clone(date: T): T;
/**
* Get a new moment
*/
abstract now(): T;
/**
* Formats a date as a string according to the given format.
*/
abstract format(date: T, displayFormat: Intl.DateTimeFormatOptions): string;
/**
* Parse a user-provided value to a Date Object
*/
abstract parse(value: unknown): T | null;
/**
* Compare two given dates
* 1 if the first date is after the second,
* -1 if the first date is before the second
* 0 if dates are equal.
*/
compare(first: T, second: T): number;
/**
* Check if two given dates are in the same year
* 1 if the first date's year is after the second,
* -1 if the first date's year is before the second
* 0 if two given dates are in the same year
*/
compareYear(first: T, second: T): number;
/**
* Attempts to deserialize a value to a valid date object. This is different from parsing in that
* deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601
* string). The default implementation does not allow any deserialization, it simply checks that
* the given value is already a valid date object or null. The `<mat-datepicker>` will call this
* method on all of it's `@Input()` properties that accept dates. It is therefore possible to
* support passing values from your backend directly to these properties by overriding this method
* to also deserialize the format used by your backend.
*/
deserialize(value: T | null): T | null;
/**
* Sets the locale used for all dates.
*/
setLocale(locale: string): void;
/**
* Get the locale used for all dates.
*/
getLocale(): string;
/**
* Clamp the given date between min and max dates.
*/
clampDate(date: T, min?: T | null, max?: T | null): T;
}
/**
* date-time-format.class
*/
type OwlDateTimeFormats = {
fullPickerInput: Partial<Intl.DateTimeFormatOptions>;
datePickerInput: Partial<Intl.DateTimeFormatOptions>;
timePickerInput: Partial<Intl.DateTimeFormatOptions>;
monthYearLabel: Partial<Intl.DateTimeFormatOptions>;
dateA11yLabel: Partial<Intl.DateTimeFormatOptions>;
monthYearA11yLabel: Partial<Intl.DateTimeFormatOptions>;
};
/** InjectionToken for date time picker that can be used to override default format. */
declare const OWL_DATE_TIME_FORMATS: InjectionToken<OwlDateTimeFormats>;
/**
* date-time.class
*/
declare const PickerType: {
/**
* Shows both calendar and timer views.
*/
readonly Both: "both";
/**
* Shows only the calendar view.
*/
readonly Calendar: "calendar";
/**
* Shows only the timer view.
*/
readonly Timer: "timer";
};
type PickerType = (typeof PickerType)[keyof typeof PickerType];
declare const SelectMode: {
/**
* Selects a single date.
*/
readonly Single: "single";
/**
* Selects a date range.
*/
readonly Range: "range";
/**
* Selects a date range from a specific date.
* The end date (range[1]) will always be `null` in this mode.
*/
readonly RangeFrom: "rangeFrom";
/**
* Selects a date range up to a specific date.
* The start date (range[0]) will always be `null` in this mode.
*/
readonly RangeTo: "rangeTo";
};
type SelectMode = (typeof SelectMode)[keyof typeof SelectMode];
declare const DateView: {
/**
* Shows all days of a month in a grid.
*/
readonly MONTH: "month";
/**
* Shows all months of a year in a grid.
*/
readonly YEAR: "year";
/**
* Shows a list of years.
*/
readonly MULTI_YEARS: "multi-years";
};
type DateViewType = (typeof DateView)[keyof typeof DateView];
declare abstract class OwlDateTime<T> {
protected readonly dateTimeAdapter: DateTimeAdapter<T>;
protected readonly dateTimeFormats: OwlDateTimeFormats;
/**
* Whether to show the second's timer
*/
showSecondsTimer: boolean;
/**
* Whether the timer is in hour12 format
*/
hour12Timer: boolean;
/**
* The view that the calendar should start in.
*/
startView: DateViewType;
/**
* Whether to should only the year and multi-year views.
*/
yearOnly: boolean;
/**
* Whether to should only the multi-year view.
*/
multiyearOnly: boolean;
/**
* Hours to change per step
*/
stepHour: number;
/**
* Minutes to change per step
*/
stepMinute: number;
/**
* Seconds to change per step
*/
stepSecond: number;
/**
* Set the first day of week
*/
firstDayOfWeek: number | undefined;
/**
* Whether to hide dates in other months at the start or end of the current month.
*/
hideOtherMonths: boolean;
readonly id: string;
abstract disabled: boolean;
abstract get selected(): T | null;
abstract get selecteds(): Array<T> | null;
abstract get dateTimeFilter(): (date: T | null) => boolean;
abstract get maxDateTime(): T | null;
abstract get minDateTime(): T | null;
abstract get selectMode(): SelectMode;
abstract get startAt(): T | null;
abstract get endAt(): T | null;
abstract get opened(): boolean;
abstract get pickerType(): PickerType;
abstract get isInSingleMode(): boolean;
abstract get isInRangeMode(): boolean;
abstract select(date: T | Array<T>): void;
abstract yearSelected: OutputRef<T>;
abstract monthSelected: OutputRef<T>;
abstract dateSelected: OutputRef<T>;
abstract selectYear(normalizedYear: T): void;
abstract selectMonth(normalizedMonth: T): void;
abstract selectDate(normalizedDate: T): void;
get displayFormat(): Partial<Intl.DateTimeFormatOptions>;
/**
* Date Time Checker to check if the give dateTime is selectable
*/
dateTimeChecker: (dateTime: T) => boolean;
constructor();
protected getValidDate(obj: unknown): T | null;
static ɵfac: i0.ɵɵFactoryDeclaration<OwlDateTime<any>, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<OwlDateTime<any>, never, never, { "showSecondsTimer": { "alias": "showSecondsTimer"; "required": false; }; "hour12Timer": { "alias": "hour12Timer"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "yearOnly": { "alias": "yearOnly"; "required": false; }; "multiyearOnly": { "alias": "multiyearOnly"; "required": false; }; "stepHour": { "alias": "stepHour"; "required": false; }; "stepMinute": { "alias": "stepMinute"; "required": false; }; "stepSecond": { "alias": "stepSecond"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "hideOtherMonths": { "alias": "hideOtherMonths"; "required": false; }; }, {}, never, never, true, never>;
static ngAcceptInputType_showSecondsTimer: unknown;
static ngAcceptInputType_hour12Timer: unknown;
static ngAcceptInputType_stepHour: unknown;
static ngAcceptInputType_stepMinute: unknown;
static ngAcceptInputType_stepSecond: unknown;
static ngAcceptInputType_firstDayOfWeek: unknown;
static ngAcceptInputType_hideOtherMonths: unknown;
}
declare class CalendarCell {
value: number;
displayValue: string;
ariaLabel: string;
enabled: boolean;
out: boolean;
cellClass: string;
constructor(value: number, displayValue: string, ariaLabel: string, enabled: boolean, out?: boolean, cellClass?: string);
}
declare class OwlCalendarBodyComponent {
private readonly elmRef;
private readonly ngZone;
/**
* The cell number of the active cell in the table.
*/
activeCell: number;
/**
* The cells to display in the table.
*/
rows: Array<Array<CalendarCell>>;
/**
* The number of columns in the table.
*/
numCols: number;
/**
* The ratio (width / height) to use for the cells in the table.
*/
cellRatio: number;
/**
* The value in the table that corresponds to today.
*/
todayValue: number;
/**
* The value in the table that is currently selected.
*/
selectedValues: Array<number>;
/**
* Current picker select mode
*/
selectMode: SelectMode;
/**
* Emit when a calendar cell is selected
*/
readonly selectCell: i0.OutputEmitterRef<CalendarCell>;
protected handleSelect(cell: CalendarCell): void;
protected get isInSingleMode(): boolean;
protected get isInRangeMode(): boolean;
isActiveCell(rowIndex: number, colIndex: number): boolean;
/**
* Check if the cell is selected
*/
isSelected(value: number): boolean;
/**
* Check if the cell in the range
*/
isInRange(value: number): boolean;
/**
* Check if the cell is the range from
*/
isRangeFrom(value: number): boolean;
/**
* Check if the cell is the range to
*/
isRangeTo(value: number): boolean;
/**
* Focus to a active cell
*/
focusActiveCell(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<OwlCalendarBodyComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<OwlCalendarBodyComponent, "[owl-date-time-calendar-body]", ["owlDateTimeCalendarBody"], { "activeCell": { "alias": "activeCell"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "numCols": { "alias": "numCols"; "required": false; }; "cellRatio": { "alias": "cellRatio"; "required": false; }; "todayValue": { "alias": "todayValue"; "required": false; }; "selectedValues": { "alias": "selectedValues"; "required": false; }; "selectMode": { "alias": "selectMode"; "required": false; }; }, { "selectCell": "selectCell"; }, never, never, true, never>;
}
declare class OwlCalendarComponent<T> implements AfterContentInit, AfterViewChecked {
private readonly elmRef;
private readonly pickerIntl;
private readonly ngZone;
private readonly cdRef;
private readonly dateTimeAdapter;
private readonly dateTimeFormats;
protected readonly DateView: {
readonly MONTH: "month";
readonly YEAR: "year";
readonly MULTI_YEARS: "multi-years";
};
get minDate(): T | null;
set minDate(value: T | null);
get maxDate(): T | null;
set maxDate(value: T | null);
get pickerMoment(): T;
set pickerMoment(value: T);
get selected(): T | null;
set selected(value: T | null);
get selecteds(): Array<T>;
set selecteds(values: Array<T>);
get periodButtonText(): string;
get periodButtonLabel(): string;
get todayButtonLabel(): string;
get prevButtonLabel(): string;
get nextButtonLabel(): string;
get currentView(): DateViewType;
set currentView(view: DateViewType);
get isInSingleMode(): boolean;
get isInRangeMode(): boolean;
get showControlArrows(): boolean;
get isMonthView(): boolean;
get isTodayAllowed(): boolean;
/**
* Date filter for the month and year view
*/
dateFilter: (date: T) => boolean;
/**
* Set the first day of week
*/
firstDayOfWeek: number;
/** The minimum selectable date. */
private _minDate;
/** The maximum selectable date. */
private _maxDate;
/** The current picker moment */
private _pickerMoment;
selectMode: SelectMode;
/** The currently selected moment. */
private _selected;
private _selecteds;
/**
* The view that the calendar should start in.
*/
startView: DateViewType;
/**
* Whether to should only the year and multi-year views.
*/
yearOnly: boolean;
/**
* Whether to should only the multi-year view.
*/
multiyearOnly: boolean;
/**
* Whether to hide dates in other months at the start or end of the current month.
*/
hideOtherMonths: boolean;
/**
* Flag to show today button to jump to today's date. Defaults to `false`.
*/
showTodayButton: boolean;
/**
* Emits when the currently picker moment changes.
*/
readonly pickerMomentChange: i0.OutputEmitterRef<T>;
/**
* Emits when the selected date changes.
*/
readonly dateClicked: i0.OutputEmitterRef<T>;
/**
* Emits when the currently selected date changes.
*/
readonly selectedChange: i0.OutputEmitterRef<T>;
/**
* Emits when any date is selected.
*/
readonly userSelection: i0.OutputEmitterRef<void>;
/**
* Emits the selected year. This doesn't imply a change on the selected date
*/
readonly yearSelected: i0.OutputEmitterRef<T>;
/**
* Emits the selected month. This doesn't imply a change on the selected date
*/
readonly monthSelected: i0.OutputEmitterRef<T>;
private _currentView;
constructor();
/**
* Used for scheduling that focus should be moved to the active cell on the next tick.
* We need to schedule it, rather than do it immediately, because we have to wait
* for Angular to re-evaluate the view children.
*/
private moveFocusOnNextTick;
/**
* Date filter for the month and year view
*/
dateFilterForViews: (date: T | null) => boolean;
ngAfterContentInit(): void;
ngAfterViewChecked(): void;
/**
* Toggle between month view and year view
*/
toggleViews(): void;
/**
* Handles user clicks on the previous button.
*/
previousClicked(): void;
/**
* Handles user clicks on the next button.
*/
nextClicked(): void;
jumpToToday(): void;
dateSelected(date: T): void;
/**
* Change the pickerMoment value and switch to a specific view
*/
goToDateInView(date: T, view: DateViewType): void;
/**
* Change the pickerMoment value
*/
handlePickerMomentChange(date: T): void;
userSelected(): void;
/**
* Whether the previous period button is enabled.
*/
prevButtonEnabled(): boolean;
/**
* Whether the next period button is enabled.
*/
nextButtonEnabled(): boolean;
/**
* Focus to the host element
*/
focusActiveCell(): void;
selectYearInMultiYearView(normalizedYear: T): void;
selectMonthInYearView(normalizedMonth: T): void;
/**
* Whether the two dates represent the same view in the current view mode (month or year).
*/
private isSameView;
/**
* Get a valid date object
*/
private getValidDate;
static ɵfac: i0.ɵɵFactoryDeclaration<OwlCalendarComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<OwlCalendarComponent<any>, "owl-date-time-calendar", ["owlDateTimeCalendar"], { "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "pickerMoment": { "alias": "pickerMoment"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "selecteds": { "alias": "selecteds"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "selectMode": { "alias": "selectMode"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "yearOnly": { "alias": "yearOnly"; "required": false; }; "multiyearOnly": { "alias": "multiyearOnly"; "required": false; }; "hideOtherMonths": { "alias": "hideOtherMonths"; "required": false; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; }; }, { "pickerMomentChange": "pickerMomentChange"; "dateClicked": "dateClicked"; "selectedChange": "selectedChange"; "userSelection": "userSelection"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; }, never, never, true, never>;
}
declare class OwlTimerComponent<T> {
private readonly ngZone;
private readonly elmRef;
private readonly pickerIntl;
private readonly cdRef;
private readonly dateTimeAdapter;
/** The current picker moment */
private _pickerMoment;
get pickerMoment(): T;
set pickerMoment(value: T);
/** The minimum selectable date time. */
private _minDateTime;
get minDateTime(): T | null;
set minDateTime(value: T | null);
/** The maximum selectable date time. */
private _maxDateTime;
get maxDateTime(): T | null;
set maxDateTime(value: T | null);
private isPM;
/**
* Whether to show the second's timer
*/
readonly showSecondsTimer: i0.InputSignal<boolean>;
/**
* Whether the timer is in hour12 format
*/
readonly hour12Timer: i0.InputSignal<boolean>;
/**
* Hours to change per step
*/
readonly stepHour: i0.InputSignal<number>;
/**
* Minutes to change per step
*/
readonly stepMinute: i0.InputSignal<number>;
/**
* Seconds to change per step
*/
readonly stepSecond: i0.InputSignal<number>;
readonly selectedChange: i0.OutputEmitterRef<T>;
protected get hourValue(): number;
/**
* The value would be displayed in hourBox.
* We need this because the value displayed in hourBox it not
* the same as the hourValue when the timer is in hour12Timer mode.
*/
protected get hourBoxValue(): number;
protected get minuteValue(): number;
protected get secondValue(): number;
protected get upHourButtonLabel(): string;
protected get downHourButtonLabel(): string;
protected get upMinuteButtonLabel(): string;
protected get downMinuteButtonLabel(): string;
protected get upSecondButtonLabel(): string;
protected get downSecondButtonLabel(): string;
protected get hour12ButtonLabel(): string;
/**
* Focus to the host element
*/
focus(): void;
/**
* Set the hour value via typing into timer box input
* We need this to handle the hour value when the timer is in hour12 mode
*/
setHourValueViaInput(hours: number): void;
setHourValue(hours: number): void;
setMinuteValue(minutes: number): void;
setSecondValue(seconds: number): void;
setMeridiem(event: Event): void;
/**
* Check if the up hour button is enabled
*/
upHourEnabled(): boolean;
/**
* Check if the down hour button is enabled
*/
downHourEnabled(): boolean;
/**
* Check if the up minute button is enabled
*/
upMinuteEnabled(): boolean;
/**
* Check if the down minute button is enabled
*/
downMinuteEnabled(): boolean;
/**
* Check if the up second button is enabled
*/
upSecondEnabled(): boolean;
/**
* Check if the down second button is enabled
*/
downSecondEnabled(): boolean;
/**
* PickerMoment's hour value +/- certain amount and compare it to the give date
* 1 is after the comparedDate
* -1 is before the comparedDate
* 0 is equal the comparedDate
*/
private compareHours;
/**
* PickerMoment's minute value +/- certain amount and compare it to the give date
* 1 is after the comparedDate
* -1 is before the comparedDate
* 0 is equal the comparedDate
*/
private compareMinutes;
/**
* PickerMoment's second value +/- certain amount and compare it to the give date
* 1 is after the comparedDate
* -1 is before the comparedDate
* 0 is equal the comparedDate
*/
private compareSeconds;
/**
* Get a valid date object
*/
private getValidDate;
static ɵfac: i0.ɵɵFactoryDeclaration<OwlTimerComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<OwlTimerComponent<any>, "owl-date-time-timer", ["owlDateTimeTimer"], { "pickerMoment": { "alias": "pickerMoment"; "required": false; }; "minDateTime": { "alias": "minDateTime"; "required": false; }; "maxDateTime": { "alias": "maxDateTime"; "required": false; }; "showSecondsTimer": { "alias": "showSecondsTimer"; "required": false; "isSignal": true; }; "hour12Timer": { "alias": "hour12Timer"; "required": false; "isSignal": true; }; "stepHour": { "alias": "stepHour"; "required": false; "isSignal": true; }; "stepMinute": { "alias": "stepMinute"; "required": false; "isSignal": true; }; "stepSecond": { "alias": "stepSecond"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; }, never, never, true, never>;
}
declare class OwlDateTimeContainerComponent<T> implements OnInit, AfterContentInit {
private readonly cdRef;
private readonly elmRef;
private readonly pickerIntl;
private readonly dateTimeAdapter;
protected calendar: OwlCalendarComponent<T>;
protected timer: OwlTimerComponent<T>;
picker: OwlDateTime<T>;
activeSelectedIndex: number;
private retainStartTime;
private retainEndTime;
showTodayButton: boolean;
/**
* The current picker moment. This determines which time period is shown and which date is
* highlighted when using keyboard navigation.
*/
private _clamPickerMoment;
get pickerMoment(): T;
set pickerMoment(value: T);
get pickerType(): PickerType;
/**
* The range 'from' label
*/
get fromLabel(): string;
/**
* The range 'to' label
*/
get toLabel(): string;
/**
* The range 'from' formatted value
*/
get fromFormattedValue(): string;
/**
* The range 'to' formatted value
*/
get toFormattedValue(): string;
get containerElm(): HTMLElement;
ngOnInit(): void;
ngAfterContentInit(): void;
dateSelected(date: T): void;
timeSelected(time: T): void;
/**
* Handle click on inform radio group
*/
handleClickOnInfoGroup(event: Event, index: number): void;
/**
* Handle click on inform radio group
*/
handleKeydownOnInfoGroup(event: KeyboardEvent, next: HTMLElement, index: number): void;
/**
* Set the value of activeSelectedIndex
*/
private setActiveSelectedIndex;
private initPicker;
/**
* Select calendar date in single mode,
* it returns null when date is not selected.
*/
private dateSelectedInSingleMode;
/**
* Select dates in range Mode
*/
private dateSelectedInRangeMode;
/**
* Update the given calendar date's time and check if it is valid
* Because the calendar date has 00:00:00 as default time, if the picker type is 'both',
* we need to update the given calendar date's time before selecting it.
* if it is valid, return the updated dateTime
* if it is not valid, return null
*/
private updateAndCheckCalendarDate;
static ɵfac: i0.ɵɵFactoryDeclaration<OwlDateTimeContainerComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<OwlDateTimeContainerComponent<any>, "owl-date-time-container", ["owlDateTimeContainer"], { "showTodayButton": { "alias": "showTodayButton"; "required": false; }; }, {}, never, never, true, never>;
}
declare class OwlDateTimeInlineComponent<T> extends OwlDateTime<T> implements OnInit, ControlValueAccessor {
#private;
protected readonly container: i0.Signal<OwlDateTimeContainerComponent<any>>;
/**
* Set the type of the dateTime picker
* 'both' -- show both calendar and timer
* 'calendar' -- show only calendar
* 'timer' -- show only timer
*/
pickerType: PickerType;
disabled: boolean;
private _selectMode;
get selectMode(): SelectMode;
set selectMode(mode: SelectMode);
/** The date to open the calendar to initially. */
private _startAt;
get startAt(): T | null;
set startAt(date: T | null);
/** The date to open for range calendar. */
private _endAt;
get endAt(): T | null;
set endAt(date: T | null);
private _dateTimeFilter;
get dateTimeFilter(): (date: T | null) => boolean;
set dateTimeFilter(filter: (date: T | null) => boolean);
/** The minimum valid date. */
private _min;
get minDateTime(): T | null;
set minDateTime(value: T | null);
/** The maximum valid date. */
private _max;
get maxDateTime(): T | null;
set maxDateTime(value: T | null);
private _value;
get value(): T | null;
set value(value: T | null);
private _values;
get values(): Array<T>;
set values(values: Array<T>);
/**
* Limit to the amount of days that can be selected at once.
*/
rangeLimit: number | null;
/**
* Flag to show today button to jump to today's date. Defaults to `false`.
*/
showTodayButton: boolean;
/**
* Variable to hold the old max date time value for when we override it with rangeLimit
*/
private _initialMaxDateTime;
/**
* Emits selected year in multi-year view
* This doesn't imply a change on the selected date.
*/
readonly yearSelected: i0.OutputEmitterRef<T>;
/**
* Emits selected month in year view
* This doesn't imply a change on the selected date.
*/
readonly monthSelected: i0.OutputEmitterRef<T>;
/**
* Emits selected date
*/
readonly dateSelected: i0.OutputEmitterRef<T>;
private _selected;
get selected(): T | null;
set selected(value: T | null);
private _selecteds;
get selecteds(): Array<T>;
set selecteds(values: Array<T>);
readonly opened = true;
get isInSingleMode(): boolean;
get isInRangeMode(): boolean;
private onModelChange;
private onModelTouched;
ngOnInit(): void;
writeValue(value: unknown): void;
registerOnChange(fn: (v: T | Array<T>) => void): void;
registerOnTouched(fn: () => void): void;
select(date: Array<T> | T): void;
/**
* Emits the selected year in multi-year view
*/
selectYear(normalizedYear: T): void;
/**
* Emits selected month in year view
*/
selectMonth(normalizedMonth: T): void;
/**
* Emits the selected date
*/
selectDate(normalizedDate: T): void;
static ɵfac: i0.ɵɵFactoryDeclaration<OwlDateTimeInlineComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<OwlDateTimeInlineComponent<any>, "owl-date-time-inline", never, { "pickerType": { "alias": "pickerType"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectMode": { "alias": "selectMode"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "endAt": { "alias": "endAt"; "required": false; }; "dateTimeFilter": { "alias": "owlDateTimeFilter"; "required": false; }; "minDateTime": { "alias": "min"; "required": false; }; "maxDateTime": { "alias": "max"; "required": false; }; "value": { "alias": "value"; "required": false; }; "values": { "alias": "values"; "required": false; }; "rangeLimit": { "alias": "rangeLimit"; "required": false; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; }; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "dateSelected": "dateSelected"; }, never, never, true, never>;
static ngAcceptInputType_disabled: unknown;
static ngAcceptInputType_showTodayButton: unknown;
}
declare class OwlMonthViewComponent<T> implements OnInit, AfterContentInit, OnDestroy {
private readonly cdRef;
private readonly dateTimeAdapter;
private readonly dateTimeFormats;
/**
* Whether to hide dates in other months at the start or end of the current month.
*/
hideOtherMonths: boolean;
private isDefaultFirstDayOfWeek;
/**
* Define the first day of a week
* Sunday: 0 - Saturday: 6
*/
private _firstDayOfWeek;
get firstDayOfWeek(): number;
set firstDayOfWeek(val: number);
/**
* The select mode of the picker;
*/
private _selectMode;
get selectMode(): SelectMode;
set selectMode(val: SelectMode);
/** The currently selected date. */
private _selected;
get selected(): T | null;
set selected(value: T | null);
private _selecteds;
get selecteds(): Array<T>;
set selecteds(values: Array<T>);
private _pickerMoment;
get pickerMoment(): T;
set pickerMoment(value: T);
/**
* A function used to filter which dates are selectable
*/
private _dateFilter;
get dateFilter(): (date: T) => boolean;
set dateFilter(filter: (date: T) => boolean);
/** The minimum selectable date. */
private _minDate;
get minDate(): T | null;
set minDate(value: T | null);
/** The maximum selectable date. */
private _maxDate;
get maxDate(): T | null;
set maxDate(value: T | null);
private _weekdays;
get weekdays(): Array<Record<Intl.DateTimeFormatOptions['weekday'], string>>;
private _days;
get days(): Array<Array<CalendarCell>>;
get activeCell(): number;
get isInSingleMode(): boolean;
get isInRangeMode(): boolean;
private firstDateOfMonth;
private localeSub;
private initiated;
private dateNames;
/**
* The date of the month that today falls on.
*/
todayDate: number | null;
/**
* An array to hold all selectedDates' value
* the value is the day number in current month
*/
selectedDates: Array<number>;
firstRowOffset: number;
/**
* Callback to invoke when a new date is selected
*/
readonly selectedChange: i0.OutputEmitterRef<T>;
/**
* Callback to invoke when any date is selected.
*/
readonly userSelection: i0.OutputEmitterRef<void>;
/** Emits when any date is activated. */
readonly pickerMomentChange: i0.OutputEmitterRef<T>;
/** The body of calendar table */
calendarBodyElm: OwlCalendarBodyComponent;
ngOnInit(): void;
ngAfterContentInit(): void;
ngOnDestroy(): void;
/**
* Handle a calendarCell selected
*/
selectCalendarCell(cell: CalendarCell): void;
/**
* Handle a new date selected
*/
private selectDate;
/**
* Handle keydown event on calendar body
*/
handleCalendarKeydown(event: KeyboardEvent): void;
/**
* Generate the calendar weekdays array
*/
private generateWeekDays;
/**
* Generate the calendar days array
*/
private generateCalendar;
private updateFirstDayOfWeek;
/**
* Creates CalendarCell for days.
*/
private createDateCell;
/**
* Check if the date is valid
*/
private isDateEnabled;
/**
* Get a valid date object
*/
private getValidDate;
/**
* Check if the give dates are none-null and in the same month
*/
isSameMonth(dateLeft: T, dateRight: T): boolean;
/**
* Set the selectedDates value.
* In single mode, it has only one value which represent the selected date
* In range mode, it would has two values, one for the fromValue and the other for the toValue
*/
private setSelectedDates;
private focusActiveCell;
static ɵfac: i0.ɵɵFactoryDeclaration<OwlMonthViewComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<OwlMonthViewComponent<any>, "owl-date-time-month-view", ["owlYearView"], { "hideOtherMonths": { "alias": "hideOtherMonths"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "selectMode": { "alias": "selectMode"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "selecteds": { "alias": "selecteds"; "required": false; }; "pickerMoment": { "alias": "pickerMoment"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "selectedChange": "selectedChange"; "userSelection": "userSelection"; "pickerMomentChange": "pickerMomentChange"; }, never, never, true, never>;
}
declare class OwlMultiYearViewComponent<T> implements AfterContentInit {
private readonly cdRef;
private readonly pickerIntl;
private readonly dateTimeAdapter;
private readonly options;
/**
* The select mode of the picker;
*/
private _selectMode;
get selectMode(): SelectMode;
set selectMode(val: SelectMode);
/** The currently selected date. */
private _selected;
get selected(): T | null;
set selected(value: T | null);
private _selecteds;
get selecteds(): Array<T>;
set selecteds(values: Array<T>);
private _pickerMoment;
get pickerMoment(): T | null;
set pickerMoment(value: T);
/**
* A function used to filter which dates are selectable
*/
private _dateFilter;
get dateFilter(): (date: T) => boolean;
set dateFilter(filter: (date: T) => boolean);
/** The minimum selectable date. */
private _minDate;
get minDate(): T | null;
set minDate(value: T | null);
/** The maximum selectable date. */
private _maxDate;
get maxDate(): T | null;
set maxDate(value: T | null);
private _todayYear;
protected get todayYear(): number;
private _years;
protected get years(): Array<Array<CalendarCell>>;
private _selectedYears;
protected get selectedYears(): Array<number>;
private initiated;
protected get isInSingleMode(): boolean;
protected get isInRangeMode(): boolean;
protected get activeCell(): number | undefined;
protected get tableHeader(): string | undefined;
protected get prevButtonLabel(): string;
protected get nextButtonLabel(): string;
/**
* Callback to invoke when a new month is selected
*/
readonly changeYear: i0.OutputEmitterRef<T>;
/**
* Emits the selected year. This doesn't imply a change on the selected date
*/
readonly yearSelected: i0.OutputEmitterRef<T>;
/** Emits when any date is activated. */
readonly pickerMomentChange: i0.OutputEmitterRef<T>;
/** Emits when use keyboard enter to select a calendar cell */
readonly keyboardEnter: i0.OutputEmitterRef<void>;
/** The body of calendar table */
protected readonly calendarBodyElm: i0.Signal<OwlCalendarBodyComponent>;
ngAfterContentInit(): void;
/**
* Handle a calendarCell selected
*/
selectCalendarCell(cell: CalendarCell): void;
private selectYear;
/**
* Generate the previous year list
*/
prevYearList(event: Event): void;
/**
* Generate the next year list
*/
nextYearList(event: Event): void;
generateYearList(): void;
/** Whether the previous period button is enabled. */
previousEnabled(): boolean;
/** Whether the next period button is enabled. */
nextEnabled(): boolean;
handleCalendarKeydown(event: KeyboardEvent): void;
/**
* Creates an CalendarCell for the given year.
*/
private createYearCell;
private setSelectedYears;
/** Whether the given year is enabled. */
private isYearEnabled;
private isSameYearList;
/**
* Get a valid date object
*/
private getValidDate;
private focusActiveCell;
static ɵfac: i0.ɵɵFactoryDeclaration<OwlMultiYearViewComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<OwlMultiYearViewComponent<any>, "owl-date-time-multi-year-view", never, { "selectMode": { "alias": "selectMode"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "selecteds": { "alias": "selecteds"; "required": false; }; "pickerMoment": { "alias": "pickerMoment"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "changeYear": "changeYear"; "yearSelected": "yearSelected"; "pickerMomentChange": "pickerMomentChange"; "keyboardEnter": "keyboardEnter"; }, never, never, true, never>;
}
declare class OwlTimerBoxComponent implements OnInit, OnDestroy {
showDivider: boolean;
upBtnAriaLabel: string;
upBtnDisabled: boolean;
downBtnAriaLabel: string;
downBtnDisabled: boolean;
/**
* Value would be displayed in the box
* If it is null, the box would display [value]
*/
boxValue: number;
value: number;
min: number;
max: number;
step: number;
inputLabel: string;
readonly valueChange: i0.OutputEmitterRef<number>;
readonly inputChange: i0.OutputEmitterRef<number>;
private inputStream;
private inputStreamSub;
private hasFocus;
protected get displayValue(): string;
private valueInput;
private onValueInputMouseWheelBind;
ngOnInit(): void;
ngOnDestroy(): void;
upBtnClicked(): void;
downBtnClicked(): void;
handleInputChange(val: string): void;
focusIn(): void;
focusOut(value: string): void;
private updateValue;
private updateValueViaInput;
private onValueInputMouseWheel;
private bindValueInputMouseWheel;
private unbindValueInputMouseWheel;
static ɵfac: i0.ɵɵFactoryDeclaration<OwlTimerBoxComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<OwlTimerBoxComponent, "owl-date-time-timer-box", ["owlDateTimeTimerBox"], { "showDivider": { "alias": "showDivider"; "required": false; }; "upBtnAriaLabel": { "alias": "upBtnAriaLabel"; "required": false; }; "upBtnDisabled": { "alias": "upBtnDisabled"; "required": false; }; "downBtnAriaLabel": { "alias": "downBtnAriaLabel"; "required": false; }; "downBtnDisabled": { "alias": "downBtnDisabled"; "required": false; }; "boxValue": { "alias": "boxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "inputLabel": { "alias": "inputLabel"; "required": false; }; }, { "valueChange": "valueChange"; "inputChange": "inputChange"; }, never, never, true, never>;
}
declare class OwlYearViewComponent<T> implements OnInit, AfterContentInit, OnDestroy {
private readonly cdRef;
private readonly dateTimeAdapter;
private readonly dateTimeFormats;
/**
* The select mode of the picker;
*/
private _selectMode;
get selectMode(): SelectMode;
set selectMode(val: SelectMode);
/** The currently selected date. */
private _selected;
get selected(): T | null;
set selected(value: T | null);
private _selecteds;
get selecteds(): Array<T>;
set selecteds(values: Array<T>);
private _pickerMoment;
get pickerMoment(): T | null;
set pickerMoment(value: T);
/**
* A function used to filter which dates are selectable
*/
private _dateFilter;
get dateFilter(): (date: T) => boolean;
set dateFilter(filter: (date: T) => boolean);
/** The minimum selectable date. */
private _minDate;
get minDate(): T | null;
set minDate(value: T | null);
/** The maximum selectable date. */
private _maxDate;
get maxDate(): T | null;
set maxDate(value: T | null);
private readonly monthNames;
private _months;
protected get months(): Array<Array<CalendarCell>>;
protected get activeCell(): number;
protected get isInSingleMode(): boolean;
protected get isInRangeMode(): boolean;
private localeSub;
private initiated;
todayMonth: number | null;
/**
* An array to hold all selectedDates' month value
* the value is the month number in current year
*/
selectedMonths: Array<number>;
/**
* Callback to invoke when a new month is selected
*/
readonly changeMonth: i0.OutputEmitterRef<T>;
/**
* Emits the selected year. This doesn't imply a change on the selected date
*/
readonly monthSelected: i0.OutputEmitterRef<T>;
/** Emits when any date is activated. */
readonly pickerMomentChange: i0.OutputEmitterRef<T>;
/** Emits when use keyboard enter to select a calendar cell */
readonly keyboardEnter: i0.OutputEmitterRef<void>;
/** The body of calendar table */
protected calendarBodyElm: OwlCalendarBodyComponent;
ngOnInit(): void;
ngAfterContentInit(): void;
ngOnDestroy(): void;
/**
* Handle a calendarCell selected
*/
selectCalendarCell(cell: CalendarCell): void;
/**
* Handle a new month selected
*/
private selectMonth;
/**
* Handle keydown event on calendar body
*/
handleCalendarKeydown(event: KeyboardEvent): void;
/**
* Generate the calendar month list
*/
private generateMonthList;
/**
* Creates an CalendarCell for the given month.
*/
private createMonthCell;
/**
* Check if the given month is enable
*/
private isMonthEnabled;
/**
* Gets the month in this year that the given Date falls on.
* Returns null if the given Date is in another year.
*/
private getMonthInCurrentYear;
/**
* Set the selectedMonths value
* In single mode, it has only one value which represent the month the selected date in
* In range mode, it would has two values, one for the month the fromValue in and the other for the month the toValue in
*/
private setSelectedMonths;
/**
* Check the given dates are in the same year
*/
private hasSameYear;
/**
* Get a valid date object
*/
private getValidDate;
private focusActiveCell;
static ɵfac: i0.ɵɵFactoryDeclaration<OwlYearViewComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<OwlYearViewComponent<any>, "owl-date-time-year-view", ["owlMonthView"], { "selectMode": { "alias": "selectMode"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "selecteds": { "alias": "selecteds"; "required": false; }; "pickerMoment": { "alias": "pickerMoment"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "changeMonth": "changeMonth"; "monthSelected": "monthSelected"; "pickerMomentChange": "pickerMomentChange"; "keyboardEnter": "keyboardEnter"; }, never, never, true, never>;
}
declare class OwlDateTimeModule {
static ɵfac: i0.ɵɵFactoryDeclaration<OwlDateTimeModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<OwlDateTimeModule, never, [typeof OwlCalendarBodyComponent, typeof OwlCalendarComponent, typeof OwlDateTimeContainerComponent, typeof OwlDateTimeInlineComponent, typeof OwlMonthViewComponent, typeof OwlMultiYearViewComponent, typeof OwlTimerBoxComponent, typeof OwlTimerComponent, typeof OwlYearViewComponent], [typeof OwlCalendarComponent, typeof OwlDateTimeInlineComponent, typeof OwlMonthViewComponent, typeof OwlMultiYearViewComponent, typeof OwlTimerComponent, typeof OwlYearViewComponent]>;
static ɵinj: i0.ɵɵInjectorDeclaration<OwlDateTimeModule>;
}
declare class OwlDateTimeIntl {
/**
* Stream that emits whenever the labels here are changed. Use this to notify
* components if the labels have changed after initialization.
*/
readonly changes: Subject<void>;
/** A label for the up second button (used by screen readers). */
upSecondLabel: string;
/** A label for the down second button (used by screen readers). */
downSecondLabel: string;
/** A label for the up minute button (used by screen readers). */
upMinuteLabel: string;
/** A label for the down minute button (used by screen readers). */
downMinuteLabel: string;
/** A label for the up hour button (used by screen readers). */
upHourLabel: string;
/** A label for the down hour button (used by screen readers). */
downHourLabel: string;
/** A label for the previous month button (used by screen readers). */
prevMonthLabel: string;
/** A label for the next month button (used by screen readers). */
nextMonthLabel: string;
/** A label for the previous year button (used by screen readers). */
prevYearLabel: string;
/** A label for the next year button (used by screen readers). */
nextYearLabel: string;
/** A label for the previous multi-year button (used by screen readers). */
prevMultiYearLabel: string;
/** A label for the next multi-year button (used by screen readers). */
nextMultiYearLabel: string;
/** A label for the 'switch to month view' button (used by screen readers). */
switchToMonthViewLabel: string;
/** A label for the 'switch to year view' button (used by screen readers). */
switchToMultiYearViewLabel: string;
/** A label for the range 'from' in picker info */
rangeFromLabel: string;
/** A label for the range 'to' in picker info */
rangeToLabel: string;
/** A label for the hour12 button (AM) */
hour12AMLabel: string;
/** A label for the hour12 button (PM) */
hour12PMLabel: string;
/** A label for the today button */
todayButtonLabel: string;
static ɵfac: i0.ɵɵFactoryDeclaration<OwlDateTimeIntl, neve