javascript - 在 JQuery 日期选择器中再添加一个事件，当前添加功能不起作用

Question

目前正在使用 jquery 计算年份。这按预期工作得很好，但我想在其中添加一项功能。如果用户输入错误的值，例如 121212，它应该显示“您输入了错误的格式。请输入正确的格式”。

 $('.startDate').change(function(event) {
     var txtVal6 = $(this).val();
     //alert("check what" + txtVal);
     if (isDate5(txtVal6)) {
             $(this).removeClass("errRed");
             event.stopImmediatePropagation();
     } else {
             alert('Kindly enter date in valid format');
             $(this).addClass("errRed").val("");
             event.stopImmediatePropagation();
     }
  });

  function isDate5(startDate) {
     var currVal6 = startDate;
     if (currVal6 == '') return false;

     var rxDatePattern6 = /^\d{2}[./-]\d{2}[./-]\d{4}$/; //Declare Regex
     var dtArray6 = currVal6.match(rxDatePattern6); // is format OK?

     if (dtArray6 == null) return false;

     //Checks for mm/dd/yyyy format.
     dtMonth6 = dtArray6[3];
     dtDay6 = dtArray6[5];
     dtYear6 = dtArray6[1];

     if (dtMonth6 < 1 || dtMonth6 > 12) return false;
     else if (dtDay6 < 1 || dtDay6 > 31) return false;
     else if ((dtMonth6 == 4 || dtMonth6 == 6 || dtMonth6 == 9 || dtMonth6 == 11) && dtDay6 == 31) return false;
     else if (dtMonth6 == 2) {
             var isleap = (dtArray6 % 4 == 0 && (dtArray6 % 100 != 0 || dtArray6 % 400 == 0));
             if (dtDay6 > 29 || (dtDay6 == 29 && !isleap)) return false;
     }
     return true;
 }

 $('.endDate').change(function(event) {
     var txtVal7 = $(this).val();
     //alert("check what" + txtVal);
     if (isDate6(txtVal7)) {                
             $(this).removeClass("errRed");
             event.stopImmediatePropagation();
     } else {
             alert('Kindly enter date in valid format');
             $(this).addClass("errRed").val("");
             event.stopImmediatePropagation();
     }
 });

 function isDate6(endDate) {
     var currVal7 = endDate;
     if (currVal7 == '') return false;

     var rxDatePattern7 = /^\d{2}[./-]\d{2}[./-]\d{4}$/; //Declare Regex
     var dtArray7 = currVal7.match(rxDatePattern7); // is format OK?

     if (dtArray7 == null) return false;

     //Checks for mm/dd/yyyy format.
     dtMonth7 = dtArray7[3];
     dtDay7 = dtArray7[5];
     dtYear7 = dtArray7[1];

     if (dtMonth7 < 1 || dtMonth7 > 12) return false;
     else if (dtDay7 < 1 || dtDay7 > 31) return false;
     else if ((dtMonth7 == 4 || dtMonth7 == 6 || dtMonth7 == 9 || dtMonth7 == 11) && dtDay7 == 31) return false;
     else if (dtMonth7 == 2) {
             var isleap = (dtArray7 % 4 == 0 && (dtArray7 % 100 != 0 || dtArray7 % 400 == 0));
             if (dtDay7 > 29 || (dtDay7 == 29 && !isleap)) return false;
     }
     return true;
  }

使用此代码，如果我在文本字段到日期字段中输入值 12112，它会提示请输入正确的值，但如果我在起始和结束字段中输入正确的日期值，则年份计算不起作用。

提前致谢

这是fiddle link

Answer 1

不知道为什么你不使用 Date 对象中内置的 Javascript，无论如何，我在你的脚本中做了一些更改，从 RegExp 开始并删除了一些恕我直言，这些功能没有用。
这就是我所做的:

var dateRegex=new RegExp("^[0-9]{2}-[0-9]{2}-[0-9]{4}$");
$(document).on('change', ".datepicker", function() {
    // No need for each() part, you already know which one is the start and which one is the end
    if($(this).val()){
        if(!dateRegex.test($(this).val())){
            alert('Kindly enter date in valid format');
            $(this).val('');
            return false;
        }
    }
    if($(".startDate").val() && $(".endDate").val()){
        var dateStart = $(".datepicker.startDate").val(),
            dateEnd = $(".datepicker.endDate").val();
            // No need even for array, you just get datepicker value like this and test it
            var dateStartArray=dateStart.split('-'),dateEndArray=dateEnd.split('-');
            var fromdate=new Date(dateStartArray[2],dateStartArray[0]-1,dateStartArray[0]),
                todate=new Date(dateEndArray[2],dateEndArray[0]-1,dateEndArray[0]);
            // Creating date object with format YYYY-MM-GG ( taken from datepicker's split array )
            console.log(fromdate);
            console.log(todate);
            if(fromdate>todate){
                alert("To date should be greater than from date");
                return false;
            } else {
                var yearsDifference=todate.getFullYear()-fromdate.getFullYear();
                var monthsDifference=(todate.getMonth()+12*todate.getFullYear())-(fromdate.getMonth()+12*fromdate.getFullYear());
                $("#txt_expy").html(Math.floor(monthsDifference/12)+' Years');
                $("#txt_expm").html((monthsDifference%12)+' Months');
            }   
    } else {
        return false;   
    }
});

您可以查看这个fiddle查看我所做的所有修改，看看这是否有帮助:)