showPicker() for <input>
The showPicker() method for <input> elements shows the user interface for picking a value. For example, for <input type="date"> it shows the interface for picking a date. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The showPicker() method for <input> elements shows the user interface for picking a value. For example, for <input type="date"> it shows the interface for picking a date. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 99 | 99 | 101 | 16 | 99 | 16 | |
| DOM API | ||||||
showPicker (color input) `color` input | 99 | 99 | 101 | 16 | 99 | |
showPicker (date input) `date` input | 99 | 99 | 101 | 17.4 | 99 | |
showPicker (datetime local input) `datetime-local` input | 99 | 99 | 101 | 17.4 | 99 | |
showPicker (file input) `file` input | 99 | 99 | 101 | 16 | 99 | 16 |
Syntax
<input type="date" id="dateInput">
<button onclick="document.getElementById('dateInput').showPicker()">
Select a date
</button>Live demo
Open date picker
Trigger the native picker with a button instead of focusing the field manually.
Picker support note
Compare fields that may expose a browser picker through the same API.
Use cases
Improve form input
Use showPicker() for <input> to make data entry more efficient, guided, or predictable inside real forms.
Reduce friction
Apply showPicker() for <input> when the browser can help users complete a task with fewer mistakes or less repetitive work.
Cautions
- Test showPicker() for <input> in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Keep labels, instructions, validation, and keyboard behavior clear so the enhancement helps rather than surprises users.
Related links
Powered by web-features