Picktime Time Picker not disabling times after enable

Question

I am using pickadate.js and pickatime.js date/time pickers. I want to disable times if the current date is selected. While this works if I only select today's date once, but if I try to toggle this from todays date to any other date and back, it fails to disable the time range again. Here is my code:

// 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>

Could someone help me fix this?

score 3 · Answer 1 · answered Mar 05 '20 at 21:19

That's because you're not setting the same range of hours when enabling/disabling. Your code fixed:

// 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>

The problem I am having is in the actual application of this, it disables and enables with a variable based on time, so when time passes it will no longer function properly. — tony, Mar 06 '20 at 08:33

score 1 · Answer 2 · answered Mar 12 '20 at 03:55

1

I found my date and time functions worked much better with the jquery-ui script. Just add this to the end of your scripts.

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

answered Mar 12 '20 at 03:55

ideaztech

1,916
1
11
12

Picktime Time Picker not disabling times after enable

2 Answers2