@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
101 lines (100 loc) • 6.88 kB
TypeScript
import { WeekDay } from '@angular/common';
import { EventEmitter, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { DateFormatter } from '../../pipes/date-formatter/date-formatter.type';
import { DateTimePickerTimezone } from '../date-time-picker/date-time-picker.utils';
import { DateRangePicker, DateRangeService } from './date-range.service';
import * as i0 from "@angular/core";
export declare class DateRangePickerComponent implements OnDestroy {
readonly rangeService: DateRangeService;
private readonly _destroyRef;
/** Expose enum to the view */
DateRangePicker: typeof DateRangePicker;
/** The selected start date to be displayed in the component. */
set start(start: Date);
/** The selected end date to be displayed in the component. */
set end(end: Date);
/** Define the date localization that should be used can be either a string on a function */
dateFormat: string | DateFormatter;
/** Define the time localization that should be used can be either a string on a function */
timeFormat: string | DateFormatter;
/** The earliest selectable date. */
min: Date;
/** The latest selectable date. */
max: Date;
/** Defines whether or not the time picker should allow the user to choose a timezone. */
showTimezone: boolean;
/** Defines whether or not the time picker should allow the user to specify seconds. */
showSeconds: boolean;
/** Defines whether or not the time picker should show an AM/PM button, or time should be represented in 24hr format instead. */
showMeridian: boolean;
/** Defines whether or not the time picker should allow the user to select the time using spinners. */
showSpinners: boolean;
/** If defined will override the weekday names displayed. */
weekdays: string[];
/** Defines the names of the months. */
months: string[];
/** Defines the short names of each month. */
monthsShort: string[];
/** Defines the labels to show in the meridian (AM/PM) selector. */
meridians: string[];
/** Defines the text to be displayed in the button used to set the selected time to the current time. */
nowBtnText: string;
/** Specify whether or not the show now button should be visible */
showNowBtn: boolean;
/** Defines the title to display above the start picker. */
selectStartTitle: string;
/** Defines the title to display above the end picker. */
selectEndTitle: string;
/** Define the aria label for the now button */
nowBtnAriaLabel: string;
/** Defines the aria label for the range start picker */
set startPickerAriaLabel(label: string);
/** Defines the aria label for the range end picker */
set endPickerAriaLabel(label: string);
/** Defines whether or not the time picker should be visible. */
set showTime(showTime: boolean);
get showTime(): boolean;
/**
* Defines the list of available timezones. The `DateTimePickerTimezone` interface specifies that each timezone should
* be an object with a `name` property that represents the timezone, eg. `GMT+2`, and an `offset` property that represents
* the number of minutes relative to GMT the timezone is.
*/
timezones: DateTimePickerTimezone[];
/** Will set the selected start timezone. */
startTimezone: DateTimePickerTimezone;
/** Will set the selected end timezone. */
endTimezone: DateTimePickerTimezone;
/** Defines the day of the week that should appear in the first column. `WeekDay` is an enumeration available in `@angular/common`. */
startOfWeek: WeekDay;
/** Define a function to return the number of days within the selected range */
durationTitle: (days: number) => string;
/** Emit when the start date changes */
startChange: EventEmitter<Date>;
/** Emit when the end date changes */
endChange: EventEmitter<Date>;
/** Emit when the start timezone changes. */
startTimezoneChange: EventEmitter<DateTimePickerTimezone>;
/** Emit when the end timezone changes. */
endTimezoneChange: EventEmitter<DateTimePickerTimezone>;
/** Calculate the number of days between the start and end date */
get _duration(): number | null;
/** Use an observable to debounce rapid start changes */
startChange$: Subject<Date>;
/** Use an observable to debounce rapid end changes */
endChange$: Subject<Date>;
/** Unsubscribe from all observables private */
private readonly _onDestroy;
constructor();
ngOnDestroy(): void;
/** Clear the selected date range */
clear(): void;
/** Get the timezone based on the machine timezone */
private getCurrentTimezone;
private onStartChange;
private onEndChange;
/** Get the text to display to indicate the duration */
private getDurationTitle;
static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePickerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePickerComponent, "ux-date-range-picker", never, { "start": { "alias": "start"; "required": false; }; "end": { "alias": "end"; "required": false; }; "dateFormat": { "alias": "dateFormat"; "required": false; }; "timeFormat": { "alias": "timeFormat"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "showTimezone": { "alias": "showTimezone"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; "showMeridian": { "alias": "showMeridian"; "required": false; }; "showSpinners": { "alias": "showSpinners"; "required": false; }; "weekdays": { "alias": "weekdays"; "required": false; }; "months": { "alias": "months"; "required": false; }; "monthsShort": { "alias": "monthsShort"; "required": false; }; "meridians": { "alias": "meridians"; "required": false; }; "nowBtnText": { "alias": "nowBtnText"; "required": false; }; "showNowBtn": { "alias": "showNowBtn"; "required": false; }; "selectStartTitle": { "alias": "selectStartTitle"; "required": false; }; "selectEndTitle": { "alias": "selectEndTitle"; "required": false; }; "nowBtnAriaLabel": { "alias": "nowBtnAriaLabel"; "required": false; }; "startPickerAriaLabel": { "alias": "startPickerAriaLabel"; "required": false; }; "endPickerAriaLabel": { "alias": "endPickerAriaLabel"; "required": false; }; "showTime": { "alias": "showTime"; "required": false; }; "timezones": { "alias": "timezones"; "required": false; }; "startTimezone": { "alias": "startTimezone"; "required": false; }; "endTimezone": { "alias": "endTimezone"; "required": false; }; "startOfWeek": { "alias": "startOfWeek"; "required": false; }; "durationTitle": { "alias": "durationTitle"; "required": false; }; }, { "startChange": "startChange"; "endChange": "endChange"; "startTimezoneChange": "startTimezoneChange"; "endTimezoneChange": "endTimezoneChange"; }, never, never, false, never>;
}