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?

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?

• javascript
• html
• jquery
• html-input

Share Improve this question Follow edited Apr 15, 2022 at 18:38 TylerH 21.1k7878 gold badges7979 silver badges114114 bronze badges asked Dec 5, 2017 at 17:57 J.BizMaiJ.BizMai 2,79733 gold badges2828 silver badges5959 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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./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>

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

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

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

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.