页面表单查询时,常要求要查询一个日期时间段内的数据,若采用bootstrap框架的datetimepicker插件来控制,需要了解怎么个用法:
引入js文件
1 jQuery.min.js 2 bootstrap.min.js 3 bootstrap-datetimepicker.min.js
html代码
1 <input class="input-medium search-query" name="createDatetime_start" value="${createDatetime_start}" type="text" class="form-control" style="150px" id="datetimepicker_start" data-date-format="yyyy-mm-dd hh:ii:ss" readonly/> 2 ~ <input class="input-medium search-query" name="createDatetime_end" value="${createDatetime_end}" type="text" class="form-control" style="150px" id="datetimepicker_end" data-date-format="yyyy-mm-dd hh:ii:ss" readonly/>
jQuery代码
1 $('#datetimepicker_start').datetimepicker({ 2 weekStart: 1, 3 todayBtn: 1, 4 autoclose: 1, 5 todayHighlight: 1, 6 minView:0, 7 forceParse: 1, 8 showMeridian: 0 9 }); 10 11 $('#datetimepicker_end').datetimepicker({ 12 weekStart : 1, 13 todayBtn : 1, 14 autoclose : 1, 15 todayHighlight : 1, 16 minView : 0, 17 forceParse : 1, 18 showMeridian : 0 19 }); 20 21 function getLocalTime(nS) { //转换时间戳为格式 yyyy-mm-dd hh:ss:ii 22 return new Date((parseInt(nS) + 60 * 60 * 4) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/[\u4e00-\u9fa5]/g, ""); 23 }; 24 $("#datetimepicker_start").on("changeDate", 25 function(e) { 26 $('#datetimepicker_end').datetimepicker('setStartDate', 27 getLocalTime(e.date.valueOf() / 1000)); 28 }); 29 $("#datetimepicker_end").on("changeDate", 30 function(e) { 31 $('#datetimepicker_start').datetimepicker('setEndDate', 32 getLocalTime(e.date.valueOf() / 1000)); 33 });
以上只是在使用过程中的处理,有不妥之处,望留言,共同讨论,O(∩_∩)O谢谢...