文本框onChange事件和Datepicker onSelect冲突

Question

我有两个用于日期字段的文本框。允许用户通过jQuery-ui Datepicker和通过键盘手动键入在这些字段中输入日期。要求是在第一个文本框中输入日期后，第二个文本框应在一年后恰好填充日期。我已经处理了大多数情况。 我将尝试清楚地解释在哪种情况下我会遇到此问题。假设我是通过键盘手动输入日期，然后突然决定从Datepicker中选择一个不同的日期。在这种情况下，文本框不会显示从日期选择器中选择的日期。我希望我能说清楚。我的猜测是，由于与文本框的onChange（）事件发生任何冲突，在这种特定情况下Datepicker的onSelect（）事件没有被触发。

$('#datepicker1').datepicker({
        constrainInput: "true",
        dateFormat: "mm/dd/yy",
        changeMonth: true,
        changeYear: true,
        onSelect: function (date) {

            var parsedDate = parseDate(date);

            var moddate = new Date(Date.parse(parsedDate));

            moddate.setFullYear(moddate.getFullYear() + 1);

            var newDate = moddate.toDateString();

            newDate = new Date(Date.parse(newDate));

            $("#datepicker2").datepicker("option", "maxDate", newDate);

            $('#datepicker2').datepicker('setDate', newDate);

        }

    });
    
    $('#datepicker2').datepicker({
        dateFormat: "mm/dd/yy",
        changeMonth: true,
        changeYear: true,

    });

    var maskConfig = {
        leapday: "29-02-",
        separator: "/",
        showMaskOnHover: false,
        showMaskOnFocus: false,
        placeholder: "00/00/0000"
    }

    $('#datepicker1').inputmask('mm/dd/yyyy', maskConfig);
    $('#datepicker2').inputmask('mm/dd/yyyy', maskConfig);
    
    $('#datepicker1').on("change",function () {
     
        
            var parsedDate = parseDate($('#datepicker1').val());

            var date = new Date(Date.parse(parsedDate));

            date.setFullYear(date.getFullYear() + 1);

            var newDate = date.toDateString();

            newDate = new Date(Date.parse(newDate));

            $("#datepicker2").datepicker("option", "maxDate", newDate);

            $('#datepicker2').datepicker('setDate', newDate);

    });
    
    function parseDate(input) {
    var parts = input.split('/');
    return new Date(parts[2], parts[0] - 1, parts[1]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>

<input type="text" id="datepicker1"/>
<input type="text" id="datepicker2"/>

Answer 1

我找不到此问题的确切解决方法。我目前正在使用小型hack /解决方法。用户开始在文本框中输入内容时，我将隐藏日期选择器。我正在使用“ keyup”事件处理程序。

$('#datepicker1').datepicker({
        constrainInput: "true",
        dateFormat: "mm/dd/yy",
        changeMonth: true,
        changeYear: true,
        onSelect: function (date) {

            var parsedDate = parseDate(date);

            var moddate = new Date(Date.parse(parsedDate));

            moddate.setFullYear(moddate.getFullYear() + 1);

            var newDate = moddate.toDateString();

            newDate = new Date(Date.parse(newDate));

            $("#datepicker2").datepicker("option", "maxDate", newDate);

            $('#datepicker2').datepicker('setDate', newDate);

        }

    });
    
    $('#datepicker2').datepicker({
        dateFormat: "mm/dd/yy",
        changeMonth: true,
        changeYear: true,

    });

    var maskConfig = {
        leapday: "29-02-",
        separator: "/",
        showMaskOnHover: false,
        showMaskOnFocus: false,
        placeholder: "00/00/0000"
    }

    $('#datepicker1').inputmask('mm/dd/yyyy', maskConfig);
    $('#datepicker2').inputmask('mm/dd/yyyy', maskConfig);
    
    $('#datepicker1').on("change",function () {
     
        
            var parsedDate = parseDate($('#datepicker1').val());

            var date = new Date(Date.parse(parsedDate));

            date.setFullYear(date.getFullYear() + 1);

            var newDate = date.toDateString();

            newDate = new Date(Date.parse(newDate));

            $("#datepicker2").datepicker("option", "maxDate", newDate);

            $('#datepicker2').datepicker('setDate', newDate);

    });
    
    $('#datepicker1').on('keyup', function() {
     if (this.value.length > 0) {
        $('#datepicker1').datepicker('hide') ;
     }
     else{
     $('#datepicker1').datepicker('show') ;
     }
});

$('#datepicker2').on('keyup', function() {
     if (this.value.length > 0) {
        $('#datepicker2').datepicker('hide') ;
     }
      else{
     $('#datepicker2').datepicker('show') ;
     }
});
    
    function parseDate(input) {
    var parts = input.split('/');
    return new Date(parts[2], parts[0] - 1, parts[1]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>

<input type="text" id="datepicker1"/>
<input type="text" id="datepicker2"/>