需求背景
在日常工作中遇到一个业务场景，需要时间控件来选择时分，但是不需要年月日的成分，实现之后的效果如图
那么下面就开始查找相关的时间控件插件，这里示例图中用到的是bootstrap-datetimepicker时间控件
时分
基于bootstrap-datetimepicker时间控件，我们来看页面代码
<!-- datetimepicker日期和时间插件 --><linkth:href="@{/ajax/libs/datapicker/bootstrap-datetimepicker.min.css?v=2.4.4}"rel="stylesheet"/><inputtype="text"class="form-control"id="datetimepicker-demo-2"placeholder="hh:ii"><scriptth:src="@{/ajax/libs/datapicker/bootstrap-datetimepicker.min.js?v=2.4.4}"></script>
页面需要引入bootstrap-datetimepicker所需的css及js文件，然后在页面初始化时设置bootstrap-datetimepicker控件初始化属性
$(function(){ $("#datetimepicker-demo-2").datetimepicker({ format: "hh:ii", //0 从小时视图开始，选分 1 从天视图开始，选小时 2 从月视图开始，选天 3 从年视图开始，选月 4 从十年视图开始，选年startView:1, autoclose: true, //0 从小时视图开始，选分 1 从天视图开始，选小时 2 从月视图开始，选天 3 从年视图开始，选月 4 从十年视图开始，选年minView:0, //当天日期高亮 默认falsetodayHighlight:true, //步进值 单位分钟minuteStep:60, //强制解析，不正确时强制forceParse:true, language:"zh-cn" }); });
其中相关参数说明如下
| 属性 | 默认值 |
描述 |
备注 |
format |
mm/dd/yyyy | 日期格式 | 格式如 yyyy-mm-dd hh:ii:ss |
| weekStart | 0 |
一周从哪一天开始 | 0（星期日）到6（星期六） |
| startDate | 开始时间 | 可以选择的最早日期，将禁用所有较早日期 | |
| endDate | 结束时间 | 可以选择的最晚日期，所有较迟的日期都将被禁用 | |
| daysOfWeekDisabled | [] | 每周禁用一天 | |
| autoclose | false | 当选择一个日期之后是否立即关闭此日期时间选择器 | |
| startView | 2 |
日期时间选择器打开之后首先显示的视图 | 0 从小时视图开始，选分 1 从天视图开始，选小时 2 从月视图开始，选天 3 从年视图开始，选月 4 从十年视图开始，选年 |
minView |
0 |
日期时间选择器所能够提供的最精确的时间选择视图 | 0 从小时视图开始，选分 1 从天视图开始，选小时 2 从月视图开始，选天 3 从年视图开始，选月 4 从十年视图开始，选年 |
| maxView | 4 |
日期时间选择器最高能展示的选择范围视图 | 0 从小时视图开始，选分 1 从天视图开始，选小时 2 从月视图开始，选天 3 从年视图开始，选月 4 从十年视图开始，选年 |
| todayBtn | false | 是否显示当前日期（今天）按钮 | |
| todayHighlight | false | 是否高亮当前日期 | |
| keyboardNavigation | true | 是否启用键盘方向键选择改变日期 | |
| language | en |
语言 | zh-cn 中文 en 英文 |
| forceParse | true | 强制解析 | 是否强制解析输入框中的值 |
| minuteStep | 5 |
分钟选择视图，分钟步进值 | |
pickerReferer |
default | 没有特殊要求，无序设置 | |
| pickerPosition | bottom-right | 时间选择器窗口的位置 | bottom-left左下 bottom-right右下 top-left左上 top-right左下 |
| viewSelect | 取minView的值 | 视图选择 | decade year month day hour |
| showMeridian | false | 是否为日视图和小时视图启用子午线视图 | |
| initialDate | new Date() | 初始日期 | 默认当前日期 |
年月日
年月日的初始化效果如图
页面代码同样需要引入bootstrap-datetimepicker所需的css及js文件，这里不再列举了
<inputtype="text"class="form-control"id="datetimepicker-demo-3"placeholder="yyyy-MM-dd">
时间控件初始化代码 其中个人测试的 minView: 2 或者 minView: "month" 都可以达到效果
$(function(){ $("#datetimepicker-demo-3").datetimepicker({ format: "yyyy-mm-dd", minView: 2, //minView: "month",autoclose: true }); });
基于以上操作的话，对于bootstrap-datetimepicker其他日期格式的设置参照上面的参数说明表就可以配置出来了。
