接上一篇文章,写引用不同的js的时间选择器,参考连接:https://github.com/uxsolutions/bootstrap-datepicker
引入连接为:
<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="locales/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script src="locales/bootstrap.min.js" charset="UTF-8"></script>
<script src="locales/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script src="locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script src="locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
上面引入了bootstrap-datetimepicker.zh-CN.js这个文件,所以在应用datetimepicker的时候必须要写language,
html部分:
<div class="row">
<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>
<script>
$('#datetimepicker3').datetimepicker({
language: 'zh-CN',
});
</script>
下面解释一下可以添加的各个参数的意思,
language | 语言 | 必须引用语言的js,比如bootstrap-datetimepicker.zh-CN.js |
weekStart | 时间选择器的周,从哪天开始 | 0-6,默认0,参考图一 |
format | 日期格式 | p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合 例如:format:'yyyy-mm-dd'或者format:'yyyy/mm/dd' |
todayBtn | 选择当天时间 | true/false,默认fase |
autoclose | 选择一个日期后关闭时间选择器 | true/false,默认false |