Getting Started
InstallationVersioningMigrate from v2 to v3
Integrations
ESLintTailwind CSS
Theming, Patterns, and Pitfalls
Components
OverviewAccordionAlert Banner
AvatarBreadcrumbsButtonButton GroupCard
CheckboxCheckbox Group
CollapsibleComboboxData Grid / TableDate Picker
Beta
DialogDividerDrawerFile Input
Header BarIconIcon ButtonInline Icon ButtonInline Notification
LinkMenuNumber InputPaginationPassword InputPopoverProgressProgress RingRadioSegmented ControlSelectSide NavSliderStepper
Beta
SwitchSwitch Group
TabsTagText Area
Text InputToast NotificationTooltipTree

Date Picker

3.2.0Beta

The date picker lets users select a single date, multiple dates, or a date range from a calendar, with day, month, and year views.

import {DatePickerModule} from "@qualcomm-ui/angular/date-picker"

Overview

  • The value is an array of DateValue from @internationalized/date, not a native Date. The type is re-exported from @qualcomm-ui/angular/date-picker, along with parseDate, today, getLocalTimeZone, and CalendarDate.
  • Build values with parseDate("2026-08-14") for fixed dates, or today(getLocalTimeZone()) for relative ones. Both return a CalendarDate, a date with no time attached.
  • To keep a time alongside the date, start from a CalendarDateTime or ZonedDateTime instead. Picking a new day preserves the time.
  • Avoid converting a native Date. Only its local year, month, and day are read, so a UTC timestamp such as new Date("2026-08-14T00:00:00Z") becomes August 13 in time zones behind UTC. Pass the ISO date string to parseDate instead.

Examples

Single Date

The default selectionMode. Type a date into the field in the locale format, or pick one from the calendar.

<q-date-picker class="w-64" label="Departure date" />

Child Directives

Provide child directives to customize specific elements while keeping the simple API's default structure. Anything not provided falls back to the default.

q-date-picker-control, q-date-picker-input-group, q-date-picker-hint, q-date-picker-error-text, q-date-picker-headline, q-date-picker-headline-label, q-date-picker-headline-value, q-date-picker-presets, and q-date-picker-actions can all be provided this way. Use this to reach inputs the simple API does not expose, such as moreLabel on the headline value.

Providing q-date-picker-actions also adds the footer, so closeOnSelect does not need to be set. The inline variant never shows a footer, so it ignores that directive.

Travel dates Aug 10, 2026 and 2 more
S M T W T F S
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
<q-date-picker class="w-64" label="Departure date">
  <div q-date-picker-actions>
    <button q-date-picker-cancel-trigger>Discard</button>
    <button q-date-picker-ok-trigger>Apply</button>
  </div>
</q-date-picker>

<q-date-picker
  selectionMode="multiple"
  variant="inline"
  [defaultValue]="defaultValue"
>
  <span q-date-picker-headline-label>Travel dates</span>
  <span
    placeholder="No dates yet"
    q-date-picker-headline-value
    [moreLabel]="moreLabel"
  ></span>
</q-date-picker>

Composite

Build with the composite API for granular control. The simple <q-date-picker> renders exactly this tree, including the three q-date-picker-view blocks for the day, month, and year views.

A departure date is required
<div
  class="w-64"
  q-date-picker-root
  required
  [invalid]="!value().length"
  (valueChanged)="onValueChange($event)"
>
  <div q-date-picker-control>
    <div label="Departure date" q-date-picker-input-group></div>
  </div>
  <div q-date-picker-hint>Choose a date in mm/dd/yyyy format</div>
  <div q-date-picker-error-text>A departure date is required</div>

  <ng-template qPortal>
    <div q-date-picker-positioner>
      <div q-date-picker-content>
        <div q-date-picker-view view="day">
          <div q-date-picker-view-control>
            <button q-date-picker-view-trigger view="month">
              <q-date-picker-month-text />
            </button>
            <button q-date-picker-view-trigger view="year">
              <q-date-picker-year-text />
            </button>
            <button q-date-picker-prev-trigger></button>
            <button q-date-picker-next-trigger></button>
          </div>
          <table q-date-picker-table>
            <thead q-date-picker-day-grid-header></thead>
            <tbody q-date-picker-day-grid></tbody>
          </table>
        </div>

        <div q-date-picker-view view="month">
          <div q-date-picker-view-control>
            <button disabled q-date-picker-view-trigger view="month">
              <q-date-picker-month-text />
            </button>
            <button disabled q-date-picker-view-trigger view="year">
              <q-date-picker-year-text />
            </button>
            <button q-date-picker-prev-trigger></button>
            <button q-date-picker-next-trigger></button>
            <button q-date-picker-view-close-trigger></button>
          </div>
          <table q-date-picker-table>
            <tbody q-date-picker-month-grid></tbody>
          </table>
        </div>

        <div q-date-picker-view view="year">
          <div q-date-picker-view-control>
            <button disabled q-date-picker-view-trigger view="month">
              <q-date-picker-month-text />
            </button>
            <button disabled q-date-picker-view-trigger view="year">
              <q-date-picker-year-text />
            </button>
            <button q-date-picker-prev-trigger></button>
            <button q-date-picker-next-trigger></button>
            <button q-date-picker-view-close-trigger></button>
          </div>
          <table q-date-picker-table>
            <tbody q-date-picker-year-grid></tbody>
          </table>
        </div>
      </div>
    </div>
  </ng-template>
</div>

Range

Set selectionMode="range" to collect a start and end date. Use the separator input on q-date-picker, or on the composite q-date-picker-input-group, to change the character between the two inputs; it defaults to -. The calendar shows a band between the two dates.

A range can be partially filled, in which case the missing end is null.

- 
<q-date-picker class="w-80" label="Trip dates" selectionMode="range" />

Multiple

Set selectionMode="multiple" to collect several dates, shown as dismissible tags in the field. The field is display-only in this mode, so dates are picked from the calendar rather than typed.

Use maxSelectedDates to cap how many dates can be selected.

The popover always shows action buttons in this mode.

Select dates 
<q-date-picker
  class="w-80"
  label="Maintenance days"
  selectionMode="multiple"
  [maxSelectedDates]="4"
/>

Action Buttons

Set closeOnSelect to false to add a footer with Cancel and OK buttons. selectionMode="multiple" always includes it.

Selections apply as they are made. OK keeps them and closes the popover, while Cancel, Escape, and clicking outside all revert to the value the popover opened with. The field's clear button applies immediately and is not affected by Cancel.

<q-date-picker
  class="w-64"
  label="Departure date"
  [closeOnSelect]="false"
/>

Open on Click

Set openOnClick to automatically open the popover when the user clicks the field. This keeps focus in it so typing continues.

<q-date-picker class="w-64" label="Departure date" openOnClick />

Presets

Use the presets input to offer common selections, such as the last 7 days. A button in the day view header opens the presets panel.

Each preset is a {label, value} pair, where value is either a named range such as "next7Days" or an explicit DateValue[].

- 
<q-date-picker
  class="w-80"
  label="Date range"
  selectionMode="range"
  [presets]="presets"
/>

Sizes

This component supports three size options to accommodate different layout densities.

The available sizes are sm, md, and lg. The default size is md. Size applies to the input field only; the calendar is unaffected.

<q-date-picker class="w-64" label="Small" size="sm" />
<q-date-picker class="w-64" label="Medium" size="md" />
<q-date-picker class="w-64" label="Large" size="lg" />

Hint and Error Text

Add a hint to provide additional context below the field. When invalid is true, the errorText replaces it and the field shows an error indicator icon.

Choose a date in mm/dd/yyyy format
A departure date is required
<q-date-picker
  class="w-64"
  hint="Choose a date in mm/dd/yyyy format"
  label="Departure date"
/>
<q-date-picker
  class="w-64"
  errorText="A departure date is required"
  hint="Choose a date in mm/dd/yyyy format"
  invalid
  label="Departure date"
/>

States

The date picker supports disabled, read-only, and invalid states. When you bind a reactive form control, set the state through the control rather than these inputs.

Choose a later date
<q-date-picker
  class="w-64"
  disabled
  label="Disabled"
  [defaultValue]="departureDate"
/>
<q-date-picker
  class="w-64"
  label="Read only"
  readOnly
  [defaultValue]="departureDate"
/>
<q-date-picker
  class="w-64"
  errorText="Choose a later date"
  invalid
  label="Invalid"
  [defaultValue]="departureDate"
/>

Min and Max Dates

Use the min and max inputs to bound the selectable dates. Dates outside the bounds are disabled, and typed values are clamped into range.

Within the next 30 days
<q-date-picker
  class="w-64"
  hint="Within the next 30 days"
  label="Departure date"
  [max]="max"
  [min]="min"
/>

Outside Days

Days from the previous and next month fill the first and last week of the grid. Set hideOutsideDays to leave those cells empty instead.

Date Select date
S M T W T F S
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
<q-date-picker hideOutsideDays variant="inline" />

Unavailable Dates

Use the isDateUnavailable input to block individual dates that min and max cannot express, such as weekends or holidays.

Weekends are not available
<q-date-picker
  class="w-64"
  hint="Weekends are not available"
  label="Delivery date"
  [isDateUnavailable]="isWeekend"
/>

Locale

Use the locale input to change how dates are displayed and parsed. It takes a BCP 47 language tag and defaults to en-US. The month and weekday names, the first day of the week, the placeholder, and the separators the field accepts all follow from it. For example, de-DE gives a dd.mm.yyyy placeholder and accepts . as the separator.

Use the startOfWeek input to override only the first day of the week.

Locale
<q-date-picker class="w-64" label="Departure date" [locale]="locale()" />

Inline

Set variant to inline to render an always-visible calendar with no field or popover. This variant never shows action buttons and has no inputs, so it does not submit a value with a native form; read the selection through the bound form control.

The inline variant shows a headline with the label and current value. Set [headline]="false" to remove it.

Date Select date
S M T W T F S
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
S M T W T F S
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
<q-date-picker variant="inline" />
<q-date-picker variant="inline" [headline]="false" />

Custom Trigger

*datePickerContext is a structural directive that hands you the picker api, so you can drive your own presentation from the picker's state. Use it to read the current value, format your own label, or call actions such as clearValue.

<span *datePickerContext="let api">
  {{ api.valueAsString[0] || "No date selected" }}
</span>

q-date-picker-trigger pairs with it to replace the field entirely. It is a behavioral, unstyled trigger with no styled wrapper, so compose it with q-button on the same element. Place it inside q-date-picker-control, which anchors the popover.

<button *datePickerContext="let api" q-button q-date-picker-trigger variant="outline">
  {{ api.valueAsString[0] || "Pick a date" }}
</button>

