[bug]: DatePicker form error giving default value null

[DavithCH]

Describe the bug

I am using Calender with react hook form and passing defautValue as null. After clicking submit it converted my value to a date 01 01 1970.

Affected component/components

Calender

How to reproduce

import { Popover, PopoverTrigger } from "@radix-ui/react-popover";
import {
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "./ui/form";

import { cn } from "@/lib/utils";
import { Button } from "./ui/button";
import { format } from "date-fns";
import { fr } from "date-fns/locale";
import { CalendarIcon } from "lucide-react";
import { PopoverContent } from "./ui/popover";
import { Calendar } from "./CustomCalender";
import { Control, FieldValues } from "react-hook-form";
import { RequiredFormLabel } from "./RequiredFormLabel";

type Props<
TFieldValues extends FieldValues = FieldValues,
TContext = unknown

= {
name: string;
label: string;
control: Control<TFieldValues, TContext>;
placeholder?: string;
disabled?: boolean;
className?: string;
required?: boolean;
};

const DatePickerForm = ({
name,
control,
label,
placeholder,
className,
required,
disabled,
}: Props) => {
return (
<FormField
control={control}
name={name}
render={({ field }) => {
return (
<FormItem className={cn("min-w-[150px] w-full", className)}>
{required ? (

) : (
{label}
)}

        <FormControl>
          <Popover>
            <PopoverTrigger asChild>
              <FormControl>
                <Button
                  variant={"outline"}
                  disabled={disabled}
                  className={cn(
                    "w-full pl-3 text-left font-normal",
                    !field.value && "text-muted-foreground"
                  )}
                >
                  {field.value ? (
                    format(field.value, "PPP", { locale: fr })
                  ) : (
                    <span>{placeholder || ""}</span>
                  )}

                  <CalendarIcon className='ml-auto h-4 w-4 opacity-50' />
                </Button>
              </FormControl>
            </PopoverTrigger>
            <PopoverContent className='w-auto p-0' align='start'>
              <Calendar
                mode='single'
                selected={field.value ? field.value : undefined}
                onDayClick={(value) => {
                  if (value) {
                    field.onChange(value);
                  }
                }}
                locale={fr}
                captionLayout='dropdown-buttons'
                fromYear={1960}
                toYear={2030}
              />
            </PopoverContent>
          </Popover>
        </FormControl>
        <FormDescription />
        <FormMessage />
      </FormItem>
    );
  }}
/>

);
};

export default DatePickerForm;

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Mac OS

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[P-yiush07]

For handling null values Zod is used for this component, which gives error when no date is selected and submit button pressed.
So i would recommend you to use Zod for handling null actions, and if you're getting null despite securing the default value, then problem might be in your code somewhere, where you're implementing default value logic.