bootstrap-datetimepicker设置时分
  • 需求背景
  • 时分
  • 年月日


需求背景

在日常工作中遇到一个业务场景，需要时间控件来选择时分，但是不需要年月日的成分，实现之后的效果如图

bootstrap-datetimepicker设置时分_html


那么下面就开始查找相关的时间控件插件，这里示例图中用到的是bootstrap-datetimepicker时间控件

时分

基于bootstrap-datetimepicker时间控件，我们来看页面代码

<!-- datetimepicker日期和时间插件 -->

<link th:href="@{/ajax/libs/datapicker/bootstrap-datetimepicker.min.css?v=2.4.4}" rel="stylesheet"/>


<input type="text" class="form-control" id="datetimepicker-demo-2" placeholder="hh:ii">


<script th:src="@{/ajax/libs/datapicker/bootstrap-datetimepicker.min.js?v=2.4.4}"></script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

页面需要引入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,

    //当天日期高亮 默认false

    todayHighlight:true,

    //步进值 单位分钟

    minuteStep:60,

    //强制解析，不正确时强制

    forceParse:true,

    language:"zh-cn"

  });

});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.

其中相关参数说明如下

bootstrap-datetimepicker设置时分_初始化_02


bootstrap-datetimepicker设置时分_bootstrap_03

年月日

年月日的初始化效果如图

bootstrap-datetimepicker设置时分_前端_04


页面代码同样需要引入bootstrap-datetimepicker所需的css及js文件，这里不再列举了

<input type="text" class="form-control" id="datetimepicker-demo-3" placeholder="yyyy-MM-dd">
  • 1.

时间控件初始化代码 其中个人测试的 minView: 2 或者 minView: “month” 都可以达到效果

$(function(){

  $("#datetimepicker-demo-3").datetimepicker({

    format: "yyyy-mm-dd",

    minView: 2,

    //minView: "month",

    autoclose: true

  });

});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

基于以上操作的话，对于bootstrap-datetimepicker其他日期格式的设置参照上面的参数说明表就可以配置出来了。