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

Posted 2023-05-07

【中文标题】如何根据 datepicker 选择的日期动态设置 jquery.timepicker minTime？

【英文标题】：How to set jquery.timepicker minTime dynamically based on datepicker selected date?

【发布时间】：2021-09-09 05:30:23

【问题描述】：

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

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

【参考方案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">