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

时间:2014-01-02 15:13:10

标签: javascript jquery html5 date

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

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

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

但至少他们都没有使用最新版本的Chrome for PC,还没有尝试过其他浏览器或平台。是否有API调用或可以跨浏览器方式清除日期字段的东西?我搜索的解决方案如this要求用户清除日期字段,而我需要以编程方式完成此操作。

10 个答案:

答案 0 :(得分:7)

$("input[type=date]").val("")适用于Chrome。它将输入字段设置为dd / mm / yyyy。

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

答案 1 :(得分:3)

我最近需要这样做,而且我做了这个小技巧...似乎可以完成这项工作。

这只是使用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>

答案 2 :(得分:2)

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

这行代码适用于我的浏览器(chrome),未在其他浏览器中测试

答案 3 :(得分:0)

您可以恢复占位符;

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

答案 4 :(得分:0)

此行适用于我的浏览器(chrome,最新版本)

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

答案 5 :(得分:0)

您可以使用表单的重置功能吗? 您可以使用重置按钮执行此操作:

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

或programmaticaly:

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

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

答案 6 :(得分:0)

使用原生defaultValue属性:

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

只要表单没有指定value初始{{1}},就可以使用此功能。

答案 7 :(得分:0)

此解决方案检查是否存在默认值,如果存在,则使用它来重置输入。否则,它会通过更新value和valueAsDate清除输入。

有关valueAsDate的信息,请访问: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;
}

答案 8 :(得分:0)

如果您无法清除日期字段,则还可能取决于浏览器错误。 我花了一些时间,直到发现禁用日期控件后,您无法在Firefox中重置日期。 参见:https://bugzilla.mozilla.org/show_bug.cgi?id=1465979

没有错误,我可以清除日期:

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

答案 9 :(得分:0)

您可以将日期更改为空

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