Accessibility attributes, focus restoration, and dismissal behavior come from the picker, so you do not write them yourself.

<div q-date-picker-root [closeOnSelect]="false">
  <div
    *datePickerContext="let api"
    class="flex gap-2"
    q-date-picker-control
  >
    <button q-button q-date-picker-trigger variant="outline">
      {{ api.valueAsString[0] || "Pick a date" }}
    </button>
    @if (api.value.length) {
      <button
        q-button
        type="button"
        variant="ghost"
        (click)="api.clearValue()"
      >
        Clear
      </button>
    }
  </div>

  <ng-template qPortal>
    <div q-date-picker-positioner>
      <div q-date-picker-content>
        <div q-date-picker-headline>
          <span q-date-picker-headline-label></span>
          <span q-date-picker-headline-value></span>
        </div>

        <div q-date-picker-view view="day">
          <div q-date-picker-view-control>
            <button q-date-picker-view-trigger view="month">
              <q-date-picker-month-text />
            </button>
            <button q-date-picker-view-trigger view="year">
              <q-date-picker-year-text />
            </button>
            <button q-date-picker-prev-trigger></button>
            <button q-date-picker-next-trigger></button>
          </div>
          <table q-date-picker-table>
            <thead q-date-picker-day-grid-header></thead>
            <tbody q-date-picker-day-grid></tbody>
          </table>
        </div>

        <div q-date-picker-view view="month">
          <div q-date-picker-view-control>
            <button disabled q-date-picker-view-trigger view="month">
              <q-date-picker-month-text />
            </button>
            <button disabled q-date-picker-view-trigger view="year">
              <q-date-picker-year-text />
            </button>
            <button q-date-picker-prev-trigger></button>
            <button q-date-picker-next-trigger></button>
            <button q-date-picker-view-close-trigger></button>
          </div>
          <table q-date-picker-table>
            <tbody q-date-picker-month-grid></tbody>
          </table>
        </div>

        <div q-date-picker-view view="year">
          <div q-date-picker-view-control>
            <button disabled q-date-picker-view-trigger view="month">
              <q-date-picker-month-text />
            </button>
            <button disabled q-date-picker-view-trigger view="year">
              <q-date-picker-year-text />
            </button>
            <button q-date-picker-prev-trigger></button>
            <button q-date-picker-next-trigger></button>
            <button q-date-picker-view-close-trigger></button>
          </div>
          <table q-date-picker-table>
            <tbody q-date-picker-year-grid></tbody>
          </table>
        </div>

        <div q-date-picker-actions>
          <button q-date-picker-cancel-trigger></button>
          <button q-date-picker-ok-trigger></button>
        </div>
      </div>
    </div>
  </ng-template>
</div>

Within Dialog

Set disablePortal to render the calendar popover in place rather than at the end of document.body. This is required inside a Dialog or Popover.

<q-date-picker class="w-64" disablePortal label="Departure date" />

Forms

The control value is an array of DateValue | null, and entries can be null when a range is partially filled.

The selection is also submitted natively under name, and the number of entries follows the selection mode: one for a single date, two for a range, and one per date in multiple mode. Entries arrive in document order, so a range is always start then end.

A range keeps the position of each end, so clearing only the start submits an empty first entry with the end date second. Read a range by position rather than by taking the first non-empty entry.

Resetting the form restores the initial value.

Reactive Forms

Bind a FormControl with [formControl] or formControlName. The disabled, invalid, and required inputs have no effect in this case; use the equivalent form control bindings instead.

In range mode, a required control also applies a validator that rejects a partially filled range.

Choose a date in mm/dd/yyyy format
import {Component, inject} from "@angular/core"
import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms"

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {DatePickerModule} from "@qualcomm-ui/angular/date-picker"
import type {DateValue} from "@qualcomm-ui/core/date-picker"

@Component({
  imports: [DatePickerModule, ReactiveFormsModule, ButtonModule],
  selector: "date-picker-reactive-forms-demo",
  template: `
    <form
      class="flex w-64 flex-col gap-2"
      [formGroup]="form"
      (ngSubmit)="onSubmit()"
    >
      <q-date-picker
        errorText="A departure date is required"
        formControlName="departureDate"
        hint="Choose a date in mm/dd/yyyy format"
        label="Departure date"
      />

      <div class="mt-1 grid grid-cols-2 grid-rows-1 gap-3">
        <button
          emphasis="primary"
          q-button
          size="sm"
          type="button"
          variant="outline"
          (click)="reset()"
        >
          Reset
        </button>
        <button
          emphasis="primary"
          q-button
          size="sm"
          type="submit"
          variant="fill"
        >
          Submit
        </button>
      </div>
    </form>
  `,
})
export class DatePickerReactiveFormsDemo {
  private fb = inject(FormBuilder)

  form = this.fb.group({
    departureDate: [[] as (DateValue | null)[], Validators.required],
  })

  onSubmit() {
    if (this.form.valid) {
      console.log("Form submitted:", {
        ...this.form.value,
      })
    }
  }

  reset() {
    this.form.reset({
      departureDate: [],
    })
  }
}

Template Forms

Bind ngModel for template-driven forms. Here the disabled, readOnly, invalid, and required inputs govern the state of the control.

Choose a date in mm/dd/yyyy format
 2026-08-14 
<q-date-picker
  class="w-64"
  hint="Choose a date in mm/dd/yyyy format"
  label="Departure date"
  [(ngModel)]="value"
/>

Explorer

Component Anatomy

Hover to highlight, click to view API

rootcontrollabelinput-groupinputclear-triggertriggerhintcontentview-controlview-triggerprev-triggernext-triggertabletable-cell-triggerpresets-triggerpresetspreset-trigger

API

<q-date-picker>

The simple date picker extends the q-date-picker-root directive with the following properties:

A date picker with the full calendar composed for you. Defaults to a labelled field that opens a calendar popover; use variant for an always-on inline calendar. For finer control, compose the parts yourself with q-date-picker-root and friends.
PropTypeDefault
disablePortal
Set to true to disable portalling behavior for the calendar popover.
boolean
errorText
Optional error that describes the element when invalid is true.
string
fixOnBlur
Whether to fix the input value on blur.
boolean
true
headline
Whether to render the headline (label and selected value) above the calendar. Only applies to the inline variant.
boolean
true
hint
Optional hint describing the element. This element is automatically associated with the component's input element for accessibility.
string
label
Label text rendered above the field.
string
presets
Quick-select presets shown alongside the calendar. When provided, a toggle is rendered in the day view to reveal the preset list.
Array<{
  label: string
  value:
    | Array<DateValue>
    | 'thisWeek'
    | 'lastWeek'
    | 'nextWeek'
    | 'thisMonth'
    | 'lastMonth'
    | 'nextMonth'
    | 'thisQuarter'
    | 'lastQuarter'
    | 'nextQuarter'
    | 'thisYear'
    | 'lastYear'
    | 'nextYear'
    | 'last3Days'
    | 'last7Days'
    | 'last14Days'
    | 'last30Days'
    | 'last90Days'
    | 'next3Days'
    | 'next7Days'
    | 'next14Days'
    | 'next30Days'
    | 'next90Days'
}>
separator
Character shown between the start and end inputs of a range picker.
string
'-'
variant
The presentation of the date picker.
- input - a labelled field that opens the calendar in a popover.
- inline - an always-visible, flat calendar that commits on selection.
| 'input'
| 'inline'
'input'
disablePortal
Type
boolean
Description
Set to true to disable portalling behavior for the calendar popover.
errorText
Type
string
Description
Optional error that describes the element when invalid is true.
fixOnBlur
Type
boolean
Description
Whether to fix the input value on blur.
headline
Type
boolean
Description
Whether to render the headline (label and selected value) above the calendar. Only applies to the inline variant.
hint
Type
string
Description
Optional hint describing the element. This element is automatically associated with the component's input element for accessibility.
label
Type
string
Description
Label text rendered above the field.
presets
Type
Array<{
  label: string
  value:
    | Array<DateValue>
    | 'thisWeek'
    | 'lastWeek'
    | 'nextWeek'
    | 'thisMonth'
    | 'lastMonth'
    | 'nextMonth'
    | 'thisQuarter'
    | 'lastQuarter'
    | 'nextQuarter'
    | 'thisYear'
    | 'lastYear'
    | 'nextYear'
    | 'last3Days'
    | 'last7Days'
    | 'last14Days'
    | 'last30Days'
    | 'last90Days'
    | 'next3Days'
    | 'next7Days'
    | 'next14Days'
    | 'next30Days'
    | 'next90Days'
}>
Description
Quick-select presets shown alongside the calendar. When provided, a toggle is rendered in the day view to reveal the preset list.
separator
Type
string
Description
Character shown between the start and end inputs of a range picker.
variant
Type
| 'input'
| 'inline'
Description
The presentation of the date picker.
- input - a labelled field that opens the calendar in a popover.
- inline - an always-visible, flat calendar that commits on selection.

Composite API

This section describes the elements of the date picker's composite API.

q-date-picker-root

