如何在 Bootstrap 3 datetimepicker 中禁用特定日期的特定时间？答案

【问题标题】：How to disable specific hours in specific dates in Bootstrap 3 datetimepicker?如何在 Bootstrap 3 datetimepicker 中禁用特定日期的特定时间？
【发布时间】：2018-11-20 02:43:46
【问题描述】：

我正在使用Bootstrap 3 DateTimePicker，并且我正在尝试在某些特定日期禁用某些特定时间。例如，我想在 2018 年 6 月 27 日禁用 08:00 小时选项，在 2018 年 6 月 30 日禁用 17:00 小时选项。

我尝试使用“disabledHours”选项。但是此选项会禁用所有天的给定小时。

那么我该如何实现呢？

这是我的代码。

$(".datepicker").datetimepicker({
    format: 'MM/DD hh:ii',
    datesDisabled: ['2016/08/20'],
    autoclose: true,    
});

【问题讨论】：

标签： datepicker datetimepicker

【解决方案1】：

没有内置函数可以禁用特定日期的特定时间。但是这种情况可以通过使用onRenderHour方法来实现。将要禁用的小时数存储在数组disabledtimes_mapping 中的特定日期中。这些将在呈现选择器时自动禁用。

P.S：此日期选择器已弃用。同样由 GitHub 中的AuspeXeu 分叉和维护。

var disabledtimes_mapping = ["06/27/2018:8", "06/30/2018:17", "06/30/2018:15"];

function formatDate(datestr)
{
    var date = new Date(datestr);
    var day = date.getDate(); day = day>9?day:"0"+day;
    var month = date.getMonth()+1; month = month>9?month:"0"+month;
    return month+"/"+day+"/"+date.getFullYear();
}

$(".datepicker").datetimepicker({
    format: 'MM/DD hh:ii',
    datesDisabled: ['2018-06-20'],
    autoclose: true,
    onRenderHour:function(date){
  if(disabledtimes_mapping.indexOf(formatDate(date)+":"+date.getUTCHours())>-1)
    {
        return ['disabled'];
    }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.js"></script>
<link href="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<input class="datepicker" type="text">

【讨论】：

你是我的英雄。非常感谢你:)