bootstrap-datetimepicker设置时分

bootstrap-datetimepicker设置时分

• 需求背景
• • 时分
  • 年月日

需求背景

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

那么下面就开始查找相关的时间控件插件，这里示例图中用到的是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>

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

  });

});

其中相关参数说明如下

年月日

年月日的初始化效果如图

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

<input type="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其他日期格式的设置参照上面的参数说明表就可以配置出来了。