DateRangePicker

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

Import

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

Props

Props for DateRangePicker in @proyecto-viviana/ui
Prop	Type	Default	Description
`size`	'S' \| 'M' \| 'L' \| 'XL' \| 'sm' \| 'md' \| 'lg'	`'M'`	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.
`maxVisibleMonths`	number	—	The maximum number of months to display in the range 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 the field group is blurred. solidaria
`onChange`	(value: RangeValue<T> \| null) => void	—	Handler called when the value changes. solid-stately
`onFocus`	(e: FocusEvent) => void	—	Callback when the field group is focused. solidaria
`onKeyDown`	(e: KeyboardEvent) => void	—	Callback for key down (forwarded when the popover is closed). solidaria
`onKeyUp`	(e: KeyboardEvent) => void	—	Callback for key up (forwarded when the popover is closed). solidaria
`aria-describedby`	string	—	Not yet documented solidaria
`aria-label`	string	—	Not yet documented solidaria
`aria-labelledby`	string	—	Not yet documented solidaria
`isDisabled`	MaybeAccessor<boolean>	—	Whether the calendar is disabled. solid-stately
`autoFocus`	false \| true	—	Auto focus the start field. solidaria
`form`	string	—	The associated form id for the hidden start/end date inputs. solidaria-components
`value`	RangeValue<T> \| Accessor<RangeValue<T> \| null>	—	The current value (controlled). solid-stately
`onFocusChange`	(isFocused: boolean) => void	—	Callback when focus changes. solidaria
`shouldCloseOnSelect`	false \| true	—	Not yet documented 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	—	Not yet documented solidaria-components
`validationState`	ValidationState \| Accessor<ValidationState \| undefined>	—	Validation state. solid-stately
`defaultValue`	RangeValue<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 calendar is read-only. solid-stately
`focusedValue`	DateValue \| Accessor<DateValue \| null \| undefined>	—	The date that is focused when the calendar first mounts. solid-stately
`defaultFocusedValue`	DateValue	—	The default focused date (uncontrolled). solid-stately
`createCalendar`	(identifier: CalendarIdentifier) => InternationalizedCalendar	—	Creates a calendar object for a locale calendar identifier. solid-stately
`isDateUnavailable`	(date: DateValue, anchorDate: CalendarDate \| null) => boolean	—	Callback that determines if a date is unavailable. The second argument is the current selection anchor (the first selected date), so availability can be derived from it. Mirrors solid-stately
`visibleMonths`	number \| Accessor<number \| undefined>	—	The number of months to display at once. solid-stately
`pageBehavior`	RangeCalendarPageBehavior \| Accessor<RangeCalendarPageBehavior \| undefined>	—	Controls whether pagination moves by one month or the visible month count. solid-stately
`selectionAlignment`	RangeCalendarSelectionAlignment \| Accessor<RangeCalendarSelectionAlignment \| undefined>	—	Controls how the initial visible months are aligned around the current value. solid-stately
`isDateDisabled`	(date: DateValue) => boolean	—	Controls which days are disabled. solid-stately
`isInvalid`	false \| true	—	Not yet documented solidaria
`isRequired`	false \| true	—	Not yet documented solidaria
`validationBehavior`	'aria' \| 'native'	—	Controls whether native or ARIA validation should be used. solidaria-components
`granularity`	'day' \| 'hour' \| 'minute' \| 'second'	—	The granularity of the date/time fields. solidaria-components
`hourCycle`	24 \| 12	—	Whether to show the hour in 12 or 24 hour format. solidaria-components
`hideTimeZone`	false \| true	—	Whether to hide the time zone in date/time fields. solidaria-components
`placeholderValue`	DateValue	—	The placeholder date used to determine segment structure. solidaria-components
`allowsNonContiguousRanges`	false \| true	—	Whether to allow selecting the same date for start and end. 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
`startName`	string	—	The name for the start date input used in HTML form submission. solidaria-components
`endName`	string	—	The name for the end date input used in HTML form submission. solidaria-components

Declared in packages/viviana-ui/src/calendar/DateRangePicker.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.