PropTypeDefault
closeOnSelect
Whether the calendar should close after the date selection is complete. This is ignored when the selection mode is multiple.
boolean
true
createCalendar
A function that creates a Calendar object for a given calendar identifier. Enables non-Gregorian calendar support (Persian, Buddhist, Islamic, etc.) without bundling all calendars by default.
(
  identifier: CalendarIdentifier,
) => Calendar
defaultFocusedValue
The initial focused date when rendered. Use when you don't need to control the focused date of the date picker.
DateValue
defaultOpen
The initial open state of the date picker when rendered. Use when you don't need to control the open state of the date picker.
boolean
defaultValue
The initial value of the input when rendered. Use when you don't need to control the value of the input. This property will be ignored if you opt into controlled state via form control bindings.
DateValue[]
defaultView
The default view of the calendar.
| 'day'
| 'month'
| 'year'
'day'
dir
The document's text/writing direction.
'ltr' | 'rtl'
'ltr'
disabled
Controls whether the input is disabled in template-driven forms. When true, prevents user interaction and applies visual styling to indicate the disabled state.
boolean
fixedWeeks
Whether the calendar should have a fixed number of weeks. This renders the calendar with 6 weeks instead of 5 or 6.
boolean
focusedValue
The controlled focused date.
DateValue
format
The format of the date to display in the input.
(
  date: DateValue,
  details: {
    locale: string
    timeZone: string
  },
) => string
hideOutsideDays
Whether to hide days from the previous and next months in the current month view. By default those days are shown.
boolean
false
immediate
Whether to synchronize the present change immediately or defer it to the next frame.
boolean
false
inline
Whether to render the date picker inline.
boolean
invalid
Controls the visual error state of the input. When true, applies semantic error styling to indicate validation failure.
boolean
isDateUnavailable
Returns whether a date of the calendar is available.
(
  date: DateValue,
  locale: string,
) => boolean
lazyMount
When true, the component will not be rendered in the DOM until it becomes visible or active.
boolean
false
locale
The locale (BCP 47 language tag) to use when formatting the date.
string
'en-US'
max
The maximum date that can be selected.
DateValue
maxSelectedDates
The maximum number of dates that can be selected. This is only applicable when selectionMode is multiple.
number
maxView
The maximum view of the calendar.
| 'day'
| 'month'
| 'year'
'year'
min
The minimum date that can be selected.
DateValue
minView
The minimum view of the calendar.
| 'day'
| 'month'
| 'year'
'day'
name
The name of the input field. Useful for form submission.
string
open
The controlled open state of the date picker.
boolean
openOnClick
Whether to open the calendar when the input is clicked.
boolean
false
outsideDaySelectable
Whether days outside the visible range can be selected.
boolean
false
parse
Function to parse the date from the input back to a DateValue.
(
  value: string,
  details: {
    locale: string
    timeZone: string
  },
) => DateValue
placeholder
The placeholder text to display in the input.
string
positioning
The user provided options used to position the date picker content.
DatePickerPositioningOptions
present
The controlled presence of the node.
boolean
readOnly
Whether the input is read-only. When true, prevents user interaction while keeping the input focusable and visible.
boolean
required
Controls whether the input is required in template-driven forms. When true, the input must have a value for form validation to pass.
boolean
selectionMode
The selection mode of the calendar.
- single - only one date can be selected
- multiple - multiple dates can be selected
- range - a range of dates can be selected
| 'single'
| 'multiple'
| 'range'
'single'
size
The size of the input field and its elements. Does not affect the calendar pane.
| 'sm'
| 'md'
| 'lg'
'md'
skipAnimationOnMount
Whether to allow the initial presence animation.
boolean
false
startOfWeek
The first day of the week. 0 is Sunday, 6 is Saturday.
number
timeZone
The time zone to use.
string
'UTC'
translations
The localized messages to use.
{
  clearTrigger?: string
  content?: string
  dayCell?: (state: {
    disabled: boolean
    firstInHoveredRange: boolean
    firstInRange: boolean
    focused: boolean
    inHoveredRange: boolean
    inRange: boolean
    invalid: boolean
    lastInHoveredRange: boolean
    lastInRange: boolean
    outsideRange: boolean
    selectable: boolean
    selected: boolean
    today: boolean
    unavailable: boolean
    value: DateValue
    valueText: string
    weekend: boolean
  }) => string
  errorIndicator?: string
  inputDescription?: (
    format: string,
  ) => string
  nextTrigger?: (
    view:
      | 'day'
      | 'month'
      | 'year',
  ) => string
  placeholder?: (
    locale: string,
  ) => {
    day: string
    month: string
    year: string
  }
  presetsTrigger?: (
    open: boolean,
  ) => string
  presetTrigger?: (
    value: string[],
  ) => string
  prevTrigger?: (
    view:
      | 'day'
      | 'month'
      | 'year',
  ) => string
  rangeInputEnd?: string
  rangeInputStart?: string
  trigger?: (state: {
    open: boolean
    selectionMode:
      | 'single'
      | 'multiple'
      | 'range'
    valueText: string[]
  }) => string
  viewCloseTrigger?: string
  viewTrigger?: (
    view:
      | 'day'
      | 'month'
      | 'year',
    targetView?:
      | 'day'
      | 'month'
      | 'year',
  ) => string
}
unmountOnExit
When true, the component will be completely removed from the DOM when it becomes inactive or hidden, rather than just being hidden with CSS.
boolean
false
view
The controlled view of the calendar.
| 'day'
| 'month'
| 'year'
viewOnSelect
The view to show after a selection.
- previous - year to month to day
- min - the current view to the minimum view
| 'previous'
| 'min'
'min'
(exitCompleted)
Function called when the animation ends in the closed state.
void
(focusChanged)
Function called when the focused date changes.
{
  focusedValue: DateValue
  value: Array<DateValue>
  valueAsString: string[]
  view:
    | 'day'
    | 'month'
    | 'year'
}
(openChanged)
Function called when the calendar opens or closes.
{
  open: boolean
  value: Array<DateValue>
}
(valueChanged)
Function called when the selected date(s) change.
{
  value: Array<DateValue>
  valueAsString: string[]
  view:
    | 'day'
    | 'month'
    | 'year'
}
(viewChanged)
Function called when the view changes.
{
  view:
    | 'day'
    | 'month'
    | 'year'
}
(visibleRangeChanged)
Function called when the visible range changes.
{
  view:
    | 'day'
    | 'month'
    | 'year'
  visibleRange: {
    end: DateValue
    start: DateValue
  }
}
closeOnSelect
Type
boolean
Description
Whether the calendar should close after the date selection is complete. This is ignored when the selection mode is multiple.
createCalendar
Type
(
  identifier: CalendarIdentifier,
) => Calendar
Description
A function that creates a Calendar object for a given calendar identifier. Enables non-Gregorian calendar support (Persian, Buddhist, Islamic, etc.) without bundling all calendars by default.
defaultFocusedValue
Type
DateValue
Description
The initial focused date when rendered. Use when you don't need to control the focused date of the date picker.
defaultOpen
Type
boolean
Description
The initial open state of the date picker when rendered. Use when you don't need to control the open state of the date picker.
defaultValue
Type
DateValue[]
Description
The initial value of the input when rendered. Use when you don't need to control the value of the input. This property will be ignored if you opt into controlled state via form control bindings.
defaultView
Type
| 'day'
| 'month'
| 'year'
Description
The default view of the calendar.
dir
Type
'ltr' | 'rtl'
Description
The document's text/writing direction.
disabled
Type
boolean
Description
Controls whether the input is disabled in template-driven forms. When true, prevents user interaction and applies visual styling to indicate the disabled state.
fixedWeeks
Type
boolean
Description
Whether the calendar should have a fixed number of weeks. This renders the calendar with 6 weeks instead of 5 or 6.
focusedValue
Type
DateValue
Description
The controlled focused date.
format
Type
(
  date: DateValue,
  details: {
    locale: string
    timeZone: string
  },
) => string
Description
The format of the date to display in the input.
hideOutsideDays
Type
boolean
Description
Whether to hide days from the previous and next months in the current month view. By default those days are shown.
immediate
Type
boolean
Description
Whether to synchronize the present change immediately or defer it to the next frame.
inline
Type
boolean
Description
Whether to render the date picker inline.
invalid
Type
boolean
Description
Controls the visual error state of the input. When true, applies semantic error styling to indicate validation failure.
isDateUnavailable
Type
(
  date: DateValue,
  locale: string,
) => boolean
Description
Returns whether a date of the calendar is available.
lazyMount
Type
boolean
Description
When true, the component will not be rendered in the DOM until it becomes visible or active.
locale
Type
string
Description
The locale (BCP 47 language tag) to use when formatting the date.
max
Type
DateValue
Description
The maximum date that can be selected.
maxSelectedDates
Type
number
Description
The maximum number of dates that can be selected. This is only applicable when selectionMode is multiple.
maxView
Type
| 'day'
| 'month'
| 'year'
Description
The maximum view of the calendar.
min
Type
DateValue
Description
The minimum date that can be selected.
minView
Type
| 'day'
| 'month'
| 'year'
Description
The minimum view of the calendar.
name
Type
string
Description
The name of the input field. Useful for form submission.
open
Type
boolean
Description
The controlled open state of the date picker.
openOnClick
Type
boolean
Description
Whether to open the calendar when the input is clicked.
outsideDaySelectable
Type
boolean
Description
Whether days outside the visible range can be selected.
parse
Type
(
  value: string,
  details: {
    locale: string
    timeZone: string
  },
) => DateValue
Description
Function to parse the date from the input back to a DateValue.
placeholder
Type
string
Description
The placeholder text to display in the input.
positioning
Type
DatePickerPositioningOptions
Description
The user provided options used to position the date picker content.
present
Type
boolean
Description
The controlled presence of the node.
readOnly
Type
boolean
Description
Whether the input is read-only. When true, prevents user interaction while keeping the input focusable and visible.
required
Type
boolean
Description
Controls whether the input is required in template-driven forms. When true, the input must have a value for form validation to pass.
selectionMode
Type
| 'single'
| 'multiple'
| 'range'
Description
The selection mode of the calendar.
- single - only one date can be selected
- multiple - multiple dates can be selected
- range - a range of dates can be selected
size
Type
| 'sm'
| 'md'
| 'lg'
Description
The size of the input field and its elements. Does not affect the calendar pane.
skipAnimationOnMount
Type
boolean
Description
Whether to allow the initial presence animation.
startOfWeek
Type
number
Description
The first day of the week. 0 is Sunday, 6 is Saturday.
timeZone
Type
string
Description
The time zone to use.
translations
Type
{
  clearTrigger?: string
  content?: string
  dayCell?: (state: {
    disabled: boolean
    firstInHoveredRange: boolean
    firstInRange: boolean
    focused: boolean
    inHoveredRange: boolean
    inRange: boolean
    invalid: boolean
    lastInHoveredRange: boolean
    lastInRange: boolean
    outsideRange: boolean
    selectable: boolean
    selected: boolean
    today: boolean
    unavailable: boolean
    value: DateValue
    valueText: string
    weekend: boolean
  }) => string
  errorIndicator?: string
  inputDescription?: (
    format: string,
  ) => string
  nextTrigger?: (
    view:
      | 'day'
      | 'month'
      | 'year',
  ) => string
  placeholder?: (
    locale: string,
  ) => {
    day: string
    month: string
    year: string
  }
  presetsTrigger?: (
    open: boolean,
  ) => string
  presetTrigger?: (
    value: string[],
  ) => string
  prevTrigger?: (
    view:
      | 'day'
      | 'month'
      | 'year',
  ) => string
  rangeInputEnd?: string
  rangeInputStart?: string
  trigger?: (state: {
    open: boolean
    selectionMode:
      | 'single'
      | 'multiple'
      | 'range'
    valueText: string[]
  }) => string
  viewCloseTrigger?: string
  viewTrigger?: (
    view:
      | 'day'
      | 'month'
      | 'year',
    targetView?:
      | 'day'
      | 'month'
      | 'year',
  ) => string
}
Description
The localized messages to use.
unmountOnExit
Type
boolean
Description
When true, the component will be completely removed from the DOM when it becomes inactive or hidden, rather than just being hidden with CSS.
view
Type
| 'day'
| 'month'
| 'year'
Description
The controlled view of the calendar.
viewOnSelect
Type
| 'previous'
| 'min'
Description
The view to show after a selection.
- previous - year to month to day
- min - the current view to the minimum view
(exitCompleted)
Type
void
Description
Function called when the animation ends in the closed state.
(focusChanged)
Type
{
  focusedValue: DateValue
  value: Array<DateValue>
  valueAsString: string[]
  view:
    | 'day'
    | 'month'
    | 'year'
}
Description
Function called when the focused date changes.
(openChanged)
Type
{
  open: boolean
  value: Array<DateValue>
}
Description
Function called when the calendar opens or closes.
(valueChanged)
Type
{
  value: Array<DateValue>
  valueAsString: string[]
  view:
    | 'day'
    | 'month'
    | 'year'
}
Description
Function called when the selected date(s) change.
(viewChanged)
Type
{
  view:
    | 'day'
    | 'month'
    | 'year'
}
Description
Function called when the view changes.
(visibleRangeChanged)
Type
{
  view:
    | 'day'
    | 'month'
    | 'year'
  visibleRange: {
    end: DateValue
    start: DateValue
  }
}
Description
Function called when the visible range changes.

