Событие текстового поля onChange и конфликт DatePicker onSelect

Question

У меня есть два текстовых поля для полей даты.Пользователь может вводить дату в эти поля как с помощью jQuery-ui Datepicker, так и вручную с клавиатуры.Требование заключается в том, что после ввода даты в 1-м текстовом поле второе текстовое поле должно заполняться датой ровно через 1 год. Я обработал большинство сценариев.Я постараюсь четко объяснить, в каком сценарии я сталкиваюсь с проблемой.Предположим, я набираю дату вручную с клавиатуры и вдруг решаю выбрать другую дату вместо DatePicker.В этом случае в текстовом поле не отображается выбранная дата из указателя даты.Я надеюсь, что я могу четко сформулировать.Я предполагаю, что событие onSelect () Datepicker не запускается в этом конкретном сценарии из-за какого-либо конфликта с событием 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"/>

Answer 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"/>