How to trigger native datepickers from javascript in FirefoxOS?

Question

I want to open the native datepicker of FirefoxOS on a click on a button. By default, the native datepicker shows up when an input (date type obviously) has focus. But how to do this with for a button ? Moreover, I don't like date inputs, because my app is in french and the format of the date displayed in a date input is not the french format.

I tested with a date input hidden with css. The click on the button triggers the focus on the input. But in this case the datepicker is not shown.

Please do not suggest me to use JQuery UI or other javascript datepickers. On mobile they are not very usuable and the best is native datepicker.

Thanks for your help

Farcical

Answer 1

Firstly, if your question is about how to fire the native date picker with a button, you can do it by calling focus on it like:

<input id="datepicker" type="date">
<button onclick="document.getElementById('datepicker').focus()"></button>

If it's about hiding the date picker, but still using it with the button, you can put the opacity to 0 with CSS, but it will still be there, just not visible:

#datepicker {
    opacity: 0;
}

Does that answer your question?

Bailiff

I had tried with and input with display: none and visibility: hidden which don't trigger the datepicker. But I forgot opacity:0 which works. Thank you for the trick – Farcical