bootstrap之datetimepicker

简介需引入的控件日期联动

简介

DateTimepicker 是一个基于 jQuery UI 的日期和时间选择的插件。 注意：bootstrap的所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery。请访问 bower.json 查看 Bootstrap 当前支持的 jQuery 版本。

需引入的控件

jquery.js 或 jquery-2.1.1.min.jsbootstrap.js （注意：jquery引入在页面的位置需在boostrap之上）bootstrap-datetimepicker.jsbootstrap-datetimepicker.zh-CN.jsbootstrap-datetimepicker.min.cssbootstrap.css

日期联动

jsp代码：

<tr> <td style="text-align: right;" width="10%">创建时间：</td> <td colspan="2"> <div class="input-append date time" id="datetimepicker3" > <input style="width: 130px;" name="createTimeBegin" id="createTimeBegin" type="text" value="${page.param.createTimeBegin}"/> <span class="add-on" style="height: 28px;"><i class="icon-th"></i></span> </div>- <div class="input-append date time" id="datetimepicker4" > <input style="width: 130px;" name="createTimeEnd" id="createTimeEnd" type="text" value="${page.param.createTimeEnd}"/> <span class="add-on" style="height: 28px;"><i class="icon-th"></i></span> </div> <span style="font-size:small;color:blue">(支持最长31天内)</span> </td> </tr>

js代码：

<script type="text/javascript"> //创建时间的开始和结束时间 $('#datetimepicker3').datetimepicker({ language:'zh-CN', format: 'yyyy-mm-dd',//显示格式 todayHighlight: 1,//今天高亮 minView: 2,//设置只显示到月份 startView:2, autoclose: true,//选择后自动关闭 clearBtn:true,//清除按钮 endDate : new Date() }).on('changeDate',function(e){ var startTime = e.date; $('#datetimepicker4').datetimepicker('setStartDate',startTime); var month = startTime.getMonth(); var year = startTime.getFullYear(); if(month == 11){ month = 0; year = year +1; }else{ month = month + 1; } startTime.setMonth(month); startTime.setYear(year); $('#datetimepicker4').datetimepicker('setEndDate',startTime); }); //结束时间： $('#datetimepicker4').datetimepicker({ language:'zh-CN', format: 'yyyy-mm-dd', minView: 2, startView:2, autoclose: true, clearBtn:true }).on('changeDate',function(e){ var endTime = e.date; $('#datetimepicker3').datetimepicker('setEndDate',endTime); var month = startTime.getMonth(); var year = startTime.getFullYear(); if(month == 0){ month = 12; year = year -1; }else{ month = month -1; } endTime.setMonth(month); endTime.setYear(year); $('#datetimepicker3').datetimepicker('setStartDate',endTime); }); </script>