Question

我的目标是让bootstrap datepicker https://atmospherejs.com/package/bootstrap3-datepicker内联到bootstrap下拉列表中。我发现这对于我想要做的事情来说是最贴心的。

我升级到0.8之前工作得很好，但现在每当选择日期时，下拉隐藏。我不希望它隐藏，因为我在下拉列表中有一个按钮来保存日期选择。除此之外，现在我无法通过点击向控制台写任何内容。我已经尝试在我能想到的日期选择器的每个方面设置点击事件。点击＆＃39;点击＆＃39;如果您点击月份箭头或日期周围某处，而不是日期本身，则会触发以下测试。

非常感谢任何帮助。我正在发展一种不健康的痴迷。

这就是我的工作。

HTML

              <div class="btn-group form-control-static field no-print">
                <div class="dropdown-toggle" data-toggle="dropdown" style="" title="Schedule New Call">
                    <a><i class="fa fa-calendar"></i> Schedule New Call</a>
                </div>
                <ul class="dropdown-menu">
                    <li class="picker-wrapper">
                        <div class="schedule-calls-day-picker"></div>
                        <input id="schedule-calls-day-holder" type="hidden" value="{{date}}">
                        <div class="schedule-calls-time-picker">
                            <div class="col-lg-3">
                                <i class="fa fa-clock-o fa-2x"></i>
                            </div>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" id="schedule-calls-time-input" value='{{time}}'>    
                            </div>
                        </div>
                        <div class="btn-group col-lg-12" style="margin-top:5px;">
                            <div class="btn btn-primary col-lg-12 set-schedule-calls">Schedule Call</div>
                        </div>
                    </li>
                </ul>
            </div>

模板活动

  'click .picker-wrapper' : function (e) {
        console.log('clicked');
        e.stopPropagation();    
    }

Template.rendered

$('.schedule-calls-day-picker').datepicker()
    .on('changeDate', function(e){
        var tryDate = moment(e.date).format("YYYY-MM-DD")
        $('#schedule-calls-day-holder').val(tryDate);
    });

Answer 1

我没有为你提供完整的答案，但由于已经过了2天，我认为一些帮助可能比没有好。

我发现datepicker响应了更改事件：

 'change #my-datepicker': function(e){
    e.stopPropagation();
    console.log('clicked');
}

我确实遇到了父下拉消失的问题，我无法解决这个问题。也许考虑使用 http://silviomoreto.github.io/bootstrap-select/

它拥有比标准下拉列表更丰富的API，包括show（）和hide（）方法。

希望有所帮助。

Answer 2

这是我暂时的解决方法。它有效，但并不完美。

我最终点击了下拉隐藏事件并阻止默认，如下所示：

$('.schedule-dropdown').on('hide.bs.dropdown', function (e) {
    e.preventDefault();     
})

成功停止了下拉消失，但现在问题是它从未消失。所以我只是采取了简单的方法并添加了一个取消按钮，并将其与提交按钮相关联，以便手动关闭它：

$('.schedule-dropdown').removeClass('open');

这是我现在所拥有的最好的。如果用户点击屏幕上的任何其他位置，能够关闭它会很好，但它现在并不重要。

修改

如果用户点击其他任何地方，可以进一步解决此问题：

$('.schedule-dropdown').on('hide.bs.dropdown', function (e,t) {     
    e.preventDefault();         
}).on('show.bs.dropdown', function (e,t) {
    var ct = e.currentTarget;
    $('body').click(function(e) {
        var clicked = e.target;
        if($(clicked).hasClass('day')||$(clicked).hasClass('month')||$(clicked).hasClass('year')){
            //do nothing, they selected a date element
        } else {
            console.log('remove day');
            $(ct).removeClass("open");
            $('body').off('click');
        }

    })
})

无法阻止引导下拉隐藏在Meteor 0.8中的datepicker

2 个答案: