Date Input

Root · Label · Control · SegmentGroup · Segment · HiddenInput

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#HiddenInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the segmented field.
`allSegments`	`dateInput.Props['allSegments']`		Whether to include all date/time segments based on the granularity.
`defaultPlaceholderValue`	`dateInput.Props['defaultPlaceholderValue']`		The initial placeholder date value when rendered.
`defaultValue`	`dateInput.DateValue[]`		The initial selected date(s) when rendered. Use when you don't need to control the selected date(s).
`disabled`	`boolean`		Whether the date input is disabled.
`form`	`string`		The associate form of the hidden input element.
`format`	`dateInput.Props['format']`		The format of the date to display in the input.
`formatter`	`dateInput.Props['formatter']`		The formatter used to format the date segments.
`granularity`	`dateInput.Props['granularity']`		The granularity of the date input.
`hideTimeZone`	`boolean`	`false`	Whether to hide the time zone segment when the value is a `ZonedDateTime`.
`hourCycle`	`dateInput.Props['hourCycle']`		The hour cycle used for formatting time segments.
`id`	`string`		The unique identifier of the machine.
`ids`	`dateInput.Props['ids']`		The ids of the elements in the date input. Useful for composition.
`invalid`	`boolean`		Whether the date input is invalid.
`locale`	`string`	`"en-US"`	The locale (BCP 47 language tag) to use when formatting the date.
`max`	`dateInput.DateValue`		The maximum date that can be selected.
`min`	`dateInput.DateValue`		The minimum date that can be selected.
`modelValue`	`dateInput.DateValue[]`		The v-model value of the date input.
`name`	`string`		The `name` attribute of the hidden input element.
`placeholderValue`	`dateInput.Props['placeholderValue']`		The placeholder date value used to generate placeholder segments.
`readOnly`	`boolean`		Whether the date input is read-only.
`required`	`boolean`		Whether the date input is required.
`selectionMode`	`dateInput.SelectionMode`	`"single"`	The selection mode of the date input. - `single` - only one date can be selected - `range` - a range of dates can be selected
`shouldForceLeadingZeros`	`boolean`		Whether to force leading zeros for numeric segments.
`timeZone`	`string`	`"UTC"`	The time zone to use.
`translations`	`dateInput.Props['translations']`		The localized messages to use.
`value`	`dateInput.DateValue[]`		The controlled selected date(s).

Event	Payload
`focusChange`	`details: FocusChangeDetails`
`valueChange`	`details: ValueChangeDetails`
`update:modelValue`	`value: DateValue[]`
`placeholderChange`	`details: PlaceholderChangeDetails`
`update:placeholderValue`	`placeholderValue: DateValue`

#SegmentContext

A styled part — no props of its own; it takes the anatomy's shared styling.

#SegmentGroup

A styled part — no props of its own; it takes the anatomy's shared styling.

#Segment

A styled part — no props of its own; it takes the anatomy's shared styling.