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!
2 Answers
Answers 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">Answers 2
I know this is not a really great solution as the browser can be tricked any time.
But this should work too.
HTML : <input id="dateInput" type="date" min="2021-08-08">
You can identify the browser of the client if it is Firefox and change the date automatically to become the minimum through this JS:
if (navigator.userAgent.indexOf("Firefox") != -1) { document.getElementById("dateInput").value = document.getElementById("dateInput").min; } 
0 comments:
Post a Comment