文本框 onChange 事件和 Datepicker onSelect 冲突答案

【问题标题】：Textbox onChange event and Datepicker onSelect conflict文本框 onChange 事件和 Datepicker onSelect 冲突
【发布时间】：2019-04-29 22:54:19
【问题描述】：

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

$('#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"/>

【问题讨论】：

尝试为 datepicker1 设置默认日期
@SooriyaDasanayake 你能详细说明一下吗？

标签： javascript jquery jquery-ui datepicker

【解决方案1】：

我找不到针对此问题的任何确切解决方法。我目前正在使用一个小技巧/解决方法。一旦用户开始在文本框中输入，我就会隐藏日期选择器。我正在使用“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"/>

【讨论】：