bootstrap:时间选择器datetimepicker调用
2017-05-17 21:00
597 查看
bootstrap-datetimepicker下载地址 http://www.bootcss.com/p/bootstrap-datetimepicker/
在index.html文件里有三种不同类型选择器,选择格式分别为xxxx-xx-xx xx:xx(年月日时间)和xxxx-xx-xx(年月日)以及xx:xx(时间)
以第一种时间选择器为例:
<div class="form-group">
<label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
<div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
input type="hidden" id="dtp_input1" value="" /><br/>
</div>
调用方法:两个方面都要做到
(1)使用datetimepicker方法
$('.form_datetime').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
上述选项(如weekStart)使用说明地址在 http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 选项导航下
(2)引入必要文件
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
一定注意的是:上述要引用的文件要放在引用的jquery文件后才可以,否则很可能会引起选择器弹不出来的情况
举一个实际开发中引用顺序:
在index.html文件里有三种不同类型选择器,选择格式分别为xxxx-xx-xx xx:xx(年月日时间)和xxxx-xx-xx(年月日)以及xx:xx(时间)
以第一种时间选择器为例:
<div class="form-group">
<label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
<div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
input type="hidden" id="dtp_input1" value="" /><br/>
</div>
调用方法:两个方面都要做到
(1)使用datetimepicker方法
$('.form_datetime').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
上述选项(如weekStart)使用说明地址在 http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 选项导航下
(2)引入必要文件
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
一定注意的是:上述要引用的文件要放在引用的jquery文件后才可以,否则很可能会引起选择器弹不出来的情况
举一个实际开发中引用顺序:
<script src="../bootstrap/js/jquery-1.10.2.js">& 4000 lt;/script>(任意版本jquey好像不影响调取结果) <!-- BOOTSTRAP SCRIPTS --> <script src="../bootstrap/js/bootstrap.js"></script> <!-- CUSTOM SCRIPTS --> <script src="../bootstrap/js/custom.js"></script> <script src="../bootstrap/bootstrap-datetimepicker.js"></script>(必要文件) <script src="../bootstrap/bootstrap-datetimepicker.fr.js"></script>(必要文件) <script type="text/javascript">(datetimepicker方法) $('.form_datetime').datetimepicker({ //language: 'fr', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, showMeridian: 1, format:'yyyy-mm-dd hh:00:00' }); </script>
相关文章推荐
- Bootstrap datetimepicker “dp.change” 时间/日期 选择事件
- Bootstrap3 日期+时间选择控件 datetimepicker的使用方法说明
- bootstrap-datetimepicker 时间选择
- Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
- bootstrap-datetimepicker出现时间选择时年份显示1899年的异常
- Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
- Bootstrap的日期选择插件DateTime Picker增强版
- DateTimePicker 只选择时间和上下调整时间。
- Angularjs与bootstrap.datetimepicker结合实现日期选择器
- bootstrap datetimepicker 插件怎样获取时间值
- angularjs封装bootstrap时间插件datetimepicker
- 使用 DateTimePicker 控件显示和选择时间
- bootstrap datetimepicker 时间段选择限制
- DateTimePicker 选择时间 进行查询,用到的日期格式[格式转自网上]
- winform dateTimePicker选择时间控件-选择小时、分钟、秒
- bootstrap datetimepicker添加秒钟选择下拉框
- Bootstrap 3时间控件datetimepicker的时区及多语言问题
- bootstrap-datetimepicker 时间控件位置问题
- bootstrap datetimepicker 时间控件的使用
- angular ui-bootstrap datepicker第二次点击没有显示时间选择 解决方案