DatePicker

The props declared for DatePicker, generated from the types @proyecto-viviana/ui ships.

Import

import { DatePicker } from "@proyecto-viviana/ui";

Props

Props for DatePicker in @proyecto-viviana/ui
Prop	Type	Default	Description
`size`	'S' \| 'M' \| 'L' \| 'XL' \| 'sm' \| 'md' \| 'lg'	`'md'`	The size of the picker.
`class`	string	—	Additional CSS class name.
`label`	string	—	Label for the field.
`description`	string	—	Description text.
`errorMessage`	string	—	Error message.
`contextualHelp`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	A ContextualHelp element to place next to the label.
`placeholder`	string	—	Placeholder text.
`maxVisibleMonths`	number	`1`	The maximum number of months to display at once in the calendar popover.
`firstDayOfWeek`	0 \| 5 \| 'sun' \| 'mon' \| 'tue' \| 'wed' \| 'thu' \| 'fri' \| 'sat' \| 1 \| 2 \| 3 \| 4 \| 6	—	The day that starts the week.
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`onBlur`	(e: FocusEvent) => void	—	Callback when blurred. solidaria
`onChange`	(value: T \| null) => void	—	Handler called when the value changes. solid-stately
`onFocus`	(e: FocusEvent) => void	—	Callback when focused. solidaria
`onKeyDown`	(e: KeyboardEvent) => void	—	Callback for key down (forwarded to the field when the popover is closed). solidaria
`onKeyUp`	(e: KeyboardEvent) => void	—	Callback for key up (forwarded to the field when the popover is closed). solidaria
`aria-describedby`	string	—	The ID of an element that describes the date picker. solidaria
`aria-label`	string	—	An accessible label for the date picker. solidaria
`aria-labelledby`	string	—	The ID of an element that labels the date picker. solidaria
`isDisabled`	MaybeAccessor<boolean>	—	Whether the field is disabled. solid-stately
`autoFocus`	false \| true	—	Auto focus the field. solidaria
`form`	string	—	The form attribute. The associated form id for the hidden date input. solidaria
`name`	string	—	The name attribute for form submission. The name for the hidden date input used in HTML form submission. solidaria
`value`	T \| Accessor<T \| null>	—	The current value (controlled). solid-stately
`onFocusChange`	(isFocused: boolean) => void	—	Callback when focus changes. solidaria
`shouldCloseOnSelect`	false \| true	—	Whether the calendar should close when a date is selected. solidaria-components
`defaultOpen`	false \| true	—	Whether the overlay is open by default (uncontrolled). solidaria-components
`isOpen`	false \| true	—	Whether the overlay is open (controlled). solidaria-components
`onOpenChange`	(isOpen: boolean) => void	—	Callback when the overlay open state changes. solidaria-components
`locale`	string	—	The locale to use for formatting. solidaria-components
`validationState`	ValidationState \| Accessor<ValidationState \| undefined>	—	Validation state. solid-stately
`defaultValue`	T	—	The default value (uncontrolled). solid-stately
`minValue`	DateValue \| Accessor<DateValue \| undefined>	—	The minimum allowed date. solid-stately
`maxValue`	DateValue \| Accessor<DateValue \| undefined>	—	The maximum allowed date. solid-stately
`isReadOnly`	MaybeAccessor<boolean>	—	Whether the field is read-only. solid-stately
`createCalendar`	(name: CalendarIdentifier) => Calendar	—	Resolves a calendar system by its Unicode identifier. solid-stately
`isDateUnavailable`	((date: unknown) => boolean) & ((date: DateValue) => boolean)	—	Whether a date is unavailable. solidaria
`pageBehavior`	'single' \| 'visible'	—	Page behavior for calendar. Controls whether calendar paging advances by one month or by the visible month range. solidaria
`selectionAlignment`	'start' \| 'end' \| 'center'	—	Determines how visible months align around the initial focused date. solidaria-components
`isDateDisabled`	(date: DateValue) => boolean	—	A function that determines whether a date is disabled. solidaria-components
`isInvalid`	false \| true	—	Whether the date picker is invalid. Whether the value is invalid (controlled). solidaria
`isRequired`	MaybeAccessor<boolean>	—	Whether the field is required. solid-stately
`validationBehavior`	'aria' \| 'native'	—	Whether HTML form validation is used. Validation behavior mode. solidaria
`granularity`	'day' \| 'hour' \| 'minute' \| 'second'	—	The granularity. The granularity of the date/time (day, hour, minute, second). solidaria
`maxGranularity`	'day' \| 'hour' \| 'minute' \| 'year' \| 'month'	—	The maximum granularity (largest editable unit). Defaults to `year`. solid-stately
`hourCycle`	24 \| 12	—	The hour cycle. Whether to show the hour in 12 or 24 hour format. solidaria
`hideTimeZone`	false \| true	—	Whether to hide the time zone. solidaria
`placeholderValue`	DateValue	—	The placeholder value. The placeholder date (determines segment structure). solidaria
`shouldForceLeadingZeros`	false \| true	—	Whether to force leading zeros. Whether to force leading zeroes in month/day segments. solidaria
`validate`	ValidationFunction<T>	—	Custom validation function. solid-stately
`allowsNonContiguousRanges`	false \| true	—	Whether dates outside the min/max range are allowed. solid-stately
`buttonAriaLabel`	string	—	Accessible label for the calendar trigger button. solidaria
`dialogAriaLabel`	string	—	Accessible label for the calendar dialog. solidaria
`calendarAriaLabel`	string	—	Accessible label for the calendar grid region. solidaria

Declared in packages/viviana-ui/src/calendar/DatePicker.tsx.

Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.