commit

src/components/forms/fields/date-picker-field.tsx

@@ -1,12 +1,7 @@
 'use client';
 
 import { useStore } from '@tanstack/react-form';
-import { format } from 'date-fns';
-import { Calendar } from '@/components/ui/calendar';
 import { FieldDescription, FieldLabel } from '@/components/ui/field';
-import { Icons } from '@/components/icons';
-import { Button } from '@/components/ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import {
   FormField,
   FormFieldError,
@@ -14,7 +9,7 @@ import {
   createFormField,
   useFieldContext
 } from '@/components/ui/form-context';
-import { cn } from '@/lib/utils';
+import { CrmDateInput } from '@/features/crm/components/crm-form-controls';
 
 interface DatePickerFieldProps {
   label: string;
@@ -28,51 +23,28 @@ export function DatePickerField({
   label,
   description,
   required,
-  placeholder = 'Pick a date',
+  placeholder = 'DD/MM/YYYY',
   disabled
 }: DatePickerFieldProps) {
+  void disabled;
   const field = useFieldContext();
   const value = useStore(field.store, (s) => s.value) as string | null | undefined;
-  const isTouched = useStore(field.store, (s) => s.meta.isTouched);
-  const isValid = useStore(field.store, (s) => s.meta.isValid);
-  const selectedDate = value ? new Date(value) : undefined;
 
   return (
     <FormFieldSet>
       <FormField>
-        <FieldLabel>
+        <FieldLabel htmlFor={field.name}>
           {label}
           {required && ' *'}
         </FieldLabel>
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button
-              type='button'
-              variant='outline'
-              className={cn(
-                'w-full justify-start text-left font-normal',
-                !value && 'text-muted-foreground'
-              )}
-              aria-invalid={isTouched && !isValid}
-              onBlur={field.handleBlur}
-            >
-              <Icons.calendar className='mr-2 h-4 w-4' />
-              {selectedDate ? format(selectedDate, 'PPP') : <span>{placeholder}</span>}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className='w-auto p-0' align='start'>
-            <Calendar
-              mode='single'
-              selected={selectedDate}
-              onSelect={(date) => {
-                field.handleChange(date ? date.toISOString() : '');
-                field.handleBlur();
-              }}
-              disabled={disabled}
-              initialFocus
-            />
-          </PopoverContent>
-        </Popover>
+        <CrmDateInput
+          value={value}
+          placeholder={placeholder}
+          onChange={(nextValue) => {
+            field.handleChange(nextValue);
+            field.handleBlur();
+          }}
+        />
         {description && <FieldDescription>{description}</FieldDescription>}
       </FormField>
       <FormFieldError />