检查输入的日期是否完整

Question

我有以下代码：

<input class="submit-form-on-change" type="month" name="@Model.DatePickerFormKey" value="@Model.InitialValue?.ToString("yyyy-MM")">

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('user-filter-content').querySelectorAll('.submit-form-on-change').forEach(function (element) {
            element.addEventListener('change', function () {
                this.form.submit();
            });
        });
    }, false);
</script>

我可以通过日期选择器选择日期，但我希望也能够使用键盘填写输入字段。

现在我的问题是每次击键都会触发表单提交。

有什么方法可以检查输入的值是否是完整的有效日期？

所以我的意思是像

0202-10

这样的东西是不可能的，但是

2024-10

甚至

1993-10

是可能的。

Answer 1

好的实现是这样的：

我添加了一个计时器/反跳，这样即使日期有效，表单也会在一定时间后提交，以便用户可以先输入年份，然后添加大于 9 的月份

<input class="submit-form-on-change-delayed" type="month" name="@Model.DatePickerFormKey" value="@Model.InitialValue?.ToString("yyyy-MM")>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        let debounceTimer;
        const userFilterContent = document.getElementById('user-filter-content');
        const delay = parseInt(userFilterContent.dataset.submitDelay) || 1000; // Default to 1000 ms if no data-delay

        userFilterContent.querySelectorAll('.submit-form-on-change-delayed').forEach(function (element) {
            element.addEventListener('change', function () {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => {
                    if (isValidDate(this.value)) {
                        this.form.submit();
                    }
                }, delay);
            });
        });
    }, false);

    // Validates that the input string is a valid date formatted as "yyyy-MM"
    function isValidDate(dateString) {

        // Parse the date parts to integers
        const parts = dateString.split("-");
        const year = parseInt(parts[0], 10);
        const month = parseInt(parts[1], 10);

        // Check the ranges of month and year
        if (year < 1000 || year > 9999 || month == 0 || month > 12)
            return false;

        return true;
    };
</script>