DateTimeInput combines a calendar popover with a time input for selecting both a date and time in a single interaction flow. Use it for scheduling, event creation, deadline setting, or any form field that needs a specific datetime.
ts
| Guidance | Practices |
|---|---|
| Do | Provide clear labels and descriptions so users understand what datetime is expected. |
| Do | Use min and max to restrict selectable datetimes to valid ranges. |
| Do | Use hasClear when the datetime is optional so the user can reset it. |
| Do | Choose the hour format (12h or 24h) that matches your audience's locale. |
| Don't | Use DateTimeInput when only a date is needed; use DateInput instead. |
| Don't | Use DateTimeInput when only a time is needed; use TimeInput instead. |
| Don't | Hide the label without surrounding context that makes the field purpose obvious. |