文本框 onChange 事件和 Datepicker onSelect 冲突

Posted 2023-05-08

【中文标题】文本框 onChange 事件和 Datepicker onSelect 冲突

【英文标题】：Textbox onChange event and Datepicker onSelect conflict

【发布时间】：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 你能详细说明一下吗？

【参考方案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"/>