tsf-date-field

1'use client';
2 
3import { format } from 'date-fns';
4import type { Locale } from 'date-fns/locale';
5import { enUS } from 'date-fns/locale';
6import { CalendarIcon } from 'lucide-react';
7import * as React from 'react';
8import type { Matcher } from 'react-day-picker';
9import { Button } from '@/components/ui/button';
10import { Calendar } from '@/components/ui/calendar';
11import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
12import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
13import { useFieldContext } from '@/components/ui/shuip/tanstack-form/form-context';
14import { cn } from '@/lib/utils';
15 
16export interface DateFieldProps {
17  label?: string;
18  description?: string;
19  placeholder?: string;
20  minDate?: Date;
21  maxDate?: Date;
22  locale?: Locale;
23  dateFormat?: string;
24  disabled?: boolean;
25  fieldProps?: React.ComponentProps<typeof Field>;
26  triggerProps?: React.ComponentProps<typeof Button>;
27}
28 
29export function DateField({
30  label,
31  description,
32  placeholder = 'Pick a date',
33  minDate,
34  maxDate,
35  locale = enUS,
36  dateFormat = 'PPP',
37  disabled,
38  fieldProps,
39  triggerProps,
40}: DateFieldProps) {
41  const field = useFieldContext<Date | undefined>();
42  const { isValid, errors } = field.state.meta;
43  const [open, setOpen] = React.useState(false);
44 
45  const value = field.state.value;
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={!isValid} {...fieldProps}>
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={!isValid}
61            onBlur={field.handleBlur}
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// … truncated