rhf-date-field

1'use client';
2 
3import type { Lens } from '@hookform/lenses';
4import { format } from 'date-fns';
5import type { Locale } from 'date-fns/locale';
6import { enUS } from 'date-fns/locale';
7import { CalendarIcon } from 'lucide-react';
8import * as React from 'react';
9import type { Matcher } from 'react-day-picker';
10import { useController } from 'react-hook-form';
11import { Button } from '@/components/ui/button';
12import { Calendar } from '@/components/ui/calendar';
13import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
14import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
15import { cn } from '@/lib/utils';
16 
17export interface DateFieldProps {
18  lens: Lens<Date | undefined>;
19  label?: string;
20  description?: string;
21  placeholder?: string;
22  minDate?: Date;
23  maxDate?: Date;
24  locale?: Locale;
25  disabled?: boolean;
26  dateFormat?: string;
27  triggerProps?: React.ComponentProps<typeof Button>;
28}
29 
30export function DateField({
31  lens,
32  label,
33  description,
34  placeholder = 'Pick a date',
35  minDate,
36  maxDate,
37  locale = enUS,
38  disabled,
39  dateFormat = 'PPP',
40  triggerProps,
41}: DateFieldProps) {
42  const { field, fieldState } = useController(lens.interop());
43  const [open, setOpen] = React.useState(false);
44 
45  const value = field.value as Date | undefined;
46  const disabledMatchers: Matcher[] = [];
47  if (minDate) disabledMatchers.push({ before: minDate });
48  if (maxDate) disabledMatchers.push({ after: maxDate });
49 
50  return (
51    <Field className='gap-2' data-invalid={fieldState.invalid}>
52      {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}
53      <Popover open={open} onOpenChange={setOpen}>
54        <PopoverTrigger asChild>
55          <Button
56            type='button'
57            id={field.name}
58            variant='outline'
59            disabled={disabled}
60            aria-invalid={fieldState.invalid}
61            onBlur={field.onBlur}
62            {...triggerProps}
63            className={cn(
64              'w-full justify-between font-normal',
65              !value && 'text-muted-foreground',
66              triggerProps?.className,
67            )}
68          >
69            <span>{value ? format(value, dateFormat, { locale }) : placeholder}</span>
70            <CalendarIcon className='size-4 opacity-50' />
71          </Button>
72        </PopoverTrigger>
73        <PopoverContent className='w-auto p-0' align='start'>
74          <Calendar
75            mode='single'
76            selected={value}
77// … truncated