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
property

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:
() =>