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源码