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谢谢...