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

Question

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

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

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

Answer 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'