This component is based on the native date input <input type="date>
This means that the UX of the input field and its datepicker varies across browsers and devices.
This component is best used where users are choosing from a relatively compact range of dates, where a visual datepicker is helpful.
For situations with a wider range of possibilities, e.g. date of birth or credit card expiry, consider using the ba-date-input component instead.
As this component uses the browser's native date input, the UX of the input field and its datepicker vary across browsers and devices.
For example:
- Chrome desktop has a button to open the datepicker, but doesn't open the datepicker automatically on click (like most other browsers)
- Firefox desktop has a 'clear' button inside the input
- Safari desktop has no button - clicking the input automatically opens the datepicker
Further reading:
As this component uses the browser's native date input, the format of the date value can vary based on browser and locale. Therefore you shouldn't refer to any particular format when instructing the user - e.g. Don't label it "Enter a date (dd/mm/yyyy)"
- US and UK device locales (for example) display the day and month in different orders
- Most browsers use a number format (01/01/2000) but iOS Safari shows the month in short word format (1 Jan 2000)
NB: The value accessed in code will be an empty string unless a valid date is entered, then value will always be in ISO format, regardless of the visual display format.
Further reading:
Always use the label attribute to give a meaningful label to the field.
Further reading:
Disabled form elements are not supported in BAgel because they create accessibility challenges, such as preventing keyboard navigation, confusing screen reader users, and reducing visual clarity for those with impairments
Further reading:
Interactions
Interactions are all as per the native browser behaviour. Exact behaviour varies across browsers but there are no custom behaviours added by the bagel component.
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
hintText
|
hint-text |
Hint text for the input | string | undefined |
undefined |
invalid
|
invalid |
If true then the error will be displayed. | boolean | undefined |
false |
label
(required)
|
label |
Label for the input. | string |
undefined |
max
|
max |
Optional max date value in yyyy-mm-dd format | string | undefined |
this.getMaxDate() |
min
|
min |
Optional min date value in yyyy-mm-dd format | string | undefined |
this.currentDate |
name
|
name |
The name of the input | string | undefined |
undefined |
required
|
required |
If the field is required | boolean | undefined |
false |
value
|
value |
The value of the input. | null | string | undefined |
'' |
Events
| Event | Description | Type |
|---|---|---|
baBlur |
Emitted when the input loses focus. | CustomEvent<void> |
baChange |
Emitted when the value has changed. | CustomEvent<InputDatepickerChangeEventDetail> |
baFocus |
Emitted when the input has focus. | CustomEvent<void> |
baSubmit |
Emitted when the input get submitted | CustomEvent<void> |
Methods
isValid() => Promise<boolean>
An exposed method for triggering the inputs required validation
reset() => Promise<void>
Resets the input back to its initial value
Returns
Type: Promise<void>
Slots
| Slot | Description | Permitted elements |
|---|---|---|
"error" |
Text to show in an error message | <p> |
"minError" |
Text to show in an minError message | <p> |
"maxError" |
Text to show in an maxError message | <p> |
Parent components
ba-input-datepicker can be slotted into:
<ba‑accordion><ba‑card><ba‑card‑segmented><ba‑details><ba‑flex><ba‑form><ba‑form‑group><ba‑form‑group‑dropdown><ba‑grid>
Usage
Basic usage
<ba-input-datepicker label="Outbound date" hint-text="Here's some help with this field"><p slot="error">Enter a valid date.</p></ba-input-datepicker>
The value will be an empty string unless a valid date is entered, then value will always be in ISO format, regardless of the visual display format.
Setting min and max dates
The min and/or max attributes of the native nate input can be set using the min and max attributes on the bagel component (in ISO format):
<ba-input-datepicker hint-text="Here's some help with this field" min="2022-07-30" max="2023-07-30" label="Outbound date"></ba-input-datepicker>
On supporting browsers, these values restrict the range of dates that the user is able to select/input.