Memorable Date
<ahi-memorable-date> | AhiMemorableDate
The memorable date is used to help users enter a date they already know, like their date of birth. It is a select for the month followed by two text fields which is the easiest way for users to enter most dates according to the U.S. Web Design System (USWDS).
<ahi-memorable-date></ahi-memorable-date>
This component works with standard <form> elements. Please refer to the section on
form controls to learn more about form submission
and client-side validation.
Examples
Disabled
Use the disabled property to prevent the memorable date from being interacted with.
<ahi-memorable-date disabled></ahi-memorable-date>
Label
You can use the label property or the label slot to set a label for the memorable
date input.
<ahi-memorable-date label="This one uses the property."></ahi-memorable-date>
<ahi-memorable-date>
<span slot="label"><i>This one uses the slot.</i></span>
</ahi-memorable-date>
Help Text
You can use the help-text property or the help-text slot to set the help text for
the memorable date input.
<ahi-memorable-date help-text="This one uses the property."></ahi-memorable-date>
<ahi-memorable-date>
<span slot="help-text"><i>This one uses the slot.</i></span>
</ahi-memorable-date>
Maximum and Minimum
A maximum and minimum value can be set using the max and min properties
respectively. These values must be in ISO-8601 format and are inclusive.
<ahi-memorable-date
max="2003-12-31"
min="2003-01-01"
help-text="This input only takes dates in 2003"
></ahi-memorable-date>
Getting the Value
It is highly recommended to use the valueAsDate property instead of the
value property when getting the Memorable Date component’s value. This is because
valueAsDate will be undefined when the input value is not a valid date while
value will return a string representation of exactly what is in the input with “X”s as
placeholders for missing values. JavaScript’s native Date component may give unexpected results when parsing
these invalid values.
valueAsNumber also performs validation and returns NaN if the input value is not a
valid date.
<ahi-memorable-date
class="memorable-date__value-example-input"
help-text="Edit the input to see how the values change!"></ahi-memorable-date>
<script type="module">
const memorableDate = document.querySelector('.memorable-date__value-example-input');
const valueDisplay = document.querySelector('.memorable-date__value-example-value');
const badDateDisplay = document.querySelector('.memorable-date__value-example-bad-date');
const dateDisplay = document.querySelector('.memorable-date__value-example-date');
memorableDate.addEventListener('ahi-change', (event) => {
valueDisplay.textContent = event.target.value;
badDateDisplay.textContent = new Date(event.target.value);
dateDisplay.textContent = event.target.valueAsDate ?? 'undefined';
});
</script>
| Property | Value |
|---|---|
value |
″” |
new Date(value) |
|
valueAsDate |
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/memorable-date/memorable-date.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/memorable-date/memorable-date.js';Slots
| Name | Description |
|---|---|
label
|
The input’s label. Alternatively, you can use the label attribute. |
help-text
|
Text that describes how to use the input. Alternatively, you can use the help-text attribute. |
error
|
An error message shown once the control is invalid. Plain text can be set with the
error property instead; use this slot when the message needs markup.
|
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
value
|
The current value of the memorable date input. The value’s must be in ISO-8601 format: YYYY-MM-DD. The value is submitted as a name/value pair with form data. |
string
|
''
|
|
defaultValue
|
The default value of the form control. Primarily used for resetting the form control. |
string
|
''
|
|
label
|
The memorable date’s label. If you need to display HTML, use the label slot instead.
|
string
|
''
|
|
helpText
help-text
|
The memorable date input’s help text. If you need to display HTML, you can use the
help-text slot instead. When empty, a localized default is shown (see render()).
|
string
|
''
|
|
error
|
An error message to show on the control, as on <ahi-input>. Setting it makes the
control genuinely invalid and shows the message at once, as the control’s only error, without
waiting for the user to touch the field. Clearing it clears that validity. Use the
error slot instead when the message needs markup rather than plain text.
|
string
|
''
|
|
name
|
The name of the memorable date input, submitted as a name/value pair with form data. |
string
|
'date'
|
|
disabled
|
Disables the memorable date input. |
boolean
|
false
|
|
required
|
Makes the memorable date input a required field. |
boolean
|
false
|
|
max
|
The maximum date to accept. Must be in IS0–8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property. |
string
|
- | |
min
|
The minimum date to accept. Must be in IS0–8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property. |
string
|
- | |
validity
|
Gets the validity state object | - | - | |
validationMessage
|
Gets the validation message | - | - | |
valueAsDate
|
Get/set the value of the picker as a Date object. |
Date | undefined
|
- | |
valueAsNumber
|
Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch. |
number
|
- | |
formId
form
|
By default, form controls are associated with the nearest containing
<form> element. This attribute allows you to place the form control outside of a
form and associate it with the form that has this id. The form must be in the same
document or shadow root for this to work.
|
string
|
''
|
|
form
|
The form the control is associated with, following the native form-control contract: reading returns
the associated <form> element (or null if there is none), assigning
takes a form id — assign an empty string to restore association with the nearest containing form.
|
HTMLFormElement | null
|
- | |
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Events
| Name | Description | Event Detail |
|---|---|---|
ahi-blur |
Emitted when the memorable date loses focus. | - |
ahi-change |
Emitted when the date changes, once the changed month, day or year has been committed. | - |
ahi-focus |
Emitted when the memorable date gains focus. | - |
ahi-input |
Emitted each time the value changes, as the day and year are typed and when a month is chosen. | - |
ahi-invalid |
Emitted when the form control has been checked for validity and its constraints aren’t satisfied. | - |
Learn more about events.
Methods
| Name | Description | Arguments |
|---|---|---|
focus() |
Sets focus on the memorable date. |
options: FocusOptions
|
blur() |
Removes focus from the memorable date. | - |
checkValidity() |
Checks for validity but does not show a validation message. Returns true when valid and
false when invalid.
|
- |
reportValidity() |
Checks for validity and shows the browser’s validation message if the control is invalid. | - |
setCustomValidity() |
Sets a custom validation message. Pass an empty string to restore validity. |
message: string
|
resetValidity() |
Hides validity again, returning the control to its pristine state: it stops matching
:user-invalid and drops its error styling until the user next interacts with it. The
value and the validity are both untouched — an empty required control is still invalid and still
blocks submission. This only changes whether that invalidity is shown. Interaction state
otherwise has exactly one automatic exit, form.reset(). Call this when the application
replaces a value itself and the old error no longer describes anything the user did: loading a
draft, switching which record is being edited, or clearing a filter row.
|
- |
Learn more about methods.
CSS Parts
| Name | Description |
|---|---|
base |
Deprecated. Use the memorable-date part instead. |
memorable-date |
The component’s outer wrapper. |
form-control |
The form control that wraps the label, input, and help-text. |
form-control-label |
The label’s wrapper. |
form-control-error |
The error’s wrapper. |
form-control-help-text |
The help text’s wrapper. This control inherits setCustomValidity(message),
checkValidity() and reportValidity() from the form-control base class.
Because they are inherited rather than declared here, they do not appear in this component’s
generated type definitions – which is why they are easy to conclude do not exist. They do, and they
work.
|
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<ahi-icon><ahi-icon-button><ahi-input><ahi-popup><ahi-select><ahi-tag>