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.