时间戳

首页 > 解决方案 > 在日期选择器上键入后如何验证日期范围

javascript - 在日期选择器上键入后如何验证日期范围

问题描述

我有两个日期选择器。一个是开始日期，一个是结束日期。现在我可以检测开始日期是否确实早于结束日期。只要用户在日历上选择一个日期，日期选择器和验证就可以正常工作。我的问题在于当我开始在结束日期输入日期时。例如，开始日期字段为 2019 年 5 月 2 日，格式为 2019-05-02。现在，当我开始在结束日期字段中输入值 2019 中的 2 时，警报框不会等待我输入整个日期输入并通知我结束日期不应早于开始日期。除了将日期选择器字段转换为只读的创可贴解决方案之外，关于代码逻辑是否有任何解决方法？

这是结束日期的代码：

$('.endDate').each(function (index) 
{
    $(this).attr("id", "pmed" + index);
    $(this).datepicker({
        format: 'yyyy-mm-dd'
    }).on('changeDate', function (endDate) 
    {

          // Do something
          let newEnddate = new Date(endDate.date)
          newEnddate.setDate(newEnddate.getDate() + 1)
          let start_date = parseInt((new Date($("#pmst" + index).val())) / (1000 * 60 * 60 * 24))
          let end_date = parseInt(newEnddate / (1000 * 60 * 60 * 24))
          var inputCTR = parseInt(index) + 1
          if (start_date > end_date) {
            //alert("Starting date must not be less than End date.")
                    $(this).val("")
                    $('#pmst' + inputCTR).prop('disabled', true);
                    $('#pmed' + inputCTR).prop('disabled', true);
                    start_date = "NaN"
                }
                start_date = start_date.toString()
                if (start_date != "NaN" && end_date != "") {
                    $('#pmst' + inputCTR).prop('disabled', false);
                    $('#pmed' + inputCTR).prop('disabled', false);
                }


    });

});

标签： javascript

解决方案

正如你所说，验证器没有在等你，所以为了让它等待使用 debounce。如果您不知道什么是去抖动，请在此处阅读。https://www.geeksforgeeks.org/debouncing-in-javascript/

例子

$('.endDate').each(function (index){
        $(this).attr("id", "pmed" + index);
        $(this).datepicker({
            format: 'yyyy-mm-dd'
        }).on('changeDate', $.debounce(1000, function (endDate) { //1000 is in milliseconds  
            // Do something
            let newEnddate = new Date(endDate.date)
            newEnddate.setDate(newEnddate.getDate() + 1)
            let start_date = parseInt((new Date($("#pmst" + index).val())) / (1000 * 60 * 60 * 24))
            let end_date = parseInt(newEnddate / (1000 * 60 * 60 * 24))
            var inputCTR = parseInt(index) + 1
            if (start_date > end_date) {
                //alert("Starting date must not be less than End date.")
                $(this).val("")
                $('#pmst' + inputCTR).prop('disabled', true);
                $('#pmed' + inputCTR).prop('disabled', true);
                start_date = "NaN"
            }
            start_date = start_date.toString()
            if (start_date != "NaN" && end_date != "") {
                $('#pmst' + inputCTR).prop('disabled', false);
                $('#pmed' + inputCTR).prop('disabled', false);
            }
        }));
    });

可能会有一些编码错误，因为我自己没有运行它，但 debounce 对你来说是一个完美的用例。

推荐阅读