CODEWITHSUNDEEP
javascriptjqueryhtmldate
Roy
Roy

Reputation: 745

How do you programmatically clear HTML5 date fields?

I'm looking for a way to programmatically clear HTML5 date fields with Javascript (specifically jQuery). So far I have tried two methods which I thought obvious:

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

$('input[type=date]').val('0000-00-00');

But neither of them work on the latest version of Chrome for PCs at least, haven't tried them with other browsers or platforms yet. Is there an API call or something that can clear date fields in a cross-browser way? Solutions I have searched for like this require the user to clear the date field whereas I need this to be done programmatically.

Upvotes: 22

Views: 78381

Answers (12)

Russell Baird
Russell Baird

Reputation: 9

Set myDate = one space. I like simple solutions.

Upvotes: 0

Watts Epherson
Watts Epherson

Reputation: 783

I had a similar issue with the value. I wanted the onchange() function to run when I set the value to empty. Normally, this always works but for date it didn't even if the value appeared to be blanked and you blurred the input

I discovered that I had to force the onchange() function to trigger the value change too.

document.getElementById('mydate').value='';
document.getElementById('mydate').onchange();

It worked for me and now my form fades out when the value is blanked. I do not know why that works. I tried blur() and focus() but nothing else seems to work.

Upvotes: 0

dhanan jayan
dhanan jayan

Reputation: 29

You can change the date as empty

$('#invoiceDate').val(new Date())

Upvotes: 2

Hepson
Hepson

Reputation: 323

I needed to do it recently and i've made this little hack... Seems to do the job.

It was just with JavaScript, but the jQuery version is pretty the same...

function reset_date_native() {
  var date_input = document.getElementById('date-id');

  //erase the input value
  date_input.value = '';

  //prevent error on older browsers (aka IE8)
  if (date_input.type === 'date') {
    //update the input content (visually)
    date_input.type = 'text';
    date_input.type = 'date';
  }
}

function reset_date_jquery() {
  $('#date-id').val('')
    .attr('type', 'text')
    .attr('type', 'date');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="date-id" type="date" />
<button onclick="reset_date_native()">Trigger the reset function (native)</button>
<button onclick="reset_date_jquery()">Trigger the reset function (jQuery)</button>

Upvotes: 9

David Gausmann
David Gausmann

Reputation: 1718

If you can't clear a date field, this could also depend on a browser bug. I spend some time until I found out that you cannot reset the date in Firefox if the date control is disabled. See: https://bugzilla.mozilla.org/show_bug.cgi?id=1465979

Without the bug, I am able to clear the date like that:

document.getElementById("myDate").value = "";

Upvotes: 8

Sajjad Ali Khan
Sajjad Ali Khan

Reputation: 1813

document.getElementById("datePicker").valueAsDate = null;

this line of code works with my browser (chrome) , didn't tested in other browsers

Upvotes: 6

Robert Waddell
Robert Waddell

Reputation: 854

This solution checks if a default value exists and, if so, uses it to reset the input. Otherwise, it clears the input it by updating value and valueAsDate.

Info on valueAsDate available at: w3c.org.

var dateEl = element.find('input#myDateInput[type="date"]');
dateEl[0].value = ('undefined' !== typeof dateEl[0].defaultValue) ? dateEl[0].defaultValue : '';
if (dateEl[0].value !== '') {
    dateEl[0].valueAsDate = new Date(dateEl[0].value);
} else {
    dateEl[0].valueAsDate = null;
}

Upvotes: 0

Barney
Barney

Reputation: 16456

Use the native defaultValue property:

$('input[type=date]').each( function resetDate(){
  this.value = this.defaultValue;
} );

This works as long as the form doesn't have an initial value specified, as demonstrated in this fiddle.

Upvotes: 0

Romain D&#233;nari&#233;
Romain D&#233;nari&#233;

Reputation: 91

Can you use the reset function of your form ? You can do this with reset button :

      <button type="reset" value="Reset">Reset</button>

or programmaticaly :

      $("#yourFormId").reset();

or

      $('input[type=date]').reset();

Upvotes: 0

Friedrich
Friedrich

Reputation: 2290

this line works with my browser (chrome, latest version)

$('input[type=date]')[0].value = 0;

Upvotes: 0

Dominik Goltermann
Dominik Goltermann

Reputation: 4306

$("input[type=date]").val("") works for me in chrome. It sets the input field to dd/mm/yyyy.

Maybe it's browser specific. Most browsers have only partial or no support for this input: http://caniuse.com/input-datetime

Upvotes: 17

Alex K.
Alex K.

Reputation: 175748

You can restore the placeholder;

$('input[type=date]')[0].valueAsDate = '';

Upvotes: 0

Related Questions