Another common alternative to date pickers is a single input with a placeholder mask. This can be used for full or partial dates. JavaScript can enhancement the experience.
Expiry Date (MM/YY) Date of Birth (DD/MM/YYYY)
The examples above provide client-side validation with errors such as “Please enter a valid day for February (1 to 28)”. Valid dates are confirmed in full and formatted with the Intl API .
It’s even possible to visually combined mutliple inputs using CSS to appear as one.
Careful consideration
The placeholder attribute should never be used alone. Always include a permanent label element that describes the field and expected format. Depending on design the individual labels may be inclusively hidden for assistive technology.
Date formats vary by region. The United States notably prefer month/day (MM/DD). If your website is used internationally a masked input may cause confusion.
Be kind when parsing user input. Allow for a variety of separators, e.g. forward slash, hyphen, or whitespace. Accept an optional zero prefix, e.g. parse “01” as “1”. Only use a two-digit year for future dates. If the current year is 2025 the input “31” means 2031. Lower numbers like “14” will jump ahead to 2114. This is more obvious near the end of the century!