我正在使用 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>
有人可以帮我解决这个问题吗?
最佳答案
这是因为您在启用/禁用时没有设置相同的时间范围。您的代码已修复:
// 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>
关于javascript - Picktime 时间选择器在启用后不禁用时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60505933/