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

Question

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:

In order to get this result:

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?

score 2 · Accepted Answer · edited Apr 15 '22 at 18:38

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>

One important thing : use *.val("YYYY-MM-DD")* before set *.attr("readonly", true)*. I lost time because of that. — J.BizMai, Dec 05 '17 at 22:38

score 1 · Answer 2 · edited Apr 15 '22 at 18:38

1

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

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

edited Apr 15 '22 at 18:38

TylerH

20,799
66
75
101

answered May 13 '20 at 16:27

Basil

1,664
13
25

This just seems to repeat the accepted answer from 2017. – TylerH Apr 15 '22 at 18:39

score 0 · Answer 3 · answered Dec 05 '17 at 19:14

0

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

answered Dec 05 '17 at 19:14

Clayton Leis

1,288
9
20

score 0 · Answer 4 · answered Aug 21 '19 at 15:02

0

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.

answered Aug 21 '19 at 15:02

Poutrathor

1,990
2
20
44

This is more of a comment than an answer. – TylerH Apr 15 '22 at 18:39

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

4 Answers4