mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Gildas GarciaandIvan Vasilov
093ed8f610
## Problem The date picker pattern we currently have: - requires developers add classes and props themselves to get the expected result. This is cumbersome and prone to error. - does not visually convey the field invalid state like inputs do <img width="702" height="256" alt="image" src="https://github.com/user-attachments/assets/cacd6414-6789-42e3-8d06-88e44fd9fe0a" /> ## Solution Introduce a new `DatePicker` _UI pattern_ that wraps the `Popover` and `Button` components to ease the most common scenarios while still allowing full customization <img width="699" height="250" alt="image" src="https://github.com/user-attachments/assets/e80f842c-28b2-4a4f-b316-c2005e771912" /> ## Component usage Note how we manually pass the `isInvalid` prop to the `<DatePickerButton>` to avoid relying on `react-hook-form` contexts which would make the date picker unusable outside RHF forms. Alternative would be to also have a `<DatePickerInput>` that could be used instead of `<DatePickerButton>` when inside an RHF form. ```tsx <FormField control={form.control} name="expiryDate" render={({ field, fieldState }) => ( <FormItemLayout layout="horizontal" label="Date Picker" description="Date selection with calendar popover" > <FormControl className="col-span-6"> <DatePicker> <DatePickerTrigger asChild> <DatePickerButton isInvalid={fieldState.invalid}> {field.value ? format(field.value, 'PPP') : 'Pick a date'} </DatePickerButton> </DatePickerTrigger> <DatePickerContent> <Calendar mode="single" selected={field.value} onSelect={field.onChange} initialFocus /> </DatePickerContent> </DatePicker> </FormControl> </FormItemLayout> )} /> --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
76 lines
2.1 KiB
Plaintext
76 lines
2.1 KiB
Plaintext
---
|
|
title: Date Picker
|
|
description: A date picker component with range and presets.
|
|
component: true
|
|
source:
|
|
shadcn: true
|
|
---
|
|
|
|
<ComponentPreview name="date-picker-demo" peekCode wide />
|
|
|
|
## Installation
|
|
|
|
The Date Picker is built using a composition of the `<Popover />`, `<Button />` and `<Calendar />` components.
|
|
|
|
See installation instructions for the [Popover](/docs/components/popover#installation) and the [Calendar](/docs/components/calendar#installation) components.
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
'use client'
|
|
|
|
import { format } from 'date-fns'
|
|
import * as React from 'react'
|
|
import { Button, Calendar } from 'ui'
|
|
import {
|
|
DatePicker,
|
|
DatePickerButton,
|
|
DatePickerContent,
|
|
DatePickerTrigger,
|
|
} from 'ui-patterns/DatePicker'
|
|
|
|
export function DatePickerDemo() {
|
|
const [date, setDate] = React.useState<Date>()
|
|
|
|
return (
|
|
<DatePicker>
|
|
<DatePickerTrigger asChild>
|
|
<DatePickerButton variant="outline" className="w-[280px]">
|
|
{date ? format(date, 'PPP') : <span>Pick a date</span>}
|
|
</DatePickerButton>
|
|
</DatePickerTrigger>
|
|
<DatePickerContent>
|
|
<Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
|
|
</DatePickerContent>
|
|
</DatePicker>
|
|
)
|
|
}
|
|
```
|
|
|
|
See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
|
|
|
|
## API Reference
|
|
|
|
- `<DatePicker />` accepts the same props as [the `<Popover />` component](./popover).
|
|
- `<DatePickerTrigger />` accepts the same props as [the `<PopoverTrigger />` component](./popover#api-reference).
|
|
- `<DatePickerContent />` accepts the same props as [the `<PopoverContent />` component](./popover#api-reference).
|
|
- `<DatePickerButton />` accepts the same props as [the `<Button />` component](./button) and an optional `isInvalid` prop to visually indicate an invalid date.
|
|
|
|
## Examples
|
|
|
|
### Date Picker
|
|
|
|
<ComponentPreview name="date-picker-demo" peekCode wide />
|
|
|
|
### Date Range Picker
|
|
|
|
<ComponentPreview name="date-picker-with-range" />
|
|
|
|
### With Presets
|
|
|
|
<ComponentPreview name="date-picker-with-presets" />
|
|
|
|
### Form
|
|
|
|
<ComponentPreview name="date-picker-form" />
|