代码之家  ›  专栏  ›  技术社区  ›  Developer

daterangepicker关闭父引导下拉列表

  •  1
  • Developer  · 技术社区  · 7 年前

    我在Bootstrap中有一个带有daterangepicker输入的下拉菜单。

    我有这个密码

    $(document).on('click', 'body .dropdown-menu', function (e) {
        e.stopPropagation();
    });
    
    $('#filter-expired-range').daterangepicker();
    

    当我点击daterangepicker日历日输入时,一切都结束了(daterangepicker日历和下拉菜单)

    更新1。

    html代码:

    <div class="btn-group mea-filters-block">
    <span style="float: left; padding-top: 12px;" class="mea-info"></span>
    <button type="button" class="btn dropdown-toggle btn-filter btn-link" data-toggle="dropdown"
            title="Filter">
        <i class="fa fa-filter"></i></button>
    <ul class="dropdown-menu dropdown-menu-right">
        <form id="docExportFilter">
            <div class="row">
            <div class="col-sm-6" style="border-right: 1px solid #ddd">
    
                <p class="filterslabel"><i
                            class="fa fa-calendar-check-o"></i>
                    <span>Validation date</span>
                </p>
    
                <div class="form-group">
                    <input type="checkbox" class="" name="validDocuments" id="filter-valid">
                    <label for="filter-valid">Valid documents</label>
                </div>
    
                <div class="form-group">
                    <input type="checkbox" class="" name="expired" id="filter-expired">
                    <label for="filter-valid">Expired documents</label>
                </div>
    
                <div class="form-group" id="filter_expired_range_container" style="display: none">
                    <label for="filter-expired">Expired between dates
                        <input style="width: 100%" readonly placeholder="Any" type="text"
                               class="form-control" name="expired_range" id="filter-expired-range">
                    </label>
                </div>
    
    
            </div>
    
    
            <div class="col-sm-6">
                <p class="filterslabel"><i
                            class="icon-checkmark-circle2"></i> <span>Compliance</span>
                </p>
                <div class="form-group">
                    <input type="checkbox" name="compliant" class="" id="filter-compilant">
                    <label for="filter-compilant">Compliant documents</label>
                </div>
                <div class="form-group">
                    <input type="checkbox" name="remedialActionsRequired" class="" id="filter-remedial">
                    <label for="filter-remedial">Remedial required</label>
                </div>
            </div>
                </div>
    
            <div class="row pt-15" style="border-top: 1px solid #ddd">
                <div class="col-sm-12 text-right">
                    <a class="mea-submit btn btn-primary"><i class="fa fa-check"></i>Apply</a>
                    <button class="btn btn-default" type="reset"><i class="fa fa-times"></i> Cancel</button>
    
                </div>
            </div>
    
    
        </form>
    </ul>
    </div>
    

    更新2。 这里有一个最小的例子-我看到问题是requirejs-如果我在没有requirejs的情况下测试它-它可以工作。。。

    requirejs示例(不工作-选择日期关闭父项下拉列表) https://jsfiddle.net/5wtLqxk9/2/

    不带requirejs的示例(工作正常) https://jsfiddle.net/5wtLqxk9/1/

    1 回复  |  直到 5 年前
        1
  •  1
  •   Jørgen    7 年前
       $("div.daterangepicker").click( function(e) {
            e.stopPropagation();
        });
    

    注意:放置在daterangepicker()之后 https://jsfiddle.net/5wtLqxk9/4/

    类似: event bubbling in Jquery datepicker