q-date-picker-label

Label for the date input.
PropType
index
The index of the input this label describes. Range pickers render one input per boundary, 0 for the start date and 1 for the end date.
number
index
Type
number
Description
The index of the input this label describes. Range pickers render one input per boundary, 0 for the start date and 1 for the end date.

q-date-picker-control

Container for the input and triggers.
PropType
id
id attribute. If omitted, a unique identifier will be generated for accessibility.
string
id
Type
string
Description
id attribute. If omitted, a unique identifier will be generated for accessibility.

q-date-picker-input-group

See Shortcuts for the tree this renders in each selection mode.

Groups the label, input, clear, and calendar trigger. For a range picker the start and end inputs are grouped into a single bordered field separated by separator.
PropTypeDefault
dismissLabel
Returns the accessible label for a tag's remove button. Only applicable in multiple mode.
(
  dateText: string,
) => string
(dateText) =>
fixOnBlur
Whether to fix the input value on blur.
boolean
true
label
Label text rendered above the field.
string
placeholder
Text shown when no date is selected. Only applicable in multiple mode.
string
'Select dates'
separator
Character shown between the start and end inputs of a range picker.
string
'-'
dismissLabel
Type
(
  dateText: string,
) => string
Description
Returns the accessible label for a tag's remove button. Only applicable in multiple mode.
fixOnBlur
Type
boolean
Description
Whether to fix the input value on blur.
label
Type
string
Description
Label text rendered above the field.
placeholder
Type
string
Description
Text shown when no date is selected. Only applicable in multiple mode.
separator
Type
string
Description
Character shown between the start and end inputs of a range picker.

q-date-picker-input-group-trigger

The bordered field inside the input group. In multiple mode it also acts as the calendar trigger, because no text input owns focus there.

Applies every binding on the bordered field, and in multiple mode turns it into the calendar trigger since no text input owns focus there.

Do not add a second binding system to this element: role, dir, and aria-invalid change source with the mode, so two writers clobber each other on a runtime mode switch. Must stay in useTrackBindings — id registration writes a signal, which a computed forbids (NG0600).
PropType
groupLabelId
Id of the label describing the field as a group. Omitted when the label describes a single input directly.
string
groupLabelId
Type
string
Description
Id of the label describing the field as a group. Omitted when the label describes a single input directly.

q-date-picker-input

A range picker renders two inputs, distinguished by index.

The editable date input.
PropTypeDefault
fixOnBlur
Whether to fix the input value on blur.
boolean
true
id
id attribute. If omitted, a unique identifier will be generated for accessibility.
string
index
The index of the input. Range pickers render one input per boundary, 0 for the start date and 1 for the end date.
number
fixOnBlur
Type
boolean
Description
Whether to fix the input value on blur.
id
Type
string
Description
id attribute. If omitted, a unique identifier will be generated for accessibility.
index
Type
number
Description
The index of the input. Range pickers render one input per boundary, 0 for the start date and 1 for the end date.

q-date-picker-value-tags

Displays the dates selected in multiple mode as dismissible tags. Renders a visually hidden input per selected date so the selection participates in form submission under the picker's name.
PropTypeDefault
dismissLabel
Returns the accessible label for a tag's remove button.
(
  dateText: string,
) => string
(dateText) =>
placeholder
Text shown when no date is selected.
string
'Select dates'
dismissLabel
Type
(
  dateText: string,
) => string
Description
Returns the accessible label for a tag's remove button.
placeholder
Type
string
Description
Text shown when no date is selected.

q-date-picker-clear-trigger

Applies the clear behavior to any element, without QDS styling. Use it to build a custom clear control. For the styled control used inside the input group, see q-date-picker-input-clear-trigger.

A button that clears the selection.
PropType
id
id attribute. If omitted, a unique identifier will be generated for accessibility.
string
id
Type
string
Description
id attribute. If omitted, a unique identifier will be generated for accessibility.

q-date-picker-input-clear-trigger

The clear trigger as it is styled inside the input group: a q-date-picker-clear-trigger rendered as an icon button with compact density and a default X icon. Project content to replace the icon.

Clears the selection, styled as a compact icon button, used inside the input group.
PropType
id
id attribute. If omitted, a unique identifier will be generated for accessibility.
string
id
Type
string
Description
id attribute. If omitted, a unique identifier will be generated for accessibility.

q-date-picker-error-indicator

Visual indicator displayed inside the control when the date picker is invalid.
PropTypeDefault
icon
lucide icon
| LucideIcon
| LucideIconData
| string
LucideCircleAlert
icon
Type
| LucideIcon
| LucideIconData
| string
Description
lucide icon

q-date-picker-trigger

Applies the open and close behavior to any element, without QDS styling. Use it to build a custom trigger. For the styled control used inside the input group, see q-date-picker-input-trigger.

A button that opens and closes the calendar. Registers the trigger with the date picker so accessibility and focus restoration work.
PropType
id
id attribute. If omitted, a unique identifier will be generated for accessibility.
string
id
Type
string
Description
id attribute. If omitted, a unique identifier will be generated for accessibility.

q-date-picker-input-trigger

The calendar trigger as it is styled inside the input group: a q-date-picker-trigger rendered as an icon button with compact density and a default Calendar icon. Project content to replace the icon.

In multiple mode the input group renders a non-interactive calendar icon instead, because q-date-picker-input-group-trigger carries the trigger bindings.

Calendar toggle styled as a compact icon button, used inside the input group.
PropType
id
id attribute. If omitted, a unique identifier will be generated for accessibility.
string
id
Type
string
Description
id attribute. If omitted, a unique identifier will be generated for accessibility.

q-date-picker-hint

Helper text displayed below the field. Hidden while the date picker is invalid.
PropType
id
id attribute. If omitted, a unique identifier will be generated for accessibility.
string
id
Type
string
Description
id attribute. If omitted, a unique identifier will be generated for accessibility.

q-date-picker-error-text

Error message displayed when the date picker is invalid.
PropType
id
id attribute. If omitted, a unique identifier will be generated for accessibility.
string
id
Type
string
Description
id attribute. If omitted, a unique identifier will be generated for accessibility.

q-date-picker-positioner

Positions the calendar relative to the control.
PropType
id
id attribute. If omitted, a unique identifier will be generated for accessibility.
string
id
Type
string
Description
id attribute. If omitted, a unique identifier will be generated for accessibility.

q-date-picker-content

Container for the calendar.
PropType
id
id attribute. If omitted, a unique identifier will be generated for accessibility.
string
id
Type
string
Description
id attribute. If omitted, a unique identifier will be generated for accessibility.

q-date-picker-headline

Container for the calendar headline.

q-date-picker-headline-label

The default caption is Date range in range mode and Date otherwise. Pass content to override it.

Caption above the headline value. Project content to override the default.

q-date-picker-headline-value

In multiple mode this shows up to two dates then appends a count suffix.

Renders the current selection as human readable text.
PropTypeDefault
format
Format used to render the selected date(s).
DateTimeFormatOptions
moreLabel
Suffix appended in multiple mode when more than two dates are selected.
(
  count: number,
) => string
(count) =>
placeholder
Text shown when no date is selected.
string
'Select date'
rangePlaceholder
Placeholders for the start and end of an incomplete range.
[
  string,
  string,
]
['Start', 'End']
format
Type
DateTimeFormatOptions
Description
Format used to render the selected date(s).
moreLabel
Type
(
  count: number,
) => string
Description
Suffix appended in multiple mode when more than two dates are selected.
placeholder
Type
string
Description
Text shown when no date is selected.
rangePlaceholder
Type
[
  string,
  string,
]
Description
Placeholders for the start and end of an incomplete range.

q-date-picker-view

Groups a single calendar view (day, month, or year).
PropTypeDefault
view
The calendar view this element renders.
| 'day'
| 'month'
| 'year'
'day'
view
Type
| 'day'
| 'month'
| 'year'
Description
The calendar view this element renders.

q-date-picker-view-control

Groups the navigation controls of a view.

q-date-picker-view-trigger

Switches to the next view level (day to month to year). Styled as a ghost button.
PropType
disabled
Renders the trigger as a non-interactive label. Use in the month and year views, where the label describes the visible range rather than a target.
boolean
view
Switch directly to this view when activated. When omitted, the trigger toggles to the next view.
| 'day'
| 'month'
| 'year'
disabled
Type
boolean
Description
Renders the trigger as a non-interactive label. Use in the month and year views, where the label describes the visible range rather than a target.
view
Type
| 'day'
| 'month'
| 'year'
Description
Switch directly to this view when activated. When omitted, the trigger toggles to the next view.

q-date-picker-view-close-trigger

Returns from the month or year view to the day calendar. Styled as an outline icon button.

q-date-picker-prev-trigger

Disabled when the previous page falls entirely outside min.

Moves the calendar to the previous page. Styled as a ghost icon button.
PropType
view
The view to page. Defaults to the enclosing View.
| 'day'
| 'month'
| 'year'
view
Type
| 'day'
| 'month'
| 'year'
Description
The view to page. Defaults to the enclosing View.

q-date-picker-next-trigger

Disabled when the next page falls entirely outside max.

Advances the calendar to the next page. Styled as a ghost icon button.
PropType
view
The view to page. Defaults to the enclosing View.
| 'day'
| 'month'
| 'year'
view
Type
| 'day'
| 'month'
| 'year'
Description
The view to page. Defaults to the enclosing View.

q-date-picker-month-text

Renders the name of the currently visible month. Intended as the label for a view trigger that jumps to the month view.
PropTypeDefault
format
The format used to render the visible month.
| '2-digit'
| 'long'
| 'narrow'
| 'numeric'
| 'short'
'long'
format
Type
| '2-digit'
| 'long'
| 'narrow'
| 'numeric'
| 'short'
Description
The format used to render the visible month.

