zoukankan      html  css  js  c++  java
  • bootstrap-datepicker限定可选时间范围

    一、应用场景

    实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制,

    如:开始时间不能大于结束时间,结束时间不能小于开始时间,此时就要为开始日期选择器和结束日期选择器动态的设置startDate和endDate的值。

    二、相关知识点

    1、bootstrap-datepicker的初始化

    引入bootstrap-datepicker.js和bootstrap-datepicker.css

    bootstrap-datepicker配置参数的了解

    2、boostrap-datepicker的changeDate事件:日期改变时触发

    3、bootstrap-datepicker的setEndDate和setStartDate方法

    4、详细配置参见官方文档http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html

    三、应用实例

    1、JSP中,声明日期选择器

    1. <span style="font-size:14px;"><div class="col-md-6 cy-text-right-md">
    2. <div class="form-inline">
    3. <div class="form-group cy-mar-ver-s">
    4. <span class="cy-pad-hor-s">最后接入时间</span>
    5. </div>
    6. <div class="input-daterange input-group" id="datepicker">
    7. <input type="text" class="form-control" name="start" id="qBeginTime" />
    8. <span class="input-group-addon">至</span>
    9. <input type="text" class="form-control" name="end" id="qEndTime" />
    10. </div>
    11. <div class="form-group cy-mar-ver-s">
    12. <button class="btn btn-primary cy-pad-rgt-s" οnclick="javascript:doQuery();" type="button">搜索</button>
    13. </div>
    14. </div>
    15. </div></span>

    2、JS中,对日期选择器进行初始化和配置

    1. <span style="font-size:14px;"> //开始时间:
    2. $('#qBeginTime').datepicker({
    3. todayBtn : "linked",
    4. autoclose : true,
    5. todayHighlight : true,
    6. endDate : new Date()
    7. }).on('changeDate',function(e){
    8. var startTime = e.date;
    9. $('#qEndTime').datepicker('setStartDate',startTime);
    10. });
    11. //结束时间:
    12. $('#qEndTime').datepicker({
    13. todayBtn : "linked",
    14. autoclose : true,
    15. todayHighlight : true,
    16. endDate : new Date()
    17. }).on('changeDate',function(e){
    18. var endTime = e.date;
    19. $('#qBeginTime').datepicker('setEndDate',endTime);
    20. });</span>
  • 相关阅读:
    「CF1051F」The Shortest Statement
    「CF911F」Tree Destruction
    「HNOI/AHOI2018」游戏
    「CF859E」Desk Disorder
    「CF858F」 Wizard's Tour
    「CF894E」 Ralph and Mushrooms
    「NOIP2018」赛道修建
    「POI2010」Bridges
    常见神经网络
    数字图像处理笔记2.22
  • 原文地址:https://www.cnblogs.com/zhuyeshen/p/11983472.html
Copyright © 2011-2022 走看看