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：不推荐使用此日期选择器。同样由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">

如何在Bootstrap 3 datetimepicker中禁用特定日期的特定小时数？

1 个答案: