在jQuery datetimepicker中禁用特定时间

时间:2016-08-03 20:25:21

标签: javascript jquery

有没有办法在jQuery datetimepicker中禁用日期和时间?我想禁用某一天的特定时间(不是一整天)。

2 个答案:

答案 0 :(得分:1)

哈普雷特: 我为此找到了解决方案,但要花很多时间才能找到它...

如果你有一个数据库,你必须把所有的时间和小时都花在那里。

这是在 Index.php 文件中 o 您拥有 FORM 的位置。

$db = "SELECT DATE_FORMAT(datetime, '%Y/%m/%d %H:%i') as date FROM dates";
$result = $app_db->query($db);

然后转换为多数组:

$resp = array();
while( $line = $result->fetch_array(MYSQLI_ASSOC)){
  $dateTime = explode(" ", $line["date"]);
  $date = $dateTime[0];
  $time = $dateTime[1];

  if ( !(array_key_exists($date,$resp))) {
      $resp[$date] = [];
      array_push($resp[$date], $time);
  } else {
      array_push($resp[$date], $time);
  };

};

然后

<script>
  let arr = JSON.parse( '<?php echo json_encode($resp) ?>' );
</script>

现在转到主体js文件并使其像这样:

$('#datetime').datetimepicker({
          onGenerate: function(ct,$i){
            let dates = jQuery(this).find('.xdsoft_date '); // this gonna search all the dates charged
            let times = jQuery(this).find('.xdsoft_time '); // and this all the times

            $.each(dates, function(index, value){
              year = jQuery(value).attr('data-year');
              month = jQuery(value).attr('data-month');
              date = jQuery(value).attr('data-date');

              //after search all the dates this gonna add a "0" number if the month is before "10". without this never gonna work.
              month = ++month;
              if (month < 10) {
               month = '0' + month;
              };

              const existDate = arr[year + "/" + month + "/" + date];

              // if the date exist on your DB now check the times in those dates.
              if (existDate){

                //without this class jquery´s gona check all the days again
                jQuery(value).addClass('xdsoft_restricted');

                  $.each(times, function(index){
                    var hour = $(this).attr('data-hour');
                    var minute = $(this).attr('data-minute');

                    if (minute < 10) {
                      minute = minute + '0';
                    }else if (hour < 10) {
                      hour = '0' + hour;
                    };

                    const exisTime = existDate.indexOf(hour+':'+minute);

                    //and finally, if time exist and also the person check that day (xdsoft_current), add disable class.
                    if (exisTime > -1 && $(value).hasClass('xdsoft_current')) {
                      $(this).addClass('xdsoft_disabled');
                    }

                  })
                }
            })
          },
          onSelectDate : function(ct) {
          }
        });

在查看并尝试此处的所有解决方案之前,这对我有用。

答案 1 :(得分:0)

Harpreet:

可以选择启用或禁用特定时间,称为 allowTimes

示例:

jQuery('#datetimepicker5').datetimepicker({
 datepicker:false,
 allowTimes:[
  '12:00', '13:00', '15:00', 
  '17:00', '17:05', '17:20', '19:00', '20:00'
 ]
});

<强>参考: http://xdsoft.net/jqplugins/datetimepicker/#allowTimes

希望这有帮助!