Date picker
<ns-datepicker> 
Overview
Use to help the user enter a date in a form.
The ns-datepicker wraps the ns-inputter component. Guidelines defined for the ns-inputter should also be adhered to when using this component. See <ns-inputter> documentation.
Examples
The min and max attributes can be used to define a selectable range between two specific dates, or each can be used separately as a limit. For instance, the max date could represent a promotional deadline by which details must be submitted, or the min date could indicate that an appointment should not be scheduled prior to a specific date.
A mask type can be used for inputting a specific date, providing an efficient alternative to scrolling through a calendar, especially when entering dates such as a date of birth.
The min and max attributes can be used to define a selectable range between two specific dates, or each can be used separately as a limit. For instance, the max date could represent a promotional deadline by which details must be submitted, or the min date could indicate that an appointment should not be scheduled prior to a specific date.
Guidance
Implementation
Placement
The ns-datepicker component can be used in the following components:
<form>wrapped in<ns-form><ns-form-group>
Specification
Attributes
helper
- Property
helper- Description
- The helper text of the datepicker.
- Type
string
label
- Property
label- Description
- The label of the datepicker and needs to be related to the purpose of the date.
- Type
string
autocomplete
- Property
autocomplete- Description
- The autocomplete for the datepicker input.
- Type
string- Options
offbday- Default
off
min
- Property
min- Description
- The minimum date available for selection.
- Type
string- Default
undefined
max
- Property
max- Description
- The maximum date available for selection.
- Type
string- Default
undefined
validation
- Property
validation- Description
- The list of validations to validate the selected date of the datepicker.
- Type
Array- Default
[]
name
- Property
name- Description
- The name of the datepicker to reference in form data.
- Type
string
value
- Property
value- Description
- The value of the selected date.
- Type
string- Default
labelID
- Property
labelID- Type
string- Default
heading
- Property
heading- Type
string- Default
type
- Property
type- Description
- The type of the datepicker.
- Type
string- Options
standardmask- Default
standard
Slots
| Slot | Permitted tags | Description |
|---|---|---|
tip-details | <p> | The tip details related to the `helper` text of the datepicker. |
Events
| Name | Description |
|---|---|
change | Dispatched when the value changes. It holds the value of the datepicker. |
Figma
Please note: The ns-datepicker Figma component configuration instructions
are available only to members of the British Gas workspace who have access to the
Nucleus Figma UI Kit.
Last updated: