javascript - How to reset a date in Firefox input[type=date]? - Stack Overflow

admin管理员组

文章数量:1399919

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.

本文标签： javascriptHow to reset a date in Firefox inputtypedateStack Overflow