Use to help the user enter a date in a form.
This component wraps our ns-inputter component. Guidelines defined on the ns-inputter should also be followed when using this component. ns-inputter documentation
Also see ns-inputter best practices
Use the default type for picking a date from a range
Change the date format
Use the default type for picking a date that the user might not be sure of (e.g. Next Friday)
Use the mask type for picking a dates that are well know to the user (e.g. Date of birth)
When the browser supports the
<input type="date"> the format of the input will change depending on the settings of thier device. For example users in UK will get the dd/mm/yyyy date format wheras users in United States of America will get the m/d/yy date format. Regardless of the input format dates are always returned following the ISO 8601 date format
This component uses the ISO 8601 date format: YYYY-MM-DD. This allows us to build upon the native
<input type="date"> which also uses the same standard and provides a consistent approach to hadndling dates throughout nucleus.
Some browsers do not support
type='date' (e.g. Safari on Desktop). The component detects if the browser supports this input and will fallback to use the mask type instead.
To see examples visit Storybook
<ns-form><ns-datepicker label="Date" value="2020-12-31"></ns-datepicker></ns-form>
Does it live in a panel?
Does it live inside other components?
✅ Yes -
What layout classes can be used?
Also see ns-inputter specification
Value to pass to the input autocomplete attribute.
The text to place in the label.
The maximum date allowed to be entered into the input. Must be in YYYY-MM-DD format. Validation will trigger if date is entered after this value
The minimum date allowed to be entered into the input. Must be in YYYY-MM-DD format. Validation will trigger if date is before after this value
Use to select the input format. Default is the native date input.
See ns-inputter. minDate and Max date are automatically applied if the min and max values are populated.
The value the input inside the component. This can be used to add an intial value.
Do you have insights or concerns to share? You can raise an issue via Github bugs.
See all the issues already raised via Github issues.
💩 🎉 🦄 You can also contact the team on Slack on the