DatePicker require not working properly

[aldhahouri]

I've designed a form in my app to manage tasks, including a feature that allows users to specify a start time. This is facilitated through a date picker component. However, despite setting the 'IsRequired' attribute for the date picker, the form does not enforce this requirement, allowing users to proceed without selecting a date.

[knightspore]

This issue persists for me too - if I'm not mistaken, it's because the Calendar component is inside a PopoverContent and isn't present in the DOM for validation at submission time?

[arunkumarayinabathina]

1. Manually Validate the Date Field

Before form submission, check if the date is selected and prevent submission if it's empty.

Example in React:

const handleSubmit = (e) => {  
  e.preventDefault();  
  if (!selectedDate) {  
    alert("Please select a date!");  
    return;  
  }  
  console.log("Form submitted", selectedDate);  
};

2. Move the DatePicker Outside the Popover

If the popover is causing the issue, try placing the DatePicker directly in the form.

3. Use a Controlled Component

Ensure the DatePicker value is properly linked to the state and checked before submission.

[egorzh01]

If this is actual, here is my solve. It works perfectly I want

                <Field>
                  <FieldLabel htmlFor="date-of-birth">Date of Birth</FieldLabel>
                  <Popover open={open} onOpenChange={setOpen}>
                    <PopoverTrigger asChild>
                      <Input
                        id="date-of-birth"
                        type="text"
                        placeholder="Select date"
                        value={
                          dateOfBirth ? dateOfBirth.toLocaleDateString() : ""
                        }
                        onChange={() => {}}
                        className="cursor-pointer"
                        required
                      />
                    </PopoverTrigger>
                    <PopoverContent
                      className="w-auto overflow-hidden p-0"
                      align="start"
                    >
                      <Calendar
                        required
                        hidden={{ after: new Date() }}
                        endMonth={new Date()}
                        mode="single"
                        selected={dateOfBirth}
                        captionLayout="dropdown"
                        onSelect={(date) => {
                          setDateOfBirth(date);
                          setOpen(false);
                        }}
                      />
                    </PopoverContent>
                  </Popover>
                </Field>