InputDate

Use InputDate to capture a date in a form. It builds on the Input component, adding date entry and field-specific validation.

Import

import { InputDate } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
label	string	No	Displayed field label.
name	string	No	Form field identifier.
value	string	No	The date value in YYYY-MM-DD format (for example, 2023-07-29). Displayed to the shopper in their browser’s locale format (for example, 07/29/2023 in en-US).
error	string	No	Field-specific error message.

InputDate inherits the remaining Input props (such as onChange, onBlur, disabled, and placeholder), except error and value, which it redefines above.

Caution

Don’t pass your own onFocus handler. InputDate uses onFocus internally to open the date picker, and a handler you pass replaces that behavior instead of running alongside it.

Example

import { InputDate, provider } from '/@dropins/tools/components.js';

await provider.render(InputDate, {
  name: 'birthdate',
  label: 'Birthdate',
  value: '2023-07-29',
  onChange: (event) => yourSaveBirthdate(event.target.value),
})(document.querySelector('.birthdate'));

Related

• Input — the base text input InputDate extends.
• Field — wraps inputs with labels and validation messages.