Skip to main content

DatetimePickerComponent

DatetimePickerComponent​

@vendure/admin-uidatetime-picker.component.ts

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

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​

property
DayOfWeek

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

timeGranularityInterval​

property

The granularity of the minutes time picker

min​

property
string | null

The minimum date as an ISO string

max​

property
string | null

The maximum date as an ISO string

readonly​

property

Sets the readonly state

property
DropdownComponent

datetimeInput​

property
ElementRef<HTMLInputElement>

calendarTable​

property
ElementRef<HTMLTableElement>

disabled​

property

calendarView$​

property
Observable<CalendarView>

current$​

property
Observable<CurrentView>

selected$​

property
Observable<Date | null>

selectedHours$​

property
Observable<number | null>

selectedMinutes$​

property
Observable<number | null>

years​

property
number[]

weekdays​

property
string[]

hours​

property
number[]

minutes​

property
number[]

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