如何在Eonasdan bootstrap datetimepicker中禁用日期字段？

Question

我想爲我的項目使用Eonasdan bootstrap datetimepicker版本4。

要求是找到一個時間範圍。我的問題是： - 是否有可能有兩個時間之間沒有日期的範圍（換句話說，禁用日期，只有時間範圍）。

非常感謝您的幫助。 謝謝。

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