q-date-picker-year-text

Renders the currently visible year. Intended as the label for a view trigger that jumps to the year view.
PropTypeDefault
format
The format used to render the visible year.
| '2-digit'
| 'numeric'
'numeric'
format
Type
| '2-digit'
| 'numeric'
Description
The format used to render the visible year.

q-date-picker-range-text

Human readable text for the visible range. The text is view-aware (month and year for the day view, the year for the month view, and the decade for the year view).

q-date-picker-table

The column count is fixed per view.

The calendar grid. The column count is fixed per view, so the columns input of the core directive is ignored.
PropType
view
The calendar view this grid renders. Defaults to the enclosing View.
| 'day'
| 'month'
| 'year'
view
Type
| 'day'
| 'month'
| 'year'
Description
The calendar view this grid renders. Defaults to the enclosing View.

q-date-picker-table-head

The calendar grid header.

q-date-picker-table-header

A column header in the calendar grid.

q-date-picker-table-body

The calendar grid body.

q-date-picker-table-row

A row in the calendar grid.

q-date-picker-table-cell

The bindings differ by the view the cell belongs to.

A single cell in the calendar grid.
PropType
value
*
The cell value. A DateValue in the day view, the month or year number otherwise.
| number
| DateValue
columns
The number of columns in the grid. Only applies to the month and year views.
number
disabled
Whether this cell is not selectable.
boolean
visibleRange
The visible range of the enclosing grid. Only applies to the day view.
{
  end: T
  start: T
}
value
*
Type
| number
| DateValue
Description
The cell value. A DateValue in the day view, the month or year number otherwise.
columns
Type
number
Description
The number of columns in the grid. Only applies to the month and year views.
disabled
Type
boolean
Description
Whether this cell is not selectable.
visibleRange
Type
{
  end: T
  start: T
}
Description
The visible range of the enclosing grid. Only applies to the day view.

q-date-picker-table-cell-trigger

The bindings differ by the view the cell belongs to.

The selectable trigger inside a calendar cell.

q-date-picker-day-grid-header

Renders the weekday column headers for the day view. Apply to a thead element.
PropTypeDefault
format
The format used to render the weekday labels.
Extract<
  keyof {
    long: string
    narrow: string
    short: string
    value: DateValue
  },
  'long' | 'narrow' | 'short'
>
'narrow'
format
Type
Extract<
  keyof {
    long: string
    narrow: string
    short: string
    value: DateValue
  },
  'long' | 'narrow' | 'short'
>
Description
The format used to render the weekday labels.

q-date-picker-day-grid

Renders the day cells for the visible month. Apply to a tbody element.

q-date-picker-month-grid

Renders the month cells for the month view. Apply to a tbody element.
PropTypeDefault
format
The format used to render the month labels.
NonNullable<
  'long' | 'short'
>
'short'
format
Type
NonNullable<
  'long' | 'short'
>
Description
The format used to render the month labels.

q-date-picker-year-grid

Renders the year cells for the year view. Takes no inputs.

q-date-picker-presets

Panel that lists DatePickerPresetTriggerDirective options in place of the calendar while the DatePickerPresetsTriggerDirective is toggled on.

q-date-picker-presets-trigger

Toggles the presets panel. Styled as an outline icon button that becomes a close affordance while the panel is open.

q-date-picker-preset-trigger

Selects a preset date or range.
PropType
value
*
The value applied when the preset is selected. Either a named range preset (e.g. "next7Days") or an explicit array of dates.
| Array<DateValue>
| 'thisWeek'
| 'lastWeek'
| 'nextWeek'
| 'thisMonth'
| 'lastMonth'
| 'nextMonth'
| 'thisQuarter'
| 'lastQuarter'
| 'nextQuarter'
| 'thisYear'
| 'lastYear'
| 'nextYear'
| 'last3Days'
| 'last7Days'
| 'last14Days'
| 'last30Days'
| 'last90Days'
| 'next3Days'
| 'next7Days'
| 'next14Days'
| 'next30Days'
| 'next90Days'
value
*
Type
| Array<DateValue>
| 'thisWeek'
| 'lastWeek'
| 'nextWeek'
| 'thisMonth'
| 'lastMonth'
| 'nextMonth'
| 'thisQuarter'
| 'lastQuarter'
| 'nextQuarter'
| 'thisYear'
| 'lastYear'
| 'nextYear'
| 'last3Days'
| 'last7Days'
| 'last14Days'
| 'last30Days'
| 'last90Days'
| 'next3Days'
| 'next7Days'
| 'next14Days'
| 'next30Days'
| 'next90Days'
Description
The value applied when the preset is selected. Either a named range preset (e.g. "next7Days") or an explicit array of dates.

q-date-picker-actions

Footer container for the confirm and cancel actions. Intended for use when closeOnSelect is false.

q-date-picker-cancel-trigger

Discards selection, restores previous value, and closes the calendar. Styled as a ghost button with the label "Cancel" by default.

q-date-picker-ok-trigger

Confirms selection and closes the calendar. Styled as a ghost button with the label "OK" by default.

datePickerContext

Base directive for creating context-aware directives that render content only when an API context is available.

This abstract class provides the core functionality to: 1. Check if a required API context service is available 2. Render the associated template only when the API instance is accessible 3. Provide the API instance to the template as a typed value

DatePickerApi

The api handed to the *datePickerContext structural directive.

