HTML5 input type="date" tag ignoring assigned value in script-triggered picker in Firefox

Can someone offer a workaround for this problem?

Objective: allow date picker to appear when wrapper element is clicked for a date element which does not allow direct access.

<form name="dates" method="post" action="">
  Start: <span><input type="date" name="start" value="2023-09-01" /></span><br />
  End: <span><input type="date" name="end" value="2023-09-07" /></span>
</form>

<form name="dates" method="post" action="">
  Start: <span><input type="date" name="start" value="2023-09-01" /></span><br />
  End: <span><input type="date" name="end" value="2023-09-07" /></span>
</form>

span{ position:relative; }
span::after{ content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:#EEE1; }

span{ position:relative; }
span::after{ content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:#EEE1; }

In Firefox, the picker that appears when input is clicked presents the current date rather than the value on the tag.
When the user selects a date, that becomes the value of the input and is what the picker presents on the next click of the input.
I use JavaScript to trigger picker and retrieve/assign the date value for the date inputs:

document.forms.dates.addEventListener('click', elem => {
  if(elem.tagName == 'SPAN') { elem.firstElementChild.showPicker(); }
});
document.forms.dates.start.addEventListener('change', elem => {
  var dateValue = elem.valueAsDate;
  dateValue.setDate( dataValue.getDate() + 6 );
  document.forms.dates.end.value = dateValue.getFullYear() + '-' + ('0'+(dateValue.getMonth()+1)).slice(-2) + '-' + ('0'+(dateValue.getDate())).slice(-2);
});

document.forms.dates.addEventListener('click', elem => {
  if(elem.tagName == 'SPAN') { elem.firstElementChild.showPicker(); }
});
document.forms.dates.start.addEventListener('change', elem => {
  var dateValue = elem.valueAsDate;
  dateValue.setDate( dataValue.getDate() + 6 );
  document.forms.dates.end.value = dateValue.getFullYear() + '-' + ('0'+(dateValue.getMonth()+1)).slice(-2) + '-' + ('0'+(dateValue.getDate())).slice(-2);
});

Example:
User clicks start date, the picker appears and user selects 10/1/2023 date. Result is the value for start date becomes 2023-10-01 and the change function updates the end date input value to 10/7/2023 and the input value reflects the new value.
In Firefox, when the user clicks on the end date input for the first time, the picker appears with "today's date" selected, not the value assigned to the end date input.

I have resorted to a JS Datepicker plugin library to offer users a consistent cross-browser experience since the Firefox date picker is deficient until fixed.

KP-C

Kevin Powell - Community•3y ago

ProdJuan

HTML5 input type="date" tag ignoring assigned value in script-triggered picker in Firefox

Can someone offer a workaround for this problem?

Objective: allow date picker to appear when wrapper element is clicked for a date element which does not allow direct access.

<form name="dates" method="post" action="">
  Start: <span><input type="date" name="start" value="2023-09-01" /></span><br />
  End: <span><input type="date" name="end" value="2023-09-07" /></span>
</form>

<form name="dates" method="post" action="">
  Start: <span><input type="date" name="start" value="2023-09-01" /></span><br />
  End: <span><input type="date" name="end" value="2023-09-07" /></span>
</form>

span{ position:relative; }
span::after{ content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:#EEE1; }

span{ position:relative; }
span::after{ content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:#EEE1; }

document.forms.dates.addEventListener('click', elem => {
  if(elem.tagName == 'SPAN') { elem.firstElementChild.showPicker(); }
});
document.forms.dates.start.addEventListener('change', elem => {
  var dateValue = elem.valueAsDate;
  dateValue.setDate( dataValue.getDate() + 6 );
  document.forms.dates.end.value = dateValue.getFullYear() + '-' + ('0'+(dateValue.getMonth()+1)).slice(-2) + '-' + ('0'+(dateValue.getDate())).slice(-2);
});

document.forms.dates.addEventListener('click', elem => {
  if(elem.tagName == 'SPAN') { elem.firstElementChild.showPicker(); }
});
document.forms.dates.start.addEventListener('change', elem => {
  var dateValue = elem.valueAsDate;
  dateValue.setDate( dataValue.getDate() + 6 );
  document.forms.dates.end.value = dateValue.getFullYear() + '-' + ('0'+(dateValue.getMonth()+1)).slice(-2) + '-' + ('0'+(dateValue.getDate())).slice(-2);
});

HTML5 input type="date" tag ignoring assigned value in script-triggered picker in Firefox

HTML5 input type="date" tag ignoring assigned value in script-triggered picker in Firefox

Similar Threads

Similar Threads

Similar Threads