首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >引导DateTimePicker:每次打开一个日期选择器

引导DateTimePicker:每次打开一个日期选择器
EN

Stack Overflow用户
提问于 2014-09-22 16:28:21
回答 2查看 6.6K关注 0票数 3

我有一个带有多个日期选择器的html模板。如果我单击按钮打开一个日期选择器,然后单击另一个按钮打开新时间选择器,则第一个日期选择器保持不变(不关闭)。我希望一次只能打开一个日期选择器。

这是一个JsFiddle演示

代码语言:javascript
运行
复制
$('#datetimepicker1, #datetimepicker2').datetimepicker();

这是引导日期时间选择器2.5在使用矩2.5时的标准行为,但现在它似乎不是那样工作的。

有人想办法解决这个问题吗?

注意:我使用的是Eonasdan引导-日期时间选择器版本3.0.3和矩2.8 (按地区设置的矩)、jQuery 1.9和引导带3。

这里的棘手之处在于,引导日期时间选择器为<body>附加了一个与其触发器按钮完全无关的初始化日期选择器的<div>

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-10-03 09:40:50

虽然乔尔·卢布拉诺的回答和预装的小部件一样有效.它缺乏使用动态生成的(通过JS)的可能性。同时,我还设法从组件内部解决了这个问题,通过添加一行解决了这两个问题。

在组件的JS中定位picker.show函数(根据版本(在V1.3.1中),在第1150行前后).在该函数的最后一个the语句中,放置以下行作为该语句的第一条指令。

$('.picker-open').hide().removeClass('picker-open');

仅此而已。之后,您只需要将DTP初始化封装在一个函数中,并在document和动态生成的小部件上调用它。

代码语言:javascript
运行
复制
function DTPinit(){
    $('.dtp').datetimepicker();
}

$(function(){
    DTPinit();
    $('#dtp_gen').on('click', function(){
        $('body').append('<div class="form-group"><div class="input-group dtp date""><input type="text" class="form-control datetimepicker" /><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>');
        DTPinit();
    });
});

这里有一个JSFiddle,它说明了我上面描述的内容。为了编辑目的,BS组件被加载到了小提琴JS容器中。

票数 1
EN

Stack Overflow用户

发布于 2014-09-22 17:14:57

试试这个:

代码语言:javascript
运行
复制
$('.date').datetimepicker();
$(document).ready(function() {
    // Select all elements with the 'date' class
    $('.date').on('dp.show', function() {
        $('.date').not($(this)).each(function() {
            $(this).data("DateTimePicker").hide();
            // $('.date').not($(this)) selects all the .date elements except
            // for the one being shown by the datetimepicker dp.show event.
            // The dp.show event is fired when a new datetimepicker is opened.
            // We use the .data("DateTimePicker") to access the datetimepicker object
            // (we have to use a jQuery each loop in order to access all the 
            // datetimepickers.
            // .hide() -- we hide it.
        });
    });
});

这应该允许每次只打开一个日期选择器。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25978820

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档