Picktime Time Picker не отключает время после включения - PullRequest
Новая
       18

Picktime Time Picker не отключает время после включения

3 голосов
/ 03 марта 2020

Я использую 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>

Может ли кто-нибудь помочь мне исправить это?

Ответы [ 2 ]

2 голосов
/ 06 марта 2020

Это потому, что вы не устанавливаете одинаковый диапазон часов при включении / отключении. Ваш код исправлен: 

// 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>
1 голос
/ 12 марта 2020

Я обнаружил, что мои функции даты и времени работают лучше с помощью скрипта jquery -ui. Просто добавьте это в конец ваших сценариев. 

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