refactor(core): update date form field

core/app/[locale]/(default)/account/[tab]/_components/addresses-content/address-field-handlers.ts

@@ -162,7 +162,7 @@ const createRadioButtonsValidationHandler =
 const createDatesValidationHandler =
   (dateStateSetter: FieldStateSetFn<FieldState>, dateFieldState: FieldState) =>
   (e: React.ChangeEvent<HTMLInputElement>) => {
-    const fieldId = Number(e.target.id.split('-')[1]);
+    const fieldId = Number(e.target.name.split('-')[2]);
     const validationStatus = e.target.validity.valueMissing;
 
     dateStateSetter({ ...dateFieldState, [fieldId]: !validationStatus });

core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/date.tsx

@@ -72,13 +72,18 @@ export const DateField = ({
   return (
     <Field className="relative" name={name}>
       <fieldset className="space-y-2">
-        <FieldLabel htmlFor={`field-${field.entityId}`} isRequired={field.isRequired}>
+        <FieldLabel htmlFor={name} isRequired={field.isRequired}>
           {field.label}
         </FieldLabel>
-        <DatePicker
-          disabledDays={disabledDays}
+        <input
           id={`field-${field.entityId}`}
           name={name}
+          type="hidden"
+          value={date ? new Date(date).toLocaleDateString() : ''}
+        />
+        <DatePicker
+          disabledDays={disabledDays}
+          id={name}
           onChange={field.isRequired ? onChange : undefined}
           onInvalid={field.isRequired ? onChange : undefined}
           onSelect={handleDateSelect}

core/components/ui/date-picker/date-picker.tsx

@@ -40,6 +40,7 @@ export const DatePicker = React.forwardRef<React.ElementRef<'div'>, DatePickerPr
         <Popover>
           <PopoverTrigger asChild>
             <Input
+              className={required ? 'caret-transparent' : ''}
               placeholder={placeholder}
               readOnly={!required}
               required={required}