Overview
Inline range calendar. Picking a new start clears the previous end; the second pick commits a sorted range.
Selector
[qzDateRangePicker]
| Input |
Type |
Default |
Required |
Description |
min |
Date | null |
null |
|
|
max |
Date | null |
null |
|
|
disabled |
unknown |
false |
|
Transform booleanAttribute; reads as boolean. |
dateDisabled |
DateDisabled | null |
null |
|
|
firstDayOfWeek |
number |
0 |
|
|
locale |
string |
'en' |
|
|
dir |
"ltr" | "rtl" | null |
null |
|
|
today |
Date | null |
null |
|
|
Models
Two-way bindings: each model is an input and emits the matching change output.
| Model |
Type |
Default |
Required |
Change output |
Description |
startDate |
Date | null |
null |
|
startDateChange |
|
endDate |
Date | null |
null |
|
endDateChange |
|
displayedMonth |
Date | null |
null |
|
displayedMonthChange |
|
focusedDate |
Date | null |
null |
|
focusedDateChange |
|
Outputs
| Output |
Payload |
Description |
rangeChangeCommitted |
DateRange |
|
Properties
| Name |
Type |
Description |
readonly previewDate |
WritableSignal<Date | null> |
|
readonly isDisabled |
Signal<boolean> |
|
readonly currentToday |
Signal<Date> |
|
readonly start |
Signal<Date | null> |
|
readonly end |
Signal<Date | null> |
|
readonly month |
Signal<Date> |
|
readonly monthLabel |
Signal<string> |
|
readonly weekdays |
Signal<string[]> |
|
readonly focused |
Signal<Date> |
|
readonly days |
Signal<CalendarDay[]> |
|
readonly weeks |
Signal<CalendarDay[][]> |
|
readonly range |
Signal<DateRange> |
|
readonly isSelectingEnd |
Signal<boolean> |
|
Public methods
moveFocus
moveFocus(value: Date): void
| Parameter |
Type |
Optional |
Description |
value |
Date |
|
|
onDateButtonKeydown(date: Date, event: KeyboardEvent): void
| Parameter |
Type |
Optional |
Description |
date |
Date |
|
|
event |
KeyboardEvent |
|
|
chooseDate
chooseDate(value: Date): void
| Parameter |
Type |
Optional |
Description |
value |
Date |
|
|
setPreview
setPreview(value: Date | null): void
| Parameter |
Type |
Optional |
Description |
value |
Date | null |
|
|
isFocused
isFocused(date: Date): boolean
| Parameter |
Type |
Optional |
Description |
date |
Date |
|
|
clear
clear(): void
previousMonth
previousMonth(): void
nextMonth
nextMonth(): void
setFormDisabled(value: boolean): void
| Parameter |
Type |
Optional |
Description |
value |
boolean |
|
|
writeFormValue(value: DateRange | null | undefined): void
| Parameter |
Type |
Optional |
Description |
value |
DateRange | null | undefined |
|
|
isDateDisabled
isDateDisabled(value: Date): boolean
| Parameter |
Type |
Optional |
Description |
value |
Date |
|
|
isDateSelected
isDateSelected(value: Date): boolean
| Parameter |
Type |
Optional |
Description |
value |
Date |
|
|
isDateFocused
isDateFocused(value: Date): boolean
| Parameter |
Type |
Optional |
Description |
value |
Date |
|
|
isInRange
isInRange(value: Date): boolean
| Parameter |
Type |
Optional |
Description |
value |
Date |
|
|