Skip to content

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);
      $("#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?



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").attr("readonly", false);
    } else {
      $("#f_foo_duration_date").attr("readonly", true);
#my-form > * {
  vertical-align: middle;
<script src=""></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 type="radio" id="f_foo_duration_unlimited" name="contact" value="unlimited">
  <label for="f_foo_duration_unlimited">Unlimited</label>