如何根据日期选择器选择的日期动态设置 jquery.timepicker minTime？

Question

我怀疑这是重复的，因为我已经查看了在 SO 上可以找到的所有内容以确保这一点，但如果是，请随时标记我。我正在使用 jquery.datepicker 和 jquery.timepicker 让用户 select 约会的日期和时间。如果约会 select 是今天的日期，则只能将约会设置为距当前时间 2 小时后。如果 selected 日期不是今天和将来，那么 minTime 是 6:00am。我使用的代码似乎只能使用一次。我做错了什么？

//datepicker
var dateToday = new Date(); 
$( ".datepicker" ).datepicker({minDate: dateToday,dateFormat:'yy-mm-dd'});

//timepicker
//on date change compare dates to set time
$(document).on('change', '.datepicker', function() {
//
//get current time
var date_now = new Date();
/*
Append 'UTC' to the string before converting it to a date in javascript:
var date = new Date('6/29/2011 4:52:48 PM UTC');
date.toString() // "Wed Jun 29 2011 09:52:48 GMT-0700 (PDT)"

*/
var d = new Date(date_now + 'UTC');
var n = d.getTime();//miliseconds
//
//
//
//get appt date
//date format : yyyy-mm-dd
var thisyear = d.getFullYear();
var thismonth =(d.getMonth()+1);
var thisday = d.getDate();
//convert month
if (thismonth >= 1 && thismonth < 10){
var mm = '0'+thismonth;
}else{
var mm =thismonth;
}
//convert day
if (thisday >= 1 && thisday < 10){
var dd = '0'+thisday;
}else{
var dd =thisday;
}

//same date formats = true
var nowdate = thisyear + '-' + mm + '-' + dd;
var pickdate = $('.datepicker').val();

//compare dates
if(nowdate === pickdate){
//console.log('same dates');
//minimum booking time
//2 hours from now
//7200000 miliseconds
//add to current time
var minBook = n + 7200000;
//convert miliseconds to time
//minTime
var minTime = msToTime(parseInt(minBook)); 
}else{
//console.log('not same dates');
//set time
var minTime = '6:00am';
}

//timepicker
$('.timepicker').timepicker({
timeFormat: 'HH:mm',
interval: 30,
minTime: minTime,
maxTime: '9:00pm',
dynamic: false,
dropdown: true,
scrollbar: true
});
});
/**
* 
* 
* 
* 
* MILISEONDS TO HOUR
* 
* 
* 
*/
function msToTime(duration) {
var milliseconds = parseInt((duration % 1000) / 100),
seconds = Math.floor((duration / 1000) % 60),
minutes = Math.floor((duration / (1000 * 60)) % 60),
hours = Math.floor((duration / (1000 * 60 * 60)) % 24);

hours = (hours < 10) ? "0" + hours : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;

return hours + ":" + minutes ;
}

<!--JQUERY UI CSS-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<!--JQUERY-->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<!--JQUERY UI JS-->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<!--TIMEP[PICKER JS]-->
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<!--TIMEPICKER CSS-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">


<!--datepicker-->
<input class="datepicker" type="text" placeholder="Date">

<!--timepicker-->
<input  class="timepicker" type="text" placeholder="Time">

Answer 1

您可以将该代码移到事件处理程序之外，而不是在每个更改事件上初始化您的 timepicker。然后，无论何时更改日期，您都可以使用 option 来更新您的 minTime 值。

演示代码 :

$(document).ready(function() {
  var dateToday = new Date();
  $(".datepicker").datepicker({
    minDate: dateToday,
    dateFormat: 'yy-mm-dd'
  });
  //intialize///
  $('.timepicker').timepicker({
    timeFormat: 'HH:mm',
    interval: 30,
    maxTime: '9:00pm',
    dynamic: false,
    dropdown: true,
    scrollbar: true
  });
  $(document).on('change', '.datepicker', function() {
    var date_now = new Date();
    var d = new Date(date_now + 'UTC');
    var n = d.getTime(); //miliseconds
    var thisyear = d.getFullYear();
    var thismonth = (d.getMonth() + 1);
    var thisday = d.getDate();
    //convert month
    if (thismonth >= 1 && thismonth < 10) {
      var mm = '0' + thismonth;
    } else {
      var mm = thismonth;
    }
    //convert day
    if (thisday >= 1 && thisday < 10) {
      var dd = '0' + thisday;
    } else {
      var dd = thisday;
    }
    var nowdate = thisyear + '-' + mm + '-' + dd;
    var pickdate = $('.datepicker').val();
    if (nowdate === pickdate) {
      var minBook = n + 7200000;
      var minTime = msToTime(parseInt(minBook));
    } else {
      var minTime = '6:00am';
    }
    $('.timepicker').timepicker('option', 'minTime', minTime); //update options...
  });
  $(".datepicker").trigger("change") //on load of page call this

  function msToTime(duration) {
    var milliseconds = parseInt((duration % 1000) / 100),
      seconds = Math.floor((duration / 1000) % 60),
      minutes = Math.floor((duration / (1000 * 60)) % 60),
      hours = Math.floor((duration / (1000 * 60 * 60)) % 24);

    hours = (hours < 10) ? "0" + hours : hours;
    minutes = (minutes < 10) ? "0" + minutes : minutes;
    seconds = (seconds < 10) ? "0" + seconds : seconds;

    return hours + ":" + minutes;
  }
})

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<input class="datepicker" type="text" placeholder="Date">
<input class="timepicker" type="text" placeholder="Time">

如何根据日期选择器选择的日期动态设置 jquery.timepicker minTime？

How to set jquery.timepicker minTime dynamically based on datepicker selected date?

jquery

datepicker

timepicker