您如何以编程方式清除HTML5日期字段？

Question

我正在寻找一种用Javascript(特别是jQuery)以编程方式清除HTML5日期字段的方法.到目前为止,我已经尝试了两种我认为很明显的方法:

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

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

但至少他们都没有使用最新版本的Chrome for PC,还没有尝试过其他浏览器或平台.是否有API调用或可以跨浏览器方式清除日期字段的东西？我已经寻找像解决这个需要用户清除日期字段,而我需要这种以编程方式完成.

Answer 1

$("input[type=date]").val("")在chrome中为我工作.它将输入字段设置为dd/mm/yyyy.

也许它是特定于浏览器的.大多数浏览器仅对此输入提供部分支持或不支持:http://caniuse.com/input-datetime

Answer 2

如果您无法清除日期字段，这也可能取决于浏览器错误。我花了一些时间才发现，如果日期控件被禁用，则无法在 Firefox 中重置日期。请参阅：https ://bugzilla.mozilla.org/show_bug.cgi?id=1465979

如果没有错误，我可以像这样清除日期：

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

Answer 3

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

这行代码适用于我的浏览器（chrome），未在其他浏览器中测试

Answer 4

我最近需要做这件事，我做了这个小技巧......似乎可以完成这项工作。

它只是使用 JavaScript，但 jQuery 版本几乎相同......

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>

Answer 5

您可以恢复占位符；

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