ba-input-date

A form field for entering dates

<ba-input-date
    legend="Date of Birth"
    day-label="DD"
    month-label="MM"
    year-label="YYYY"
    required
  ></ba-input-date>

This component can be used for entering a range of different date types such as dates of births, credit/debit expiries and other dates.

The legend text helps users of assistive technologies understand that this component is a group of related form fields.

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

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`autocompleteDay`	`autocomplete-day`	Indicates whether the value of the control can be automatically completed by the browser. Valid values are 'on' or 'off' but Chrome ignores 'off' so we use another value to disable autocomplete.	`string \| undefined`	`'null'`
`autocompleteMonth`	`autocomplete-month`	Indicates whether the value of the control can be automatically completed by the browser. Valid values are 'on' or 'off' but Chrome ignores 'off' so we use another value to disable autocomplete.	`string \| undefined`	`'null'`
`autocompleteYear`	`autocomplete-year`	Indicates whether the value of the control can be automatically completed by the browser. Valid values are 'on' or 'off' but Chrome ignores 'off' so we use another value to disable autocomplete.	`string \| undefined`	`'null'`
`dayLabel`	`day-label`	Label text for the day field	`"DD" \| undefined`	`'DD'`
`ignoreDay`	`ignore-day`	If true then the day input will not be displayed.	`boolean \| undefined`	`false`
`inputId`	`input-id`	ID for the host and also used in IDs for the child inputs. Randomised value used as fallback but an id value should always be given in the application.	`string \| undefined`	`id${Math.round( Math.random() * 1e10 )}`
`invalid`	`invalid`	If true then the error will be displayed.	`boolean \| undefined`	`false`
`legend`(required)	`legend`	Text for the legend	`string`	`undefined`
`monthLabel`	`month-label`	Label text for the month field	`"MM" \| undefined`	`'MM'`
`name`	`name`	The name of the input	`string \| undefined`	`undefined`
`required`	`required`	If the input is required	`boolean \| undefined`	`false`
`value`	`value`	The value of the input.	`null \| string \| undefined`	`''`
`yearDigits`	`year-digits`	The number of digits for the year field.	`number \| undefined`	`4`
`yearLabel`	`year-label`	Label text for the year field	`"YYYY" \| undefined`	`'YYYY'`

Events

Event	Description	Type
`baBlur`	Emitted when the input loses focus.	`CustomEvent<void>`
`baChange`	Emitted when the value has changed.	`CustomEvent<InputDateChangeEventDetail>`
`baFocus`	Emitted when the input has focus.	`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>`

Parent components

ba-input-date can be slotted into:

Usage

Basic usage

A simple date input

<ba-input-date
    legend="Date of Birth"
    day-label="DD"
    month-label="MM"
    year-label="YYYY"
    required
  ></ba-input-date>

Card expiry usage

A date input for card expiry details

<ba-input-date
    legend="Card Expiry"
    month-label="MM"
    year-label="YY"
    year-digits="2"
    ignore-day
    autocomplete-month="cc-exp-month"
    autocomplete-year="cc-exp-year"
    required
  ></ba-input-date>

Error messages

It is sometimes useful to add custom validation messages. For example you may wish to:

Add translations
Provide more detail and/or contextual advice
Add links to further information on the error

BAgel provides error messages with translations for:

required
numeric
30 day month
leap years
february

An ${inputType} input that has custom error messages and hint text

<ba-input-date
    legend="Date of Birth"
    day-label="DD"
    month-label="MM"
    year-label="YYYY"
    required
  >
  <p slot="error">We need to know this. <a href="#">Why we need to know</a>
  </p>
  </ba-input-date>