Как отключить определенные часы в определенные даты в Bootstrap 3 datetimepicker? - PullRequest
Новая
       20

Как отключить определенные часы в определенные даты в Bootstrap 3 datetimepicker?

0 голосов
/ 10 июня 2018

Я использую Bootstrap 3 DateTimePicker и пытаюсь отключить определенные часы в определенные даты.Например, я хочу отключить опцию 08:00 часов в 27.06.2008 и опцию 17:00 часов в 06/30/2018.

Я пытался использовать опцию «disabledHours».Но эта опция отключает данный час во всех днях.

Так как мне этого добиться?

Вот мои коды. 

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

1 Ответ

0 голосов
/ 11 июня 2018

Нет встроенных функций для отключения определенных часов в определенную дату.Но дело может быть достигнуто с помощью метода onRenderHour.Храните часы, которые нужно отключить в определенные даты, в массиве disabledtimes_mapping.Они будут отключены автоматически при рендеринге выбора.

PS: этот выбор даты устарел.То же самое разветвляется и поддерживается AuspeXeu в 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">
...