syncfusion-react-datetimepicker

Install @syncfusion/ej2-react-calendars, import the base and calendars theme CSS files, then render DateTimePickerComponent with a controlled value state and a change handler that updates state from the event's value property.

Use the min and max props to bound selectable dates, and minTime/maxTime to limit the time range in the popup. Combine with the step prop to control time intervals, such as 15 or 30 minutes.

The component uses the change prop, not onChange, which is a common mistake. Also verify the component is not readonly or disabled, and confirm the handler reads the value from the event argument.

Yes, set enableMask to true for guided entry with customizable maskPlaceholder labels, and enable strictMode to reject invalid or out-of-range input by reverting to the previous valid value.

It meets WCAG 2.1 Level AA with full keyboard navigation using Alt+Down, arrow keys, and Enter. Add aria-label, aria-required, and aria-describedby attributes, and keep visible focus indicators for screen reader support.

Handle the renderDayCell event and check each date's day of week. Set isDisabled to true on the event args for weekend days, and optionally add CSS classes to highlight holidays or style disabled cells.