Firefox input type=date min not opening on minimum valid month

Question

I'm not sure if there's a way around this, but Firefox doesn't play nicely when you're using input type="date" with a min= attribute: It always open the datepicker on the current month, rather than the month where the minimum valid date begins. This is particularly annoying if the date is in the future.

For example:

<input type="date" min="2021-08-04">

(See JSFiddle in Firefox.)

The user has to manually scroll through months until they finally get to the one that's available. Less than ideal!

Answer 1

One way to bypass this behaviour is to set a value to the input as suggested in the comments. Instead of setting value attribute in the HTML, you can try to set it programmatically when the user clicks on the input and the datepicker is shown.

I think that focus/focusin are the best events to use to catch, since as far as I know there is no show/open events on input[type="date"].

On MDN page, in the Events sections are mentioned only change and input.

Here a live sample:

var dateControl = document.querySelector('input[type="date"]');
dateControl.addEventListener("focus", function(){
  // You can add validation on value
  if( this.min && !this.value ){
    this.value = this.min;
  }
});

<input type="date" min="2021-08-08">