

It must be called in response to a user gesture such as a touch gesture or mouse click otherwise it will fail with a NotAllowedError exception.
#Chrome color picker how to
# How to show a pickerĬalling showPicker() on an element shows a browser picker to the user. Unlike a third-party picker widget, a browser picker is familiar to the user, has great platform-specific support, and is always maintained as part of the browser. Browser date pickers in Chrome desktop, Chrome mobile, Safari desktop, Safari mobile, and Firefox desktop (July 2021). It will also work for elements with suggestions powered by or "autocomplete" which we'll cover as well in this article. I'm happy to share that those days will be over soon as the web platform is introducing a canonical way to show a browser picker for elements with these types: "date", "month", "week", "time", "datetime-local", "color", and "file". Show a picker for controls like date? Stack OverflowĬurrent answers are not great they rely on external libraries, CSS hacks, or specific browser behaviors like simulating a user interaction with click(). # BackgroundĪ frequent request we hear from web developers is: The web platform now ships with the HTMLInputElement showPicker() method, a canonical way to show a browser picker not only for dates, but also time, color, and files. For a long time, you had to resort to custom widget libraries or hacks to show a date picker.
