Picktime 時間選擇器在啟用后不禁用時間

Question

我正在使用 pickadate.js 和 pickatime.js 日期/時間選擇器。 如果選擇了當前日期，我想禁用時間。 雖然這在我只選擇今天的日期一次時有效，但如果我嘗試將它從今天的日期切換到任何其他日期並返回，它無法再次禁用時間范圍。 這是我的代碼：

 // car rental var today = new Date(); var tomorrow = new Date(); tomorrow.setDate(today.getDate() + 1); var nextyear = new Date(); nextyear.setFullYear(nextyear.getFullYear() + 1); pickupdatemin = new Date(document.getElementById("date").value); var timepicker = $("#time").pickatime({ editable: true, clear: "", min: [9, 0], max: [16, 30], onSet: function(context) { getpricing(); } }); var pickupdatepicker = $("#date").pickadate({ editable: true, format: "mm/dd/yyyy", min: today, max: nextyear, today: "", close: "", clear: "", disable: [1], onSet: function(context) { var d = new Date(context.select); var time = timepicker.pickatime("picker"); time.clear().set({ min: [9, 0], max: [16, 30] }); var currenthour = new Date().getHours(); var hourplus = currenthour + 2; today.setHours(0, 0, 0, 0); if (d.getTime() == today.getTime()) { time.set({ disable: [{ from: [9, 0], to: [15, 0] }] }); console.log("today!"); } else { time.set({ enable: [{ from: [9, 0], to: [17, 0] }] }); console.log("not today!"); } getpricing(); } }); function getpricing() { console.log("getpricing"); };

 <link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.time.css" id="theme_time"> <link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.date.css" id="theme_date"> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script> <script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script> <script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script> <input type="time" name="date" id="date" class="form-control tleft readonly" value="" placeholder="Select Date" required> <input type="time" name="time" id="time" class="form-control tleft readonly" value="" placeholder="Select Time" required>

有人可以幫我解決這個問題嗎？

Answer 1

那是因為您在啟用/禁用時沒有設置相同的小時數范圍。 您的代碼已修復：

 // car rental var today = new Date(); var tomorrow = new Date(); tomorrow.setDate(today.getDate() + 1); var nextyear = new Date(); nextyear.setFullYear(nextyear.getFullYear() + 1); pickupdatemin = new Date(document.getElementById("date").value); var timepicker = $("#time").pickatime({ editable: true, clear: "", min: [9, 0], max: [16, 30], onSet: function(context) { getpricing(); } }); var pickupdatepicker = $("#date").pickadate({ editable: true, format: "mm/dd/yyyy", min: today, max: nextyear, today: "", close: "", clear: "", disable: [1], onSet: function(context) { var d = new Date(context.select); var time = timepicker.pickatime("picker"); time.clear().set({ min: [9, 0], max: [16, 30] }); var currenthour = new Date().getHours(); var hourplus = currenthour + 2; today.setHours(0, 0, 0, 0); if (d.getTime() == today.getTime()) { time.set('disable', [{ from: [9, 0], to: [15, 0] }]); console.log("today!"); } else { time.set('enable', [{ from: [9, 0], to: [15, 0] }]); console.log("not today!"); } getpricing(); } }); function getpricing() { console.log("getpricing"); };

 <link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.time.css" id="theme_time"> <link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.date.css" id="theme_date"> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script> <script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script> <script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script> <input type="time" name="date" id="date" class="form-control tleft readonly" value="" placeholder="Select Date" required> <input type="time" name="time" id="time" class="form-control tleft readonly" value="" placeholder="Select Time" required>

Answer 2

我發現我的日期和時間函數與 jquery-ui 腳本一起工作得更好。 只需將其添加到腳本的末尾即可。

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>