showPicker() for <input>
The HTMLInputElement.showPicker() method displays the browser picker for an input element.
This is the same picker that would normally be displayed when the element is selected, but can be triggered from a button press or other user interaction.
Commonly browsers implement it for inputs of these types: "date", "month", "week", "time", "datetime-local", "color", or "file". It can also be prepopulated with items from a <datalist> element or autocomplete attribute.
More generally, this method should ideally display the picker for any input element on the platform that has a picker.
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.