bootstrap时间控件--时间选择器

对应上面的三个时间选择器，写法如下：

首先引入css和js：

 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

然后html部分：

 <div class="row"><div class='col-sm-6'><div class="form-group"><label>选择开始时间：</label><!--指定 date标记--><div class='input-group date' id='datetimepicker1'><input type='text' class="form-control" /><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div></div><div class='col-sm-6'><div class="form-group"><label>选择结束时间：</label><!--指定 date标记--><div class='input-group date' id='datetimepicker2'><input type='text' class="form-control" /><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div></div><div class='col-sm-6'><div class="form-group"><label>选择结束时间：</label><!--指定 date标记--><div class='input-group date' id='datetimepicker3'><input type='text' class="form-control" /><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div></div></div>

最后js部分：

    $('#datetimepicker1').datetimepicker({format: 'YYYY-MM-DD',locale: moment.locale('zh-cn'),defaultDate: "1990-1-1"});$(function () {$('#datetimepicker1').datetimepicker({format: 'YYYY-MM-DD',locale: moment.locale('zh-cn')});$('#datetimepicker2').datetimepicker({format: 'HH:mm',locale: moment.locale('zh-cn')});$('#datetimepicker3').datetimepicker({format: 'YYYY-MM-DD HH:mm',locale: moment.locale('zh-tw')});
});

解释：

format

日期格式

YYYY-MM-DD：2019-01-10

HH:mm24小时格式

hh:mm12小时格式

YYYY-MM-DD HH:mm 比如：2019-01-01 23：59

HH:mm:ss 带秒数的24小时格式

locale

时间地区

zh-cn是中国

参考：http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201806095166.html

bootstrap时间控件--时间选择器相关推荐

bootstrap-datetimepicker时间控件
bootstrap-datetimepicker时间控件使用layui的laydate时间控件无法很好地嵌入到bootstap布局中(具体参考日期和时间组件文档 - layui.laydate),因 ...
HTML5超简单的日期时间控件
HTML5超简单的日期时间控件时间都是宝贵的,尤其是开发人员,所以为了节省时间,我直接展示下效果,符合您的要求就采纳,不符合,就不用继续看了! 1.1 日期控件效果: 1.2 时间控件展示: 2.1 ...
bootstrap日期时间控件
datetime控件 Bootstrap的日期时间控件,使用非常的简单. 首先,添加日期时间控件的引用 @*datetime控件*@<link href="~/Content/Boot ...
angularjs 整合bootstrap 时间控件
一.引入js <link href="${basePath}/static/plugin/bootstrap/css/bootstrap-datetimepicker.min.css& ...
一款好用的时间控件（时间选择器）-jeDate
一款好用的时间控件(时间选择器)-jeDate 1.引入jedate.js: 2.上代码 1>方法一 <input class="datainp" id="d ...
bootstrap 时间控件
最近使用了bootstrap的UI感觉确实很漂亮,非常值得学习和使用.下面先简单了解下bootstrap的时间控件. 这个时间控件使用起来还是非常的简单,只需要引入基本的css和js就可以了需要引入 ...
layui 日期范围选择器_layui时间控件选择时间范围的实现方法
解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择共有两种解决方式: 方式一(layui 1.x): html代码: placeholder="开始时间(修改时间)&qu ...
轻量级的日期时间控件Pikaday
今天看到一个网友分享的一篇文章,有关轻量级的日期时间控件Pikaday,感觉很实用.在这里总结一下,方便日后使用.因为之前也遇到过类似的问题,My97datepicker插件样式过于老旧,但又没有其它 ...
jqGrid中时间控件input的值赋给点开后的laydate控件
可以看到上课时间的值是8点-10点点击时间控件选择时间时,时间控件不会根据已有的时间数据显示默认值,而是显示当前时间? Q:为什么会显示当前时间,怎么解决这个问题? A: 代码如下: getTime ...

bootstrap时间控件--时间选择器

bootstrap时间控件--时间选择器相关推荐

最新文章

热门文章