PropType
cancel
Discards selection, restores previous value, and closes the calendar.
VoidFunction
clearValue
Clears the selected date(s).
    (options?: {
      focus?: boolean
    }) => void
    disabled
    Whether the date picker is disabled
    boolean
    focused
    Whether the input is focused
    boolean
    focusedValue
    The focused date.
    DateValue
    focusedValueAsDate
    The focused date as a Date object.
    Date
    focusedValueAsString
    The focused date as a string.
    string
    focusMonth
    Function to set the selected month.
      (
        month: number,
      ) => void
      focusYear
      Function to set the selected year.
        (
          year: number,
        ) => void
        format
        Formats the given date value based on the provided options.
          (
            value: DateValue,
            opts?: DateTimeFormatOptions,
          ) => string
          getDaysInWeek
          Returns an array of days in the week index counted from the provided start date, or the first visible date if not given.
            (
              week: number,
              from?: DateValue,
            ) => Array<DateValue>
            getDayTableCellState
            Returns the state details for a given cell.
              (props: {
                disabled?: boolean
                value: DateValue
                visibleRange?: {
                  end: T
                  start: T
                }
              }) => {
                disabled: boolean
                firstInHoveredRange: boolean
                firstInRange: boolean
                focused: boolean
                inHoveredRange: boolean
                inRange: boolean
                invalid: boolean
                lastInHoveredRange: boolean
                lastInRange: boolean
                outsideRange: boolean
                selectable: boolean
                selected: boolean
                today: boolean
                unavailable: boolean
                value: DateValue
                valueText: string
                weekend: boolean
              }
              getDecade
              Returns the start and end years of the decade.
                () => {
                  end: T
                  start: T
                }
                getMonths
                Returns the months of the year
                  (props?: {
                    format?: 'long' | 'short'
                  }) => Array<{
                    disabled?: boolean
                    label: string
                    value: number
                  }>
                  getMonthsGrid
                  Returns the months of the year based on the columns. Represented as an array of arrays of months.
                    (props?: {
                      columns?: number
                      format?: 'long' | 'short'
                    }) => Array<
                      Array<{
                        disabled?: boolean
                        label: string
                        value: number
                      }>
                    >
                    getMonthTableCellState
                    Returns the state details for a given month cell.
                      (props: {
                        columns?: number
                        disabled?: boolean
                        value: number
                      }) => {
                        disabled: boolean
                        firstInHoveredRange: boolean
                        firstInRange: boolean
                        focused: boolean
                        inHoveredRange: boolean
                        inRange: boolean
                        lastInHoveredRange: boolean
                        lastInRange: boolean
                        outsideRange: boolean
                        selectable: boolean
                        selected: boolean
                        value: DateValue
                        valueText: string
                      }
                      getMonthWeeks
                      Returns the weeks of the month from the provided date. Represented as an array of arrays of dates.
                        (
                          from?: DateValue,
                        ) => Array<Array<DateValue>>
                        getOffset
                        Returns the offset of the month based on the provided number of months.
                          (
                            duration: DateDuration,
                          ) => {
                            visibleRange: {
                              end: T
                              start: T
                            }
                            visibleRangeText: {
                              end: string
                              start: string
                            }
                            weeks: Array<
                              Array<DateValue>
                            >
                          }
                          getRangePresetValue
                          Returns the range of dates based on the provided date range preset.
                            (
                              value:
                                | 'thisWeek'
                                | 'lastWeek'
                                | 'nextWeek'
                                | 'thisMonth'
                                | 'lastMonth'
                                | 'nextMonth'
                                | 'thisQuarter'
                                | 'lastQuarter'
                                | 'nextQuarter'
                                | 'thisYear'
                                | 'lastYear'
                                | 'nextYear'
                                | 'last3Days'
                                | 'last7Days'
                                | 'last14Days'
                                | 'last30Days'
                                | 'last90Days'
                                | 'next3Days'
                                | 'next7Days'
                                | 'next14Days'
                                | 'next30Days'
                                | 'next90Days',
                            ) => Array<DateValue>
                            getYears
                            Returns the months of the year
                              () => Array<{
                                disabled?: boolean
                                label: string
                                value: number
                              }>
                              getYearsGrid
                              Returns the years of the decade based on the columns. Represented as an array of arrays of years.
                                (props?: {
                                  columns?: number
                                }) => Array<
                                  Array<{
                                    disabled?: boolean
                                    label: string
                                    value: number
                                  }>
                                >
                                getYearTableCellState
                                Returns the state details for a given year cell.
                                  (props: {
                                    columns?: number
                                    disabled?: boolean
                                    value: number
                                  }) => {
                                    disabled: boolean
                                    firstInHoveredRange: boolean
                                    firstInRange: boolean
                                    focused: boolean
                                    inHoveredRange: boolean
                                    inRange: boolean
                                    lastInHoveredRange: boolean
                                    lastInRange: boolean
                                    outsideRange: boolean
                                    selectable: boolean
                                    selected: boolean
                                    value: DateValue
                                    valueText: string
                                  }
                                  goToNext
                                  Goes to the next month/year/decade.
                                  VoidFunction
                                  goToPrev
                                  Goes to the previous month/year/decade.
                                  VoidFunction
                                  inline
                                  Whether the date picker is rendered inline
                                  boolean
                                  invalid
                                  Whether the date picker is invalid
                                  boolean
                                  isMaxSelected
                                  Whether the maximum number of selected dates has been reached.
                                  boolean
                                  isUnavailable
                                  Returns whether the provided date is available (or can be selected)
                                    (
                                      date: DateValue,
                                    ) => boolean
                                    maxSelectedDates
                                    The maximum number of dates that can be selected (only for multiple selection mode).
                                    number
                                    numOfMonths
                                    The number of months to display
                                    number
                                    open
                                    Whether the date picker is open
                                    boolean
                                    presetsOpen
                                    Whether the presets panel is open
                                    boolean
                                    readOnly
                                    Whether the date picker is read-only
                                    boolean
                                    selectionMode
                                    The selection mode (single, multiple, or range)
                                    | 'single'
                                    | 'multiple'
                                    | 'range'
                                    selectToday
                                    Sets the selected date to today.
                                    VoidFunction
                                    setFocusedValue
                                    Sets the focused date to the given date.
                                      (
                                        value: DateValue,
                                      ) => void
                                      setOpen
                                      Function to open or close the calendar.
                                        (
                                          open: boolean,
                                        ) => void
                                        setTime
                                        Sets the time for a specific date value. Converts CalendarDate to CalendarDateTime if needed.
                                          (
                                            time: {
                                              hour?: number
                                              millisecond?: number
                                              minute?: number
                                              second?: number
                                            },
                                            index?: number,
                                          ) => void
                                          setValue
                                          Sets the selected date to the given date.
                                            (
                                              values: Array<DateValue>,
                                            ) => void
                                            setView
                                            Sets the view of the date picker.
                                              (
                                                view:
                                                  | 'day'
                                                  | 'month'
                                                  | 'year',
                                              ) => void
                                              toggleValue
                                              Adds/removes a date in the selection.
                                                (
                                                  value: DateValue,
                                                ) => void
                                                value
                                                The selected date.
                                                Array<DateValue>
                                                valueAsDate
                                                The selected date as a Date object.
                                                Array<Date>
                                                valueAsString
                                                The selected date as a string.
                                                string[]
                                                view
                                                The current view of the date picker
                                                | 'day'
                                                | 'month'
                                                | 'year'
                                                visibleRange
                                                The visible range of dates.
                                                {
                                                  end: T
                                                  start: T
                                                }
                                                visibleRangeText
                                                The human readable text for the visible range of dates.
                                                {
                                                  end: string
                                                  formatted: string
                                                  start: string
                                                }
                                                weekDays
                                                The days of the week. Represented as an array of strings.
                                                Array<{
                                                  long: string
                                                  narrow: string
                                                  short: string
                                                  value: DateValue
                                                }>
                                                weeks
                                                The weeks of the month. Represented as an array of arrays of dates.
                                                Array<Array<DateValue>>
                                                cancel
                                                Type
                                                VoidFunction
                                                Description
                                                Discards selection, restores previous value, and closes the calendar.
                                                clearValue
                                                Type
                                                (options?: {
                                                  focus?: boolean
                                                }) => void
                                                Description
                                                Clears the selected date(s).
                                                  disabled
                                                  Type
                                                  boolean
                                                  Description
                                                  Whether the date picker is disabled
                                                  focused
                                                  Type
                                                  boolean
                                                  Description
                                                  Whether the input is focused
                                                  focusedValue
                                                  Type
                                                  DateValue
                                                  Description
                                                  The focused date.
                                                  focusedValueAsDate
                                                  Type
                                                  Date
                                                  Description
                                                  The focused date as a Date object.
                                                  focusedValueAsString
                                                  Type
                                                  string
                                                  Description
                                                  The focused date as a string.
                                                  focusMonth
                                                  Type
                                                  (
                                                    month: number,
                                                  ) => void
                                                  Description
                                                  Function to set the selected month.
                                                    focusYear
                                                    Type
                                                    (
                                                      year: number,
                                                    ) => void
                                                    Description
                                                    Function to set the selected year.
                                                      format
                                                      Type
                                                      (
                                                        value: DateValue,
                                                        opts?: DateTimeFormatOptions,
                                                      ) => string
                                                      Description
                                                      Formats the given date value based on the provided options.
                                                        getDaysInWeek
                                                        Type
                                                        (
                                                          week: number,
                                                          from?: DateValue,
                                                        ) => Array<DateValue>
                                                        Description
                                                        Returns an array of days in the week index counted from the provided start date, or the first visible date if not given.
                                                          getDayTableCellState
                                                          Type
                                                          (props: {
                                                            disabled?: boolean
                                                            value: DateValue
                                                            visibleRange?: {
                                                              end: T
                                                              start: T
                                                            }
                                                          }) => {
                                                            disabled: boolean
                                                            firstInHoveredRange: boolean
                                                            firstInRange: boolean
                                                            focused: boolean
                                                            inHoveredRange: boolean
                                                            inRange: boolean
                                                            invalid: boolean
                                                            lastInHoveredRange: boolean
                                                            lastInRange: boolean
                                                            outsideRange: boolean
                                                            selectable: boolean
                                                            selected: boolean
                                                            today: boolean
                                                            unavailable: boolean
                                                            value: DateValue
                                                            valueText: string
                                                            weekend: boolean
                                                          }
                                                          Description
                                                          Returns the state details for a given cell.
                                                            getDecade
                                                            Type
                                                            () => {
                                                              end: T
                                                              start: T
                                                            }
                                                            Description
                                                            Returns the start and end years of the decade.
                                                              getMonths
                                                              Type
                                                              (props?: {
                                                                format?: 'long' | 'short'
                                                              }) => Array<{
                                                                disabled?: boolean
                                                                label: string
                                                                value: number
                                                              }>
                                                              Description
                                                              Returns the months of the year
                                                                getMonthsGrid
                                                                Type
                                                                (props?: {
                                                                  columns?: number
                                                                  format?: 'long' | 'short'
                                                                }) => Array<
                                                                  Array<{
                                                                    disabled?: boolean
                                                                    label: string
                                                                    value: number
                                                                  }>
                                                                >
                                                                Description
                                                                Returns the months of the year based on the columns. Represented as an array of arrays of months.
                                                                  getMonthTableCellState
                                                                  Type
                                                                  (props: {
                                                                    columns?: number
                                                                    disabled?: boolean
                                                                    value: number
                                                                  }) => {
                                                                    disabled: boolean
                                                                    firstInHoveredRange: boolean
                                                                    firstInRange: boolean
                                                                    focused: boolean
                                                                    inHoveredRange: boolean
                                                                    inRange: boolean
                                                                    lastInHoveredRange: boolean
                                                                    lastInRange: boolean
                                                                    outsideRange: boolean
                                                                    selectable: boolean
                                                                    selected: boolean
                                                                    value: DateValue
                                                                    valueText: string
                                                                  }
                                                                  Description
                                                                  Returns the state details for a given month cell.
                                                                    getMonthWeeks
                                                                    Type
                                                                    (
                                                                      from?: DateValue,
                                                                    ) => Array<Array<DateValue>>
                                                                    Description
                                                                    Returns the weeks of the month from the provided date. Represented as an array of arrays of dates.
                                                                      getOffset
                                                                      Type
                                                                      (
                                                                        duration: DateDuration,
                                                                      ) => {
                                                                        visibleRange: {
                                                                          end: T
                                                                          start: T
                                                                        }
                                                                        visibleRangeText: {
                                                                          end: string
                                                                          start: string
                                                                        }
                                                                        weeks: Array<
                                                                          Array<DateValue>
                                                                        >
                                                                      }
                                                                      Description
                                                                      Returns the offset of the month based on the provided number of months.
                                                                        getRangePresetValue
                                                                        Type
                                                                        (
                                                                          value:
                                                                            | 'thisWeek'
                                                                            | 'lastWeek'
                                                                            | 'nextWeek'
                                                                            | 'thisMonth'
                                                                            | 'lastMonth'
                                                                            | 'nextMonth'
                                                                            | 'thisQuarter'
                                                                            | 'lastQuarter'
                                                                            | 'nextQuarter'
                                                                            | 'thisYear'
                                                                            | 'lastYear'
                                                                            | 'nextYear'
                                                                            | 'last3Days'
                                                                            | 'last7Days'
                                                                            | 'last14Days'
                                                                            | 'last30Days'
                                                                            | 'last90Days'
                                                                            | 'next3Days'
                                                                            | 'next7Days'
                                                                            | 'next14Days'
                                                                            | 'next30Days'
                                                                            | 'next90Days',
                                                                        ) => Array<DateValue>
                                                                        Description
                                                                        Returns the range of dates based on the provided date range preset.
                                                                          getYears
                                                                          Type
                                                                          () => Array<{
                                                                            disabled?: boolean
                                                                            label: string
                                                                            value: number
                                                                          }>
                                                                          Description
                                                                          Returns the months of the year
                                                                            getYearsGrid
                                                                            Type
                                                                            (props?: {
                                                                              columns?: number
                                                                            }) => Array<
                                                                              Array<{
                                                                                disabled?: boolean
                                                                                label: string
                                                                                value: number
                                                                              }>
                                                                            >
                                                                            Description
                                                                            Returns the years of the decade based on the columns. Represented as an array of arrays of years.
                                                                              getYearTableCellState
                                                                              Type
                                                                              (props: {
                                                                                columns?: number
                                                                                disabled?: boolean
                                                                                value: number
                                                                              }) => {
                                                                                disabled: boolean
                                                                                firstInHoveredRange: boolean
                                                                                firstInRange: boolean
                                                                                focused: boolean
                                                                                inHoveredRange: boolean
                                                                                inRange: boolean
                                                                                lastInHoveredRange: boolean
                                                                                lastInRange: boolean
                                                                                outsideRange: boolean
                                                                                selectable: boolean
                                                                                selected: boolean
                                                                                value: DateValue
                                                                                valueText: string
                                                                              }
                                                                              Description
                                                                              Returns the state details for a given year cell.
                                                                                goToNext
                                                                                Type
                                                                                VoidFunction
                                                                                Description
                                                                                Goes to the next month/year/decade.
                                                                                goToPrev
                                                                                Type
                                                                                VoidFunction
                                                                                Description
                                                                                Goes to the previous month/year/decade.
                                                                                inline
                                                                                Type
                                                                                boolean
                                                                                Description
                                                                                Whether the date picker is rendered inline
                                                                                invalid
                                                                                Type
                                                                                boolean
                                                                                Description
                                                                                Whether the date picker is invalid
                                                                                isMaxSelected
                                                                                Type
                                                                                boolean
                                                                                Description
                                                                                Whether the maximum number of selected dates has been reached.
                                                                                isUnavailable
                                                                                Type
                                                                                (
                                                                                  date: DateValue,
                                                                                ) => boolean
                                                                                Description
                                                                                Returns whether the provided date is available (or can be selected)
                                                                                  maxSelectedDates
                                                                                  Type
                                                                                  number
                                                                                  Description
                                                                                  The maximum number of dates that can be selected (only for multiple selection mode).
                                                                                  numOfMonths
                                                                                  Type
                                                                                  number
                                                                                  Description
                                                                                  The number of months to display
                                                                                  open
                                                                                  Type
                                                                                  boolean
                                                                                  Description
                                                                                  Whether the date picker is open
                                                                                  presetsOpen
                                                                                  Type
                                                                                  boolean
                                                                                  Description
                                                                                  Whether the presets panel is open
                                                                                  readOnly
                                                                                  Type
                                                                                  boolean
                                                                                  Description
                                                                                  Whether the date picker is read-only
                                                                                  selectionMode
                                                                                  Type
                                                                                  | 'single'
                                                                                  | 'multiple'
                                                                                  | 'range'
                                                                                  Description
                                                                                  The selection mode (single, multiple, or range)
                                                                                  selectToday
                                                                                  Type
                                                                                  VoidFunction
                                                                                  Description
                                                                                  Sets the selected date to today.
                                                                                  setFocusedValue
                                                                                  Type
                                                                                  (
                                                                                    value: DateValue,
                                                                                  ) => void
                                                                                  Description
                                                                                  Sets the focused date to the given date.
                                                                                    setOpen
                                                                                    Type
                                                                                    (
                                                                                      open: boolean,
                                                                                    ) => void
                                                                                    Description
                                                                                    Function to open or close the calendar.
                                                                                      setTime
                                                                                      Type
                                                                                      (
                                                                                        time: {
                                                                                          hour?: number
                                                                                          millisecond?: number
                                                                                          minute?: number
                                                                                          second?: number
                                                                                        },
                                                                                        index?: number,
                                                                                      ) => void
                                                                                      Description
                                                                                      Sets the time for a specific date value. Converts CalendarDate to CalendarDateTime if needed.
                                                                                        setValue
                                                                                        Type
                                                                                        (
                                                                                          values: Array<DateValue>,
                                                                                        ) => void
                                                                                        Description
                                                                                        Sets the selected date to the given date.
                                                                                          setView
                                                                                          Type
                                                                                          (
                                                                                            view:
                                                                                              | 'day'
                                                                                              | 'month'
                                                                                              | 'year',
                                                                                          ) => void
                                                                                          Description
                                                                                          Sets the view of the date picker.
                                                                                            toggleValue
                                                                                            Type
                                                                                            (
                                                                                              value: DateValue,
                                                                                            ) => void
                                                                                            Description
                                                                                            Adds/removes a date in the selection.
                                                                                              value
                                                                                              Type
                                                                                              Array<DateValue>
                                                                                              Description
                                                                                              The selected date.
                                                                                              valueAsDate
                                                                                              Type
                                                                                              Array<Date>
                                                                                              Description
                                                                                              The selected date as a Date object.
                                                                                              valueAsString
                                                                                              Type
                                                                                              string[]
                                                                                              Description
                                                                                              The selected date as a string.
                                                                                              view
                                                                                              Type
                                                                                              | 'day'
                                                                                              | 'month'
                                                                                              | 'year'
                                                                                              Description
                                                                                              The current view of the date picker
                                                                                              visibleRange
                                                                                              Type
                                                                                              {
                                                                                                end: T
                                                                                                start: T
                                                                                              }
                                                                                              Description
                                                                                              The visible range of dates.
                                                                                              visibleRangeText
                                                                                              Type
                                                                                              {
                                                                                                end: string
                                                                                                formatted: string
                                                                                                start: string
                                                                                              }
                                                                                              Description
                                                                                              The human readable text for the visible range of dates.
                                                                                              weekDays
                                                                                              Type
                                                                                              Array<{
                                                                                                long: string
                                                                                                narrow: string
                                                                                                short: string
                                                                                                value: DateValue
                                                                                              }>
                                                                                              Description
                                                                                              The days of the week. Represented as an array of strings.
                                                                                              weeks
                                                                                              Type
                                                                                              Array<Array<DateValue>>
                                                                                              Description
                                                                                              The weeks of the month. Represented as an array of arrays of dates.

                                                                                              Data Structures

                                                                                              DatePickerPositioningOptions

                                                                                              PropTypeDefault
                                                                                              arrowPadding
                                                                                              The minimum padding between the arrow and the floating element's corner.
                                                                                              number
                                                                                              4
                                                                                              arrowSelector
                                                                                              CSS selector used to locate the arrow element within the floating element. Components override this with their own anatomy-namespaced selector (e.g. [data-menu-part=arrow]).
                                                                                              string
                                                                                              boundary
                                                                                              The overflow boundary of the reference element
                                                                                                () =>
                                                                                                | 'clippingAncestors'
                                                                                                | Element
                                                                                                | Array<Element>
                                                                                                | {
                                                                                                    height: number
                                                                                                    width: number
                                                                                                    x: number
                                                                                                    y: number
                                                                                                  }
                                                                                                fitViewport
                                                                                                Whether the popover should fit the viewport.
                                                                                                boolean
                                                                                                flip
                                                                                                Whether to flip the placement when the floating element overflows the boundary.
                                                                                                | boolean
                                                                                                | Array<
                                                                                                    | 'bottom'
                                                                                                    | 'bottom-end'
                                                                                                    | 'bottom-start'
                                                                                                    | 'left'
                                                                                                    | 'left-end'
                                                                                                    | 'left-start'
                                                                                                    | 'right'
                                                                                                    | 'right-end'
                                                                                                    | 'right-start'
                                                                                                    | 'top'
                                                                                                    | 'top-end'
                                                                                                    | 'top-start'
                                                                                                  >
                                                                                                true
                                                                                                getAnchorRect
                                                                                                Function that returns the anchor rect
                                                                                                  (
                                                                                                    element:
                                                                                                      | HTMLElement
                                                                                                      | VirtualElement,
                                                                                                  ) => {
                                                                                                    height?: number
                                                                                                    width?: number
                                                                                                    x?: number
                                                                                                    y?: number
                                                                                                  }
                                                                                                  gutter
                                                                                                  The main axis offset or gap between the reference and floating element
                                                                                                  number
                                                                                                  2
                                                                                                  hideWhenDetached
                                                                                                  Whether the popover should be hidden when the reference element is detached
                                                                                                  boolean
                                                                                                  listeners
                                                                                                  Options to activate auto-update listeners
                                                                                                  | boolean
                                                                                                  | {
                                                                                                      ancestorResize?: boolean
                                                                                                      ancestorScroll?: boolean
                                                                                                      animationFrame?: boolean
                                                                                                      elementResize?: boolean
                                                                                                      layoutShift?: boolean
                                                                                                    }
                                                                                                  true
                                                                                                  offset
                                                                                                  The offset of the floating element
                                                                                                  {
                                                                                                    crossAxis?: number
                                                                                                    mainAxis?: number
                                                                                                  }
                                                                                                  onComplete
                                                                                                  Function called when the placement is computed
                                                                                                    (
                                                                                                      data: ComputePositionReturn,
                                                                                                    ) => void
                                                                                                    onPositioned
                                                                                                    Function called when the floating element is positioned or not
                                                                                                      (data: {
                                                                                                        placed: boolean
                                                                                                      }) => void
                                                                                                      overflowPadding
                                                                                                      The virtual padding around the viewport edges to check for overflow
                                                                                                      number
                                                                                                      overlap
                                                                                                      Whether the floating element can overlap the reference element
                                                                                                      boolean
                                                                                                      false
                                                                                                      placement
                                                                                                      The initial placement of the floating element
                                                                                                      | 'bottom'
                                                                                                      | 'bottom-end'
                                                                                                      | 'bottom-start'
                                                                                                      | 'left'
                                                                                                      | 'left-end'
                                                                                                      | 'left-start'
                                                                                                      | 'right'
                                                                                                      | 'right-end'
                                                                                                      | 'right-start'
                                                                                                      | 'top'
                                                                                                      | 'top-end'
                                                                                                      | 'top-start'
                                                                                                      'bottom-start'
                                                                                                      sameWidth
                                                                                                      Whether to make the floating element same width as the reference element
                                                                                                      boolean
                                                                                                      shift
                                                                                                      The secondary axis offset or gap between the reference and floating elements
                                                                                                      number
                                                                                                      slide
                                                                                                      Whether the popover should slide when it overflows.
                                                                                                      boolean
                                                                                                      strategy
                                                                                                      The strategy to use for positioning
                                                                                                      | 'absolute'
                                                                                                      | 'fixed'
                                                                                                      'absolute'
                                                                                                      updatePosition
                                                                                                      A callback that will be called when the popover needs to calculate its position.
                                                                                                        (data: {
                                                                                                          updatePosition: () => Promise<void>
                                                                                                        }) => void | Promise<void>
                                                                                                        arrowPadding
                                                                                                        Type
                                                                                                        number
                                                                                                        Description
                                                                                                        The minimum padding between the arrow and the floating element's corner.
                                                                                                        arrowSelector
                                                                                                        Type
                                                                                                        string
                                                                                                        Description
                                                                                                        CSS selector used to locate the arrow element within the floating element. Components override this with their own anatomy-namespaced selector (e.g. [data-menu-part=arrow]).
                                                                                                        boundary
                                                                                                        Type
                                                                                                        () =>
                                                                                                        | 'clippingAncestors'
                                                                                                        | Element
                                                                                                        | Array<Element>
                                                                                                        | {
                                                                                                            height: number
                                                                                                            width: number
                                                                                                            x: number
                                                                                                            y: number
                                                                                                          }
                                                                                                        Description
                                                                                                        The overflow boundary of the reference element
                                                                                                          fitViewport
                                                                                                          Type
                                                                                                          boolean
                                                                                                          Description
                                                                                                          Whether the popover should fit the viewport.
                                                                                                          flip
                                                                                                          Type
                                                                                                          | boolean
                                                                                                          | Array<
                                                                                                              | 'bottom'
                                                                                                              | 'bottom-end'
                                                                                                              | 'bottom-start'
                                                                                                              | 'left'
                                                                                                              | 'left-end'
                                                                                                              | 'left-start'
                                                                                                              | 'right'
                                                                                                              | 'right-end'
                                                                                                              | 'right-start'
                                                                                                              | 'top'
                                                                                                              | 'top-end'
                                                                                                              | 'top-start'
                                                                                                            >
                                                                                                          Description
                                                                                                          Whether to flip the placement when the floating element overflows the boundary.
                                                                                                          getAnchorRect
                                                                                                          Type
                                                                                                          (
                                                                                                            element:
                                                                                                              | HTMLElement
                                                                                                              | VirtualElement,
                                                                                                          ) => {
                                                                                                            height?: number
                                                                                                            width?: number
                                                                                                            x?: number
                                                                                                            y?: number
                                                                                                          }
                                                                                                          Description
                                                                                                          Function that returns the anchor rect
                                                                                                            gutter
                                                                                                            Type
                                                                                                            number
                                                                                                            Description
                                                                                                            The main axis offset or gap between the reference and floating element
                                                                                                            hideWhenDetached
                                                                                                            Type
                                                                                                            boolean
                                                                                                            Description
                                                                                                            Whether the popover should be hidden when the reference element is detached
                                                                                                            listeners
                                                                                                            Type
                                                                                                            | boolean
                                                                                                            | {
                                                                                                                ancestorResize?: boolean
                                                                                                                ancestorScroll?: boolean
                                                                                                                animationFrame?: boolean
                                                                                                                elementResize?: boolean
                                                                                                                layoutShift?: boolean
                                                                                                              }
                                                                                                            Description
                                                                                                            Options to activate auto-update listeners
                                                                                                            offset
                                                                                                            Type
                                                                                                            {
                                                                                                              crossAxis?: number
                                                                                                              mainAxis?: number
                                                                                                            }
                                                                                                            Description
                                                                                                            The offset of the floating element
                                                                                                            onComplete
                                                                                                            Type
                                                                                                            (
                                                                                                              data: ComputePositionReturn,
                                                                                                            ) => void
                                                                                                            Description
                                                                                                            Function called when the placement is computed
                                                                                                              onPositioned
                                                                                                              Type
                                                                                                              (data: {
                                                                                                                placed: boolean
                                                                                                              }) => void
                                                                                                              Description
                                                                                                              Function called when the floating element is positioned or not
                                                                                                                overflowPadding
                                                                                                                Type
                                                                                                                number
                                                                                                                Description
                                                                                                                The virtual padding around the viewport edges to check for overflow
                                                                                                                overlap
                                                                                                                Type
                                                                                                                boolean
                                                                                                                Description
                                                                                                                Whether the floating element can overlap the reference element
                                                                                                                placement
                                                                                                                Type
                                                                                                                | 'bottom'
                                                                                                                | 'bottom-end'
                                                                                                                | 'bottom-start'
                                                                                                                | 'left'
                                                                                                                | 'left-end'
                                                                                                                | 'left-start'
                                                                                                                | 'right'
                                                                                                                | 'right-end'
                                                                                                                | 'right-start'
                                                                                                                | 'top'
                                                                                                                | 'top-end'
                                                                                                                | 'top-start'
                                                                                                                Description
                                                                                                                The initial placement of the floating element
                                                                                                                sameWidth
                                                                                                                Type
                                                                                                                boolean
                                                                                                                Description
                                                                                                                Whether to make the floating element same width as the reference element
                                                                                                                shift
                                                                                                                Type
                                                                                                                number
                                                                                                                Description
                                                                                                                The secondary axis offset or gap between the reference and floating elements
                                                                                                                slide
                                                                                                                Type
                                                                                                                boolean
                                                                                                                Description
                                                                                                                Whether the popover should slide when it overflows.
                                                                                                                strategy
                                                                                                                Type
                                                                                                                | 'absolute'
                                                                                                                | 'fixed'
                                                                                                                Description
                                                                                                                The strategy to use for positioning
                                                                                                                updatePosition
                                                                                                                Type
                                                                                                                (data: {
                                                                                                                  updatePosition: () => Promise<void>
                                                                                                                }) => void | Promise<void>
                                                                                                                Description
                                                                                                                A callback that will be called when the popover needs to calculate its position.

                                                                                                                  Shortcuts

                                                                                                                  q-date-picker-input-group

                                                                                                                  Groups the field parts into one bordered control. For a single date picker it renders roughly this structure:

                                                                                                                  <label q-date-picker-label>{{ label }}</label>
