Question

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

这是结束日期的代码：

$('.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);
                }


    });

});

Answer 1

HTML5具有一个新的输入类型日期，您无需使用脚本进行验证。 CURRENT_LOCATION和max属性通过HTML指定范围。

min

Answer 2

正如您所说，验证器不是在等您，因此为了使其等待，请使用防抖功能。如果您不知道什么是反跳，请在此处阅读。 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);
            }
        }));
    });

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

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

2 个答案: