zoukankan      html  css  js  c++  java
  • 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="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谢谢...

  • 相关阅读:
    最近遇到的若干Web前端问题:disable和readonly,JqueryEasyUI,KindEditor
    最近遇到的若干Web前端问题:disable和readonly,JqueryEasyUI,KindEditor
    2015年工作中遇到的问题111-120
    2015年工作中遇到的问题111-120
    POJ 1459 Power Network
    POJ 2135 Farm Tour
    HDU 3062 Party
    学渣乱搞系列之网络流学习
    POJ 1094 Sorting It All Out
    HDU 1704 Rank
  • 原文地址:https://www.cnblogs.com/wjqblogs/p/4043198.html
Copyright © 2011-2022 走看看