<div q-date-picker-input-group-trigger>
  <input q-date-picker-input [index]="0" />
  <button q-date-picker-input-clear-trigger></button>
  <span aria-hidden></span>
  <span q-date-picker-error-indicator></span>
  <button q-date-picker-input-trigger></button>
</div>

                                                                                                                  The two buttons are compact icon buttons, and the empty span is the divider between the input and the triggers. See q-date-picker-input-clear-trigger and q-date-picker-input-trigger.

                                                                                                                  In range mode it renders two inputs with the separator between them:

                                                                                                                  <input q-date-picker-input [index]="0" />
<span aria-hidden>{{ separator }}</span>
<input q-date-picker-input [index]="1" />

                                                                                                                  In multiple mode it renders q-date-picker-value-tags in place of the inputs:

                                                                                                                  <span
  q-date-picker-value-tags
  [dismissLabel]="dismissLabel"
  [placeholder]="placeholder"
></span>

                                                                                                                  Multiple mode also replaces the calendar trigger with a non-interactive calendar icon, because the field itself carries the trigger bindings.

                                                                                                                  q-date-picker-day-grid-header

                                                                                                                  Renders the weekday header row of the day view. This shortcut is equivalent to:

                                                                                                                  <thead q-date-picker-table-head>
  <tr q-date-picker-table-row>
    @for (weekDay of weekDays; track $index) {
      <th
        q-date-picker-table-header
        scope="col"
        [attr.aria-label]="weekDay.long"
      >
        {{ weekDay[format] }}
      </th>
    }
  </tr>
