bootstrap-datetimepicker 时间日历控件的使用

1.必须引入bs和query

<script src=”https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js”></script>
<link href=”https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>

2.引入bootstrap-datetimepicker的css已经js 其中moment-with-locales-zh-cn.min.js是语言包(只有中文)

<link href=”bootstrap-datetimepicker.min.css” rel=”stylesheet”>
<script src=”moment-with-locales-zh-cn.min.js”></script>
<script src=”bootstrap-datetimepicker.min.js”></script>

3.html代码部分

<div class=”row”>
<div class=”col-sm-6″>
<div class=”form-group”>
<label for=””>选择日期:</label>
<div class=”input-group date” id=’date1′>
<input type=”text” class=”form-control”>
<span class=”input-group-addon”>
<i class=”glyphicon glyphicon-calendar”></i>
</span>
</div>
</div>
</div>
</div>

4.js代码部分

$(function () {
$(‘#date1′).datetimepicker({
format: ‘YYYY-MM-DD HH:mm:ss’,
locale: moment.locale(‘zh-cn’)
});
});

5.小结
format: ‘YYYY-MM-DD HH:mm:ss’ 这一块 如果不想显示时间,可以直接改成YYYY-MM-DD,如果时间只要12小时制度可以改成 YYYY-MM-DD hh:mm:ss

bootstrap-datetimepicker源码

Comments are closed.

Post Navigation