文本框onChange事件和Datepicker onSelect冲突

Question

I have two text boxes for date fields. User is allowed to enter date in those fields via both jQuery-ui Datepicker and via manually typing through keyboard. The requirement is after entering date in the 1st textbox, the second textbox should get populated with the date exactly 1 year later.I have handled most of the scenarios. I will try to explain clearly in which scenario I am facing the issue. Suppose I am typing in the date manually from keyboard and suddenly I decide to select a different date from Datepicker instead. In this case the the textbox is not showing the selected date from datepicker. I hope I am able to articulate clearly. My guess is Datepicker's onSelect() event is not getting fired in this particular scenario because of any conflict with the textbox's onChange() event.

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

I couldn't find any exact fix for this issue. I am currently going with a small hack/workaround. I am hiding the datepicker as soon as user starts typing inside the textbox. I am using the "keyup" event handler.

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