DatetimePickerComponent
DatetimePickerComponent
A form input for selecting datetime values.
Example
<vdr-datetime-picker [(ngModel)]="startDate"></vdr-datetime-picker>
Signature
class DatetimePickerComponent implements ControlValueAccessor, AfterViewInit, OnInit, OnDestroy {
@Input() yearRange;
@Input() weekStartDay: DayOfWeek = 'mon';
@Input() timeGranularityInterval = 5;
@Input() min: string | null = null;
@Input() max: string | null = null;
@Input() readonly = false;
@ViewChild('dropdownComponent', { static: true }) dropdownComponent: DropdownComponent;
@ViewChild('datetimeInput', { static: true }) datetimeInput: ElementRef<HTMLInputElement>;
@ViewChild('calendarTable') calendarTable: ElementRef<HTMLTableElement>;
disabled = false;
calendarView$: Observable<CalendarView>;
current$: Observable<CurrentView>;
selected$: Observable<Date | null>;
selectedHours$: Observable<number | null>;
selectedMinutes$: Observable<number | null>;
years: number[];
weekdays: string[] = [];
hours: number[];
minutes: number[];
constructor(changeDetectorRef: ChangeDetectorRef, datetimePickerService: DatetimePickerService)
ngOnInit() => ;
ngAfterViewInit() => void;
ngOnDestroy() => void;
registerOnChange(fn: any) => ;
registerOnTouched(fn: any) => ;
setDisabledState(isDisabled: boolean) => ;
writeValue(value: string | null) => ;
prevMonth() => ;
nextMonth() => ;
selectToday() => ;
setYear(event: Event) => ;
setMonth(event: Event) => ;
selectDay(day: DayCell) => ;
clearValue() => ;
handleCalendarKeydown(event: KeyboardEvent) => ;
setHour(event: Event) => ;
setMinute(event: Event) => ;
closeDatepicker() => ;
}
Implements
- ControlValueAccessor
- AfterViewInit
- OnInit
- OnDestroy
Members
yearRange
property
type:
The range above and below the current year which is selectable from
the year select control. If a min or max value is set, these will
override the yearRange.
weekStartDay
property
type:
DayOfWeek
The day that the week should start with in the calendar view.
timeGranularityInterval
property
type:
The granularity of the minutes time picker
min
property
type:
string | null
The minimum date as an ISO string
max
property
type:
string | null
The maximum date as an ISO string
readonly
property
type:
Sets the readonly state
dropdownComponent
property
type:
DropdownComponent
datetimeInput
property
type:
ElementRef<HTMLInputElement>
calendarTable
property
type:
ElementRef<HTMLTableElement>
disabled
property
type:
calendarView$
property
type:
Observable<CalendarView>
current$
property
type:
Observable<CurrentView>
selected$
property
type:
Observable<Date | null>
selectedHours$
property
type:
Observable<number | null>
selectedMinutes$
property
type:
Observable<number | null>
years
property
type:
number[]
weekdays
property
type:
string[]
hours
property
type:
number[]
minutes
property
type:
number[]
constructor
method
type:
(changeDetectorRef: ChangeDetectorRef, datetimePickerService: DatetimePickerService) => DatetimePickerComponent
ngOnInit
method
type:
() =>
ngAfterViewInit
method
type:
() => void
ngOnDestroy
method
type:
() => void
registerOnChange
method
type:
(fn: any) =>
registerOnTouched
method
type:
(fn: any) =>
setDisabledState
method
type:
(isDisabled: boolean) =>
writeValue
method
type:
(value: string | null) =>
prevMonth
method
type:
() =>
nextMonth
method
type:
() =>
selectToday
method
type:
() =>
setYear
method
type:
(event: Event) =>
setMonth
method
type:
(event: Event) =>
selectDay
method
type:
(day: DayCell) =>
clearValue
method
type:
() =>
handleCalendarKeydown
method
type:
(event: KeyboardEvent) =>
setHour
method
type:
(event: Event) =>
setMinute
method
type:
(event: Event) =>
closeDatepicker
method
type:
() =>