通过bootstrap-datetimepicker日历控件简单实现日期选择插入
资源下载:
https://download.csdn.net/download/Your_Lie/13216282.
首先引入css和js文件,顺序不能乱
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="dependencies/bootstrap/css/bootstrap.min.css">
<!-- Bootstrap Js -->
<script src="dependencies/bootstrap/js/bootstrap.min.js"></script>
<!-- 日历控件相关 -->
<link href="dependencies/bootstrap/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script src="dependencies/bootstrap/bootstrap-datetimepicker-master/moment-with-locales.js"></script>
<script src="dependencies/bootstrap/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script src="dependencies/bootstrap/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
样式代码:
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input class="form-control" type="text" autocomplete="off" value="" id="departureDate" name="date">
</div>
</div>
JavaScript日历控件配置属性
<script type="text/javascript">
//时间日期选择插件
$("#datetimepicker1").datetimepicker({
language: 'zh-CN', // 语言默认值是'en' ,中文:’zh-CN’
todayHighlight: true, //当天日期高亮
format: 'yyyy-mm-dd', // 日期格式 'yyyy-mm-dd hh:ii'
startView: 2, // 选完时间首先显示的视图 0:从小时视图开始,选分,1:从天视图开始,选小时,2:从月视图开始,选天,3:从年视图开始,选月,4:从十年视图开始,选年
minView: 1, //日期时间选择器所能够提供的最精确的时间选择视图,0:从小时视图开始,选分,1:从天视图开始,选小时,2:从月视图开始,选天,3:从年视图开始,选月,4:从十年视图开始,选年
autoclose: true, //表示选中日期之后关闭
todayBtn: true, //当天时间的按钮,在底部
minView: "month"
});
</script>
####最后效果图: