近期项目中要求页面中的时间控件对小时选择进行限制,只能选择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] });
效果展示: