Date Input @astryx-svelte/core v0.3.0 · DateInput
Usage
DateInput lets the user type or pick a date from a calendar popover. Use it for scheduling, deadlines, booking dates, or any form field that needs a specific calendar date.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Provide clear labels and descriptions so users understand what date is expected. |
| Do | Use min, max, and dateConstraints to restrict selectable dates to valid ranges. |
| Do | Use hasClear when the date is optional so the user can reset it. |
| Do | Show a loading state with changeAction when the date triggers a server-side save. |
| Do | Use DateInput inside InputGroup when adding a short static prefix or suffix, such as a due-date hint. |
| Don't | Use a DateInput for free-form text that does not represent a calendar date. |
| Don't | Hide the label without surrounding context that makes the field purpose obvious. |
| Don't | Rely on the calendar alone; the text input lets users type dates directly, which is faster for known dates. |
| Don't | Wrap a disabled DateInput 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.DateInput — Clearable
Date input with a clear button that resets the value. Use when the date field is optional and the user may need to undo their selection.
DateInput — Min/Max Constraints
Date input constrained to a min/max window. Use when only certain dates are valid, like booking availability or a fiscal quarter.
DateInput — Formats
The format prop reuses Timestamp's format vocabulary to control how the committed value is displayed: date, date_long (default), date_weekday, and system_date, or a function for a fully custom string. Formatting applies only to the committed value, never to text the user is actively typing.
DateInput — Description
Date input with helper text below the label explaining what the field expects. Use when the purpose of the date is not obvious from the label alone.
DateInput — Validation
Date input in all three status states: error, warning, and success. Use to surface validation issues, caution the user, or confirm a valid selection.