如何区分 datetime-local 类型的部分填充或无效输入与空输入？

Posted 2023-03-05

【中文标题】如何区分 datetime-local 类型的部分填充或无效输入与空输入？

【英文标题】：How to tell apart partially filled or invalid input of type datetime-local from the empty one?

【发布时间】：2018-08-28 09:48:04

【问题描述】：

有没有办法知道用户在datetime-local 类型的<input> 中输入了无效的日期和/或时间，而不是他没有输入任何内容？

我想将无输入视为用户想要重置/删除正在编辑的日期时间。

我正在使用来自 AngularJS 的 input['datetime-local'] – https://docs.angularjs.org/api/ng/input/input%5Bdatetime-local%5D。

【问题讨论】：

Is it possible to know if an input type = datetime-local is halfway filled?的可能重复

那个问题的答案是不充分的。单独的“badInput”并不能为您提供您所追求的三种状态。

【参考方案1】：

您可以像这样检查本地日期时间的状态：

<input id="dte" type="datetime-local">

<script>
    var myDate = document.getElementById("dte");
    myDate.addEventListener("blur", function() 
        console.log("valueMissing : " + myDate.validity.valueMissing);
        console.log("badInput : " + myDate.validity.badInput);
        console.log("valid : " + myDate.validity.valid);
        console.log("value : " + myDate.value);
    );
</script>

您可以检查其他值，但这些值应该符合您提到的要求：

未输入值：

valid == false && badInput == false && valueMissing == false && value == ''

输入的值（但无效）：

valid == false && badInput == true && valueMissing == false && value == ''

输入的值（且有效）：

valid = true && badInput == false && valueMissing = false && value == 'whatever date you entered'