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

  • 相关阅读:
    【Selenium】selenium中隐藏元素如何定位?
    【Mock】【接口测试】【面试】mock-server 环境搭建—加分项!
    【Mock】mock基础、简单的单元测试代码练习。
    【WebDriver】WebDriver 常用操作
    【Loadrunner】Loadrnner 参数化策略
    ES6系列_11之Set和WeakSet数据结构
    ES6系列_10之Symbol在对象中的作用
    ES6系列_9之对象
    ES6系列_8之函数和数组
    ES6系列_7之箭头函数和扩展
  • 原文地址:https://www.cnblogs.com/wjqblogs/p/4043198.html
Copyright © 2011-2022 走看看