Date Pick

Date Picks can be used to choose single dates or date ranges.

Current Status

Built around Radix UI's Accordion with a built-in input field to hold value.
Calendar styling using Tailwind CSS
Works as a controlled component when used within the Field component

Future

More built-in layout options (vertical/horizontal)
Add warning messages if date range is potentially incorrect
Add animations
Improve responsive design for all common device sizes
Add darkmode support
Standardize color design token

Examples

TBD

How to use

Install date-fns library

npm install date-fns

Used for date formatting.

Install Radix UI's Accordion

npm install @radix-ui/react-accordion

Used to hide/show the calendar.

Create component

Copy the code from the sandbox above and paste it into a new file (e.g. DatePick.tsx)

Add child components

Date Pick needs: Calendar and Input

Make it controlled

Wrap with Field component to add control via React Hook Form:

yourform.tsx

<Field
  name="datePick"
  defaultValue=""
  >
  <Field.GroupLabel>Group label text here:</Field.GroupLabel>
  <Field.Control>
    // Pass Date Pick here
    <Field name="exampleDatePick" defaultValue="">
      <Field.GroupLabel type="standard">Pick a date:</Field.GroupLabel>
      <Field.Tip>Between 1990 and 2030</Field.Tip>
      <Field.Control>
        <DatePick startYearRange={1990} endYearRange={2030} />
      </Field.Control>
    </Field>
  </Field.Control>
</Field>

Setup `defaultValues` and `zodSchema` in `Form`

Details in Form component.

⚠️

Use date-fns's format() and startOfToday() to set the default value for consistent formatting.

const defaultValues = {
  exampleDatePick: format(startOfToday(), "MMM-dd-yyyy"),
}

Component API

Required Prop	Type	Description
startYearRange	Number	Sets earliest year in Date Pick's Calendar
endYearRange	Number	Sets latest year in Date Pick's Calendar

Optional Prop	Type	Description
N/A	N/A	N/A

Checkbox Input