0

我的目标是让引导日期选择器https://atmospherejs.com/package/bootstrap3-datepicker在引导下拉列表中内联。我发现这是我想要做的最巧妙的用户体验。

在升级到 0.8 之前我让它工作得很好，但现在只要选择一个日期，下拉菜单就会隐藏。我不希望它隐藏，因为我在下拉菜单中有一个按钮来保存日期选择。除此之外，现在我无法在单击时将任何内容写入控制台。我已经尝试在我能想到的日期选择器的各个方面设置点击事件。如果您单击月份箭头或日期周围的某处，而不是日期本身，则会触发下面的“单击”测试。

任何帮助将不胜感激。我正在发展一种不健康的痴迷。

这就是我所拥有的工作。

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);
    });
4

2 回答 2

0

我没有给你一个完整的答案，但因为已经 2 天了，我认为一些帮助可能总比没有好。

我发现 datepicker 响应了 change 事件：

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

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

它有比标准下拉菜单更丰富的 API，包括 show() 和 hide() 方法。

希望有帮助。

于 2014-05-04T01:33:05.603 回答
0

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

我最终点击了下拉隐藏事件并阻止了这样的默认值：

$('.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');
        }

    })
})
于 2014-05-05T05:13:48.893 回答