bootstrap日历插件的使用
1、插件引用
<!-- bootstrap时间插件css -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="../bootstrap/css/bootstrap-datetimepicker.min.css">
<!-- bootstrap时间插件 -->
<script type="text/javascript" src="../bootstrap/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
2、html代码
1、插件引用
<!-- bootstrap时间插件css -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="../bootstrap/css/bootstrap-datetimepicker.min.css">
<!-- bootstrap时间插件 -->
<script type="text/javascript" src="../bootstrap/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
2、html代码
<label>开始日期:</label><input id="startDate" class="form-control" size="16" type="text" placeholder="请输入开始日期" readonly class="form_datetime">
<label>结束日期:</label><input id="endDate" class="form-control" size="16" type="text" placeholder="请输入结束日期" readonly class="form_datetime">
3、js代码
/**
* 初始化日期插件
*/
datePicker:function(){
// 初始开始时间
$('#startDate').datetimepicker({
language : 'zh-CN',
//startDate: new Date(),能被选择的开始时间
endDate: new Date(),
autoclose: true, //选择完成后自动关闭
todayBtn: true, //显示今天按钮
//weekStart: 1, //周的开始时间默认0周日
minView :2, //时间选择视图【0:小时,1:天,2:月,3:年,4:十年】
format : 'yyyy-mm-dd'
});
// 初始化结束时间
$('#endDate').datetimepicker({
language : 'zh-CN',
endDate: new Date(),
//startDate: new Date(),
autoclose: true,
todayBtn: true,
//weekStart: 1,
minView :2,
format : 'yyyy-mm-dd'
});
$('#startDate').unbind("change");
$('#startDate').change(function() {
$('#endDate').datetimepicker('setStartDate', $("#startDate").val());
});
$('#endDate').unbind("change");
$('#endDate').change(function() {
$('#startDate').datetimepicker('setEndDate', $("#endDate").val());
});
},