DatetimePickerComponent

A form input for selecting datetime values.

Example

HTML

<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

yearRange

property

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

propertyDayOfWeek

The day that the week should start with in the calendar view.

timeGranularityInterval

property

The granularity of the minutes time picker

min

propertystring | null

The minimum date as an ISO string

max

propertystring | null

The maximum date as an ISO string

readonly

property

Sets the readonly state

dropdownComponent

propertyDropdownComponent

datetimeInput

propertyElementRef<HTMLInputElement>

calendarTable

propertyElementRef<HTMLTableElement>

disabled

property

calendarView$

propertyObservable<CalendarView>

current$

propertyObservable<CurrentView>

selected$

propertyObservable<Date | null>

selectedHours$

propertyObservable<number | null>

selectedMinutes$

propertyObservable<number | null>

years

propertynumber[]

weekdays

propertystring[]

hours

propertynumber[]

minutes

propertynumber[]

constructor

method(changeDetectorRef: ChangeDetectorRef, datetimePickerService: DatetimePickerService) => DatetimePickerComponent

ngOnInit

method() =>

ngAfterViewInit

method() => void

ngOnDestroy

method() => void

registerOnChange

method(fn: any) =>

registerOnTouched

method(fn: any) =>

setDisabledState

method(isDisabled: boolean) =>

writeValue

method(value: string | null) =>

prevMonth

method() =>

nextMonth

method() =>

selectToday

method() =>

setYear

method(event: Event) =>

setMonth

method(event: Event) =>

selectDay

method(day: DayCell) =>

clearValue

method() =>

handleCalendarKeydown

method(event: KeyboardEvent) =>

setHour

method(event: Event) =>

setMinute

method(event: Event) =>

closeDatepicker

method() =>