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

Question

我正在使用 Bootstrap 3 DateTimePicker我正试图在某些特定日期禁用某些特定时间。例如，我想禁用 06/27/2018 的 08:00 小时选项和 06/30/2018 的 17:00 小时选项。

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

那么我该如何实现呢？

这是我的代码。

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

Answer 1

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

P.S:此日期选择器已弃用。同样由 ​​AuspeXeu fork 和维护在 GitHub 中。

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