Date Time Input @astryx-svelte/core v0.5.2 · DateTimeInput
Usage
DateTimeInput combines date and time selection in one field. On mouse/trackpad devices it uses a calendar popover plus text time input; on coarse-pointer devices the closed control still has separate Date and Time segments, and either segment opens a bottom sheet with Date and Time sections, a swipable month calendar, and accessible time wheels. The closed date and time segments stay side by side when at least 400px is available and wrap into full-width rows below 400px, independent of viewport width. Use it for scheduling, event creation, deadline setting, or any form field that needs a specific datetime.ts
Best practices
| 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. |
| Don't | Wrap a disabled DateTimeInput in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead. |
Examples
Common configurations, variations, and states.DateTimeInput — Validation
DateTimeInput in all three status states: error, warning, and success. Use to surface scheduling conflicts, caution the user about edge cases, or confirm a valid datetime.