'How to reset a date in Firefox input[type=date]?

Firefox v57.0.1 supports the attribute "date" for the HTML input tag. I would like in jQuery to reset the date value when the user click on a radio button like this: enter image description here

In order to get this result:

enter image description here

My jQuery code:

$("input[name=f_foo_duration]").click(function() {
        
   if ($("#f_foo_duration_until").is(':checked')) {
       $("#f_foo_duration_date").attr("readonly", false);
   }else{
      $("#f_foo_duration_date").attr("readonly", true);
      $("#f_foo_duration_date").attr( "value", new Date() ); <-- here
   }
});

I tested:

  • val("")
  • val(null)
  • val("0000-00-00")
  • val( new Date() )

without any success... is there a solution?

javascripthtmljqueryhtml-input


Solution 1:[1]

To set an input element's value use the jQuery function elem.val("..."):

$(function() {
  $('[name="contact"]:radio').on("change", function() {
    if ($("#f_foo_duration_until").is(":checked")) {
      let now = new Date().toISOString().slice(0,10);
      $("#f_foo_duration_date").val(now);      
      $("#f_foo_duration_date").attr("readonly", false);
    } else {
      $("#f_foo_duration_date").val("YYYY-MM-DD");
      $("#f_foo_duration_date").attr("readonly", true);
    }
  });
});
#my-form > * {
  vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">

  <input type="radio" id="f_foo_duration_until" name="contact" value="email">
  <label for="f_foo_duration_until">Valid until</label>

  <input id="f_foo_duration_date" name="f_foo_duration" type="date" value="2017-06-01">
  </input>

  <input type="radio" id="f_foo_duration_unlimited" name="contact" value="unlimited">
  <label for="f_foo_duration_unlimited">Unlimited</label>

</form>

Solution 2:[2]

If you are ready to clear or reset using jQuery, try this code:

$("input[type=date]").val("");

Solution 3:[3]

We'll need to get it to the YYYY-MM-DD format.

  $("#f_foo_duration_date").val(new Date().toISOString().slice(0,10));

See this question for more info on switching the format: Format JavaScript Date to yyyy-mm-dd

Solution 4:[4]

For anyone reaching this post for a slightly different issue :

For chrome it works fine with val("")

Not for Firefox because of the readonly attribute (why?)

If you remove 'readonly', val("") and variations works fine on firefox.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TylerH
Solution 2 TylerH
Solution 3 Clayton Leis
Solution 4 Poutrathor

Related Questions