Bootstrap DateTime Picker限制可选择的小时_bootstrap-datepicker 选择小时-CSDN博客

本文介绍如何使用BootstrapDateTimePicker组件限制用户仅能选择特定的小时数，如6:00与15:00。通过设置hoursDisabled选项，可以轻松实现对小时的选择限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　近期项目中要求页面中的时间控件对小时选择进行限制，只能选择6:00与15:00。原先使用的My97 DatePicker较为复杂，因此选择针对该需求页面换用Bootstrap DateTime Picker组件来实现该功能。

　　但是在阅读官方文档时只查阅到daysOfWeekDisabled选项以及setDaysOfWeekDisabled方法。没有所需要的小时限制功能。随后通过查阅源码发现：

this.startDate = new Date(-8639968443048000);
this.endDate = new Date(8639968443048000);
this.datesDisabled = [];
this.daysOfWeekDisabled = [];
this.setStartDate(options.startDate || this.element.data('date-startdate'));
this.setEndDate(options.endDate || this.element.data('date-enddate'));
this.setDatesDisabled(options.datesDisabled || this.element.data('date-dates-disabled'));
this.setDaysOfWeekDisabled(options.daysOfWeekDisabled || this.element.data('date-days-of-week-disabled'));
this.setMinutesDisabled(options.minutesDisabled || this.element.data('date-minute-disabled'));
this.setHoursDisabled(options.hoursDisabled || this.element.data('date-hour-disabled'));

其中包含了 setHoursDisable，也就是说可以通过初始化时利用 hoursDisabled 选项来进行控制可选小时。

首先引入datetimepicker所需要的相关css和js文件

<link rel="stylesheet" href="../static/css/bootstrap.min.css" media="screen"/>
<link rel="stylesheet" href="../static/css/date/bootstrap-datetimepicker.min.css" media="screen"/>


<script src="../static/js/jquery-3.3.1.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/date/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script src="../static/js/date/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

组件html代码：

<div class="container">
    <form action="" class="form-horizontal" role="form">
        <fieldset>
            <legend>Test</legend>
            <!--<i class="glyphicon glyphicon-chevron-left" onclick="date_left()"></i>-->
            <input id="datetimepicker" size="16" type="text" readonly class="form_datetime form-control"
                   style="width: 200px; height: 18px; padding: 0" autocomplete="off">
            <!--<i class="glyphicon glyphicon-chevron-right" onclick="date_right()"></i>-->
        </fieldset>
    </form>
</div>

组件绑定及初始化：

$("#datetimepicker").datetimepicker({
    format: 'yyyy/mm/dd hh:ii',
    autoclose: 1,
    minView: 'day',
    hoursDisabled: [0, 1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 16, 17, 18, 19, 20, 21, 22, 23]
});

效果展示：