Skip to content

Method to show native datepicker in Chrome

I use <input type="date"> fields that gracefully fallback to jQuery when the browser does not have support for the field. Relatively recently, Chrome started offering a native date picker, which is great. But I have found that many users miss the little arrow that brings up the calendar and therefore miss the fact that there is an easy calendar for date selection.

Chrome Native Date Picker

To make this more intuitive, it would be great if I could bring up the native datepicker UI when the user moves the focus to the input or clicks another element (like a small calendar icon).

Is there a method that I can use in Chrome to trigger the datepicker UI?

Answer

Chrome 99 should solve this by adding a showPicker() method. It is also available for dev testing (i.e. behind a feature flag) as of Chrome 97 (release date 2021-01-04).

https://chromestatus.com/feature/5692248021794816