modelValue | Date | null | null | The selected date. |
placeholder | string | Select a date / 选择日期 | Placeholder text. English by default; Chinese when zh-CN is provided. |
min | Date | — | Earliest selectable date. |
max | Date | — | Latest selectable date. |
isDateDisabled | (date: Date) => boolean | — | Return true to disable a date. |
dateConstraints | Array<(date: Date) => boolean> | — | A day is disabled when any function returns false. |
name | string | — | Form field name. |
label | string | — | Field label. |
description | string | — | Helper text under the label. |
isLabelHidden | boolean | false | Keeps the label for screen readers and hides it visually. labelHidden is the older name; either one hides it. |
isOptional | boolean | — | Marks the label as optional. |
isRequired | boolean | — | Marks the field required and sets aria-required on the input. |
labelTooltip | string | — | Hint shown from the info icon at the end of the label. |
format | 'date' | 'date_long' | 'date_weekday' | 'system_date' | ((iso: string) => string) | 'date_long' | How a committed date is displayed. A function receives YYYY-MM-DD. |
presentation | 'popover' | 'bottom-sheet' | 'native' | 'adaptive-bottom-sheet' | 'adaptive-native' | adaptive-native when omitted | Popover, bottom sheet, system date control, or a switch between them based on the pointer. presentation wins when nativePicker is also set. |
nativePicker | 'touch' | 'always' | 'never' | — | Older surface name. touch follows the pointer, always uses the system control, and never switches between the popover and the bottom sheet by pointer. presentation wins when both are set. |
numberOfMonths | 1 | 2 | 1 | Months shown side by side in the calendar. The system date control cannot express this. |
weekStartsOn | 0-6 | 'sun' | 'mon' | ... | — | First day of the week in the calendar. The system date control cannot express this. |
disabled | boolean | false | Disables the field. |
isLoading | boolean | false | The field cannot be edited and shows a loading indicator. |
changeAction | (value: Date | null) => void | Promise<void> | — | Runs after the value is committed. A promise keeps the field busy until it settles. |
width | number | string | — | Width of the whole field. A number is pixels. |
disabledMessage | string | — | Explains why the field is disabled. With disabled, the message shows in a tooltip on hover or keyboard focus and the input stays focusable with aria-disabled; the value still cannot change. The older disabledReason name works too. |
hasClear | boolean | false | Shows a clear button when a date is set. Clearing also returns focus to the input. The older clearable name works too. |
clearLabel | string | Clear / 清除 | Accessible name for the clear button. Includes label when one is set. English by default; Chinese when zh-CN is provided. |
size | 'sm' | 'md' | 'lg' | 'md' | Field size. |
status | 'default' | 'error' | 'warning' | 'success' | { type, message? } | — | Validation status. An object with message shows that text under the field. |
statusVariant | 'attached' | 'detached' | 'tooltip' | 'attached' | Where the status message sits. |
containerClass | string | object | array | — | Class for the field container. Has no effect, and warns in development, inside InputGroup and in a horizontal-labels FormLayout. |
containerStyle | StyleValue | — | Inline style for the field container. Same targeting as containerClass. |
controlClass | string | object | array | — | Class for the bordered control box. A class written on the component lands here too, not on the inner input. |
controlStyle | StyleValue | — | Inline style for the bordered control box. |
