rhf-date-range-field

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