bootstrap框架日期时间 开始日期和结束日期选择

页面表单查询时，常要求要查询一个日期时间段内的数据，若采用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="width: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="width: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谢谢...

 

posted @ 2014-10-22 15:05  wjq1255  阅读(8969)  评论(0)  编辑  收藏  举报