Date Time Input @astryx-svelte/core v0.3.0 · DateTimeInput
Usage
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
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.