Date Range Picker Field
DateRangePickerField is a specialized reusable input component for shaddy form.
⚠️ This content is not available in your language yet.
DateRangePickerField is a specialized reusable input component for the shaddy form. It is built on top of the DateRangePicker UI component and is designed to accept a range of dates with validation and flexible configuration. Use it inside a Shaddy Form to collect a start and end date from users.
Installation
pnpm dlx shadcn@latest add https://shaddy-docs.vercel.app/r/date-range-picker-field
Props
| Name | Type | Default | Description |
|---|---|---|---|
name | string (from react-hook-form Path) | required | The field name (must match your form schema). |
label | string | The label displayed above the date range picker. | |
required | boolean | false | Marks the field as required. |
disabled | boolean | false | Disables the date range picker when true. |
className | string | Additional CSS classes for the field container. |
Usage
<ShaddyForm>
<DateRangePickerField name="eventDates" label="Event Dates" required />
</ShaddyForm>Notes
- It is built on top of the
DateRangePickerUI component, so you can refer to its documentation for more customization options.
