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>