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

Posted 2023-02-25

【中文标题】您如何以编程方式清除 HTML5 日期字段？

【英文标题】：How do you programmatically clear HTML5 date fields?

【发布时间】：2014-01-20 01:47:27

【问题描述】：

我正在寻找一种使用 javascript（特别是 jQuery）以编程方式清除 html5 日期字段的方法。到目前为止，我已经尝试了两种我认为很明显的方法：

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

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

但至少它们都不能在最新版本的 PC 版 Chrome 上运行，还没有在其他浏览器或平台上尝试过。是否有 API 调用或可以跨浏览器清除日期字段的东西？我搜索过的解决方案（如this）要求用户清除日期字段，而我需要以编程方式完成。

【问题讨论】：

默认没有值吗？ （所以你不能改变它？）

@putvande 不，如果没有指定值，普通输入 [type=date] 字段将在我的系统上具有默认的“dd/mm/yyyy”占位符值。

是的，这就是我的意思。那是empty 我猜。你希望它没有任何价值？

@putvande 我想清空它，是的。 'dd/mm/yyyy' 不是一个值，因为如果你用 Javascript 探测它的值，它不会被检测到，它只是空白。

它需要为空还是可以似乎为空？

【参考方案1】：

您可以将日期更改为空

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

【参考方案2】：

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

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

【参考方案3】：

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

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

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

【讨论】：

我在使用 FireFox（版本 75）时也有过类似的经历。即使 JavaScript 将实际值更改为“”，只读 type=date 输入字段的日期“文本”也不会清除。在 Chrome 和 IE 11 中，除了基础值之外，字段文本确实清晰。我通过在更改值之前将 readonly 属性更改为 false 来解决此问题，然后在清除日期值后将 reaonly 属性更改回 true。现在它适用于 FF、Chrome 和 IE。

【参考方案4】：

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

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

【参考方案5】：

此解决方案检查是否存在默认值，如果存在，则使用它来重置输入。否则，它会通过更新 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;

【参考方案6】：

使用原生的defaultValue属性：

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

只要表单没有指定初始 value as demonstrated in this fiddle，这将有效。

【参考方案7】：

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

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

或以编程方式：

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

或

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

【讨论】：

没有jQuery reset() 方法

所以这个$('#testForm').trigger("reset");

出于某种奇怪的原因，方法是：$('#configform')[0].reset(); 不要问为什么 ID 选择器会返回表单的索引数组。无论如何，这些方法都没有真正清除 Firefox 中的 date 输入。

【参考方案8】：

此行适用于我的浏览器（chrome，最新版本）

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

【参考方案9】：

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

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

【讨论】：

我正在使用 Chrome 版本 31.0.1650.63 m，这是根据更新程序的最新版本，这对我不起作用。我的大问题是我至少需要它在 ios Safari 上也能工作，所以我不能发布只能在 Chrome 中工作的东西。

我在 ubuntu/linux 上有完全相同的版本。通过在控制台中输入$("input[type=date]").val("") 在此站点wufoo.com/html5/types/4-date.html 上进行了尝试。

有趣。当我将 .change() 选择器从所有日期输入更改为由 ID 指定的单个日期字段并尝试 $(this).val('') 它不起作用，但如果我使用 $('#ID_HERE') .val('') 这行得通。谢谢！但是很难应用于一般功能。

当前 Chrome 版本无法使用。

【参考方案10】：

可以恢复占位符；

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

【讨论】：

在 Chrome 中不做任何事情。