</thead>

                                                                                                                  q-date-picker-day-grid

                                                                                                                  Renders the day cells of the visible month. This shortcut is equivalent to:

                                                                                                                  <tbody q-date-picker-table-body>
  @for (week of weeks; track $index) {
    <tr q-date-picker-table-row>
      @for (day of week; track $index) {
        <td
          q-date-picker-table-cell
          [value]="day"
          [visibleRange]="visibleRange"
        >
          <div q-date-picker-table-cell-trigger>{{ day.day }}</div>
        </td>
      }
    </tr>
  }
</tbody>

                                                                                                                  q-date-picker-month-grid

                                                                                                                  Renders the month cells of the month view. This shortcut is equivalent to:

                                                                                                                  <tbody q-date-picker-table-body>
  @for (months of getMonthsGrid({columns, format}); track $index) {
    <tr q-date-picker-table-row>
      @for (month of months; track $index) {
        <td q-date-picker-table-cell [value]="month.value">
          <div q-date-picker-table-cell-trigger>{{ month.label }}</div>
        </td>
      }
    </tr>
  }
</tbody>

                                                                                                                  q-date-picker-year-grid

                                                                                                                  Renders the year cells of the year view. This shortcut is equivalent to:

                                                                                                                  <tbody q-date-picker-table-body>
  @for (years of getYearsGrid({columns}); track $index) {
    <tr q-date-picker-table-row>
      @for (year of years; track $index) {
        <td q-date-picker-table-cell [value]="year.value">
          <div q-date-picker-table-cell-trigger>{{ year.label }}</div>
        </td>
      }
    </tr>
  }
</tbody>
                                                                                                                  Last updated on by Ryan Bower
                                                                                                                  Data Grid / Table
                                                                                                                  Dialog
                                                                                                                  Overview
                                                                                                                  Examples
                                                                                                                  Single Date
                                                                                                                  Child Directives
                                                                                                                  Composite
                                                                                                                  Range
                                                                                                                  Multiple
                                                                                                                  Action Buttons
                                                                                                                  Open on Click
                                                                                                                  Presets
                                                                                                                  Sizes
                                                                                                                  Hint and Error Text
                                                                                                                  States
                                                                                                                  Min and Max Dates
                                                                                                                  Outside Days
                                                                                                                  Unavailable Dates
                                                                                                                  Locale
                                                                                                                  Inline
                                                                                                                  Custom Trigger
                                                                                                                  Within Dialog
                                                                                                                  Forms
                                                                                                                  Reactive Forms
                                                                                                                  Template Forms
                                                                                                                  Explorer
                                                                                                                  API
                                                                                                                  <q-date-picker>
                                                                                                                  Composite API
                                                                                                                  q-date-picker-root
                                                                                                                  q-date-picker-label
                                                                                                                  q-date-picker-control
                                                                                                                  q-date-picker-input-group
                                                                                                                  q-date-picker-input-group-trigger
                                                                                                                  q-date-picker-input
                                                                                                                  q-date-picker-value-tags
                                                                                                                  q-date-picker-clear-trigger
                                                                                                                  q-date-picker-input-clear-trigger
                                                                                                                  q-date-picker-error-indicator
                                                                                                                  q-date-picker-trigger
                                                                                                                  q-date-picker-input-trigger
                                                                                                                  q-date-picker-hint
                                                                                                                  q-date-picker-error-text
                                                                                                                  q-date-picker-positioner
                                                                                                                  q-date-picker-content
                                                                                                                  q-date-picker-headline
                                                                                                                  q-date-picker-headline-label
                                                                                                                  q-date-picker-headline-value
                                                                                                                  q-date-picker-view
                                                                                                                  q-date-picker-view-control
                                                                                                                  q-date-picker-view-trigger
                                                                                                                  q-date-picker-view-close-trigger
                                                                                                                  q-date-picker-prev-trigger
                                                                                                                  q-date-picker-next-trigger
                                                                                                                  q-date-picker-month-text
                                                                                                                  q-date-picker-year-text
                                                                                                                  q-date-picker-range-text
                                                                                                                  q-date-picker-table
                                                                                                                  q-date-picker-table-head
                                                                                                                  q-date-picker-table-header
                                                                                                                  q-date-picker-table-body
                                                                                                                  q-date-picker-table-row
                                                                                                                  q-date-picker-table-cell
                                                                                                                  q-date-picker-table-cell-trigger
                                                                                                                  q-date-picker-day-grid-header
                                                                                                                  q-date-picker-day-grid
                                                                                                                  q-date-picker-month-grid
                                                                                                                  q-date-picker-year-grid
                                                                                                                  q-date-picker-presets
                                                                                                                  q-date-picker-presets-trigger
                                                                                                                  q-date-picker-preset-trigger
                                                                                                                  q-date-picker-actions
                                                                                                                  q-date-picker-cancel-trigger
                                                                                                                  q-date-picker-ok-trigger
                                                                                                                  datePickerContext
                                                                                                                  DatePickerApi
                                                                                                                  Data Structures
                                                                                                                  DatePickerPositioningOptions
                                                                                                                  Shortcuts
                                                                                                                  q-date-picker-input-group
                                                                                                                  q-date-picker-day-grid-header
                                                                                                                  q-date-picker-day-grid
                                                                                                                  q-date-picker-month-grid
                                                                                                                  q-date-picker-year-grid
                                                                                                                  Copyright © 2026 QUALCOMM incorporated. All rights reserved. This site is built with QUI Docs. Head over to the template repository to start building.