║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Datepicker Range Field description: A component for Wandry UI

Installation

<CodeBlockCommand __pnpm__="pnpm dlx shadcn@latest add @wandry-ui/datepicker-range-field" __npm__="npx shadcn@latest add @wandry-ui/datepicker-range-field" __bun__="bunx --bun shadcn@latest add @wandry-ui/datepicker-range-field" __yarn__="yarn dlx shadcn@latest add @wandry-ui/datepicker-range-field" />

Example

<ComponentPreview src="/registry/examples/datepicker-range-field-demo.tsx" name="datepicker-range-field-demo" description="A component for Wandry UI" align="center" />

Usage

import DatepickerRangeField from "@/components/datepicker-range-field";

<DatepickerRangeField
  nameFrom="startDate"
  nameTo="endDate"
  label="Select Date Range"
  description="Please select a start and end date."
/>

Props

<AutoTypeTable path="registry/wandry-ui/datepicker-range-field.tsx" name="DatepickerRangeFieldProps" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║