Gildas Garcia 093ed8f610 introduce DatePicker (#46837) ...

## 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>

2026-06-17 12:24:42 +02:00

..

docs

introduce DatePicker (#46837)

2026-06-17 12:24:42 +02:00