How to hide the popup calendar of in Firefox?

Question

In Firefox, input type="date" brings a calendar popup on click.Apart from preventing the default behaviour on click, I haven't found a way to hide the calendar. I don't want to use type='text' either.

Is there any way to hide this popup calendar in Firefox?

Answer 1

If you prevent the default action for the onClick handler, the popup is not shown on Firefox.

<input type="date" onClick="event.preventDefault()" />

Answer 2

There is actually no way to do it properly with css in Firefox. Instead you'll need to work with the click & focus events attached to your input.

Exemple with jQuery (can be done with vanilla JS) :

$("input[type='date']").on('click, focus', function(event) {
   event.preventDefault(); //We prevent default calendar to pop
   // YOUR CODE, show your own calendar, etc
});