A 35 mm camera and a 50 mm lens, ready to go.
interface QDateProps<Range extends boolean = false> extends Pick<Omit<HTMLInputAttributes, "value" | "disabled">, "aria-describedby" | "aria-label" | "id" | "tabindex">
?: boolean = false?: string = undefined?: HTMLAttributes<HTMLDivElement>["class"] = undefined
?: string = undefined?: QDateDisplayMode = "calendar"
?: boolean = false?: boolean = false?: QDateDisabledDates = undefined
?: boolean = false?: string = undefined?: boolean = false?: QDateWeekday = undefined
?: string = undefined?: string = undefined?: string = undefined?: Partial<QDateLabels> = undefined
?: string = undefined?: string = "YYYY-MM-DD"?: string = undefined?: string = undefined?: boolean = $bindable(false)
?: boolean = false?: Range = false?: boolean = false?: boolean = false?: string = undefined?: boolean = true?: HTMLAttributes<HTMLDivElement>["style"] = undefined
?: string = undefined?: string = $bindable("")
?: QDateValue<Range> = $bindable(undefined)
?: QDateVariant = "modal"
?: readonly [number, number] = [1900, 2100]Set range and bind an object with start and end dates, or null. Both endpoints use the model mask, which
defaults to YYYY-MM-DD.
Select a start, then the same day or a later end. Choosing an earlier day restarts the range. The calendar highlights both endpoints and the days between them.
35 mm camera + 50 mm lens
Collection and return days are included in this estimate.
defaultMode="input". Ranges show
separate start and end fields. Users can switch between calendar and text entry unless showModeToggle is false. The input format follows locale.Enter your studio booking.
Limit dates with min, max, yearRange, and disabledDates (an array or predicate). Constraint values always use YYYY-MM-DD, regardless of the model mask.
Every day in a range must be available, including the endpoints. A range crossing a disabled date cannot be confirmed.
October 2026 rental calendar
Your plan: 19 Oct 2026 – 22 Oct 2026
Use variant="docked" inside QInput's append snippet for an
anchored picker. adaptive uses the same presentation at sm and above, then a full-screen modal on smaller screens.
Composed inputs control their own labels, masks, and errors. For a range, bind each
input to one endpoint and pass the complete object to QDate. Bind validationMessage to show validation in the surrounding fields.
Ready at the counter: 16 Oct 2026
4 days with the wide-angle lens
range, the model remains a date string or null. The
default modal variant renders its own field and becomes full-screen on small screens.Two rolls, 72 little moments.
Collection pencilled in for 20 Oct 2026.
QDate's mask controls the stored model; a composed QInput uses its own
input mask. Keep their date order consistent, as in the docked example. locale controls display formatting, text entry, and the default first
weekday. firstDayOfWeek overrides it, with Sunday as 0.
Switch languages to translate the picker labels, actions, and validation messages. See available locales for setup instructions.
open or call show(), hide(), and toggle(). Customize the titles, action labels, or individual accessible
labels with labels. Both disabled and readonly prevent opening.Your chosen dates are saved in this plan
Selections remain drafts until confirmed. Cancel and Escape leave the model unchanged.
With autoApply, a single date commits immediately; a range commits only
after both endpoints form a valid selection.
Validation distinguishes invalid dates, unavailable dates, reversed ranges, and ranges
containing unavailable days. Customize these messages with labels.invalidDate, labels.unavailableDate, labels.invalidRange, and labels.unavailableRange.