2016-12-21 2 views
-2

Я хотел бы использовать Eonasdan bootstrap datetimepicker Version 4 для моего проекта.Как отключить поле даты в Eonasdan bootstrap datetimepicker?

Требование состоит в том, чтобы найти временной диапазон. Мой вопрос: - возможно ли иметь диапазон от 2 до без даты (другими словами, отключить дату и иметь только временной диапазон).

Ваша помощь очень ценится. Спасибо.

+0

Вы можете использовать компонент как timepicker, используя [ 'формат: HH: mm'] (https://eonasdan.github.io/bootstrap-datetimepicker/Options/#format). Вы можете ограничить время выбора с помощью [disabledTimeIntervals] (http://eonasdan.github.io/bootstrap-datetimepicker/Options/#disabledtimeintervals). В любом случае вы должны отредактировать свой вопрос, добавив свой код, чтобы показать, что вы пробовали. – VincenzoC

ответ

1

Вы можете использовать этот компонент в качестве таймера, используя format: HH:mm. Вы можете ограничить время выбора с помощью disabledTimeIntervals.

Вот рабочий пример отключения времени от 0 до 8 и от 15 до 18:

$('#datetimepicker').datetimepicker({ 
 
    disabledTimeIntervals: [ 
 
    [moment({ h: 0 }), moment({ h: 8 })], 
 
    [moment({ h: 15 }), moment({ h: 18 })] 
 
    ], 
 
    defaultDate: moment("12:00", 'HH:mm'), 
 
    format: 'HH:mm' 
 
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <h6>datetimepicker</h6> 
 
    <input type="text" class="form-control" id="datetimepicker"/> 
 
    </div> 
 
</div>