jQuery UI日期范围两个日期之间的15天

Question

jQuery UI如何可能在两次输入之间需要15天？。如何在两次输入之间仅选择15天？ 我的头脑变黑了，我不能那样做，为什么我感到羞愧

如果您想了解详细信息，请单击此处

 $(function() { var ilktarih = ['2017-03-23']; var sontarih = ['2017-04-10'] var bostarihler = ['2017-03-15', '2017-03-16', '2017-03-17', '2017-03-18', '2017-03-19', '2017-03-20', '2017-03-21', '2017-03-22', '2017-03-23', '2017-03-24', '2017-03-25', '2017-03-26', '2017-03-27', '2017-03-28', '2017-03-29', '2017-03-30']; var dolutarihler = ['2017-02-22', '2017-02-23', '2017-02-24', '2017-02-25', '2017-02-26', '2017-02-27', '2017-02-28', '2017-03-01', '2017-03-02', '2017-03-03', '2017-03-04', '2017-03-05', '2017-03-06', '2017-03-07', '2017-03-08', '2017-03-09', '2017-03-10', '2017-03-11', '2017-03-12', '2017-03-13', '2017-03-14']; var sstarihler = []; var dateFormat = "mm/dd/yy", from = $("#checkin").datepicker({ changeMonth: true, numberOfMonths: 2, firstDay: 1, minDate: new Date(ilktarih), maxDate: new Date(sontarih), onSelect: function(selectedDate) { var yenitarih = new Date(); var date = $(this).datepicker('getDate'); date.setTime(date.getTime() + (1000 * 60 * 60 * 24)) $("#checkout").datepicker("option", "minDate", date); }, beforeShowDay: function(date) { var y = date.getFullYear().toString(); // get full year var m = (date.getMonth() + 1).toString(); // get month. var d = date.getDate().toString(); // get Day if (m.length == 1) { m = '0' + m; } // append zero(0) if single digit if (d.length == 1) { d = '0' + d; } // append zero(0) if single digit var currDate = y + '-' + m + '-' + d; if (jQuery.inArray(currDate, dolutarihler) >= 0) { return [false, "ui-highlight"]; } if (jQuery.inArray(currDate, bostarihler) >= 0) { return [true, "ui-bos"]; } if (jQuery.inArray(currDate, sstarihler) >= 0) { return [false, "ui-ss"]; } else { return [true]; } }, isTo1: true, }).on("change", function() { to.datepicker("option", "minDate", getDate(this)); }), to = $("#checkout").datepicker({ changeMonth: true, changeYear: true, firstDay: 1, numberOfMonths: 2, minDate: new Date(ilktarih), maxDate: new Date(sontarih), onSelect: function(selectedDate) { $("#checkin").datepicker("option", "maxDate", selectedDate); }, beforeShowDay: function(date) { var y = date.getFullYear().toString(); // get full year var m = (date.getMonth() + 1).toString(); // get month. var d = date.getDate().toString(); // get Day if (m.length == 1) { m = '0' + m; } // append zero(0) if single digit if (d.length == 1) { d = '0' + d; } // append zero(0) if single digit var currDate = y + '-' + m + '-' + d; if (jQuery.inArray(currDate, dolutarihler) >= 0) { return [true, "ui-highlight-donus"]; } if (jQuery.inArray(currDate, bostarihler) >= 0) { return [true, "ui-bos"]; } if (jQuery.inArray(currDate, sstarihler) >= 0) { return [true, "ui-ss-donus"]; } else { return [true]; } } }).on("change", function() { from.datepicker("option", "maxDate", getDate(this)); }); function getDate(element) { var date; try { date = $.datepicker.parseDate(dateFormat, element.value); } catch (error) { date = null; } return date; } }); 

 .form { width: 960px; margin: 120px auto; } .form input { width: 250px; padding: 10px; } .ui-highlight .ui-state-default { background: red !important; border-color: red !important; color: white !important; cursor: no-drop; } .ui-bos .ui-state-default { background: green !important; border-color: green !important; color: white !important; } .ui-ss .ui-state-default { background: yellow !important; border-color: yellow !important; color: gray !important; cursor: help; } .ui-ss-donus .ui-state-default { background: yellow !important; border-color: yellow !important; color: gray !important; cursor: help; } .ui-highlight-donus .ui-state-default { background: red !important; border-color: red !important; color: white !important; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> <div class="form"> <input type="text" id="checkin" /> <input type="text" id="checkout" /> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 

Answer 1

您应该将moment.js用于任何与日期相关的足够复杂的JavaScript任务

Answer 2

也许您想要这样的东西？

 $(function () { $("#txtFrom").datepicker({ onSelect: function(selectedDate) { //$("#cal4").datepicker("setDate", selectedDate); var date = $(this).datepicker("getDate"); date.setDate(date.getDate() + 15); $("#txtTo").datepicker("setDate", date); $("#txtTo").datepicker("option", "minDate", selectedDate); $("#txtTo").datepicker("option", "maxDate", date); } }); $("#txtTo").datepicker({ changeMonth: true, changeYear: true }) }); 

 <link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <input type="text" id="txtFrom" /> <input type="text" id="txtTo" />