我有一个带有多个日期选择器的html模板。如果我单击按钮打开一个日期选择器,然后单击另一个按钮打开新时间选择器,则第一个日期选择器保持不变(不关闭)。我希望一次只能打开一个日期选择器。
这是一个JsFiddle演示
$('#datetimepicker1, #datetimepicker2').datetimepicker();
这是引导日期时间选择器2.5在使用矩2.5时的标准行为,但现在它似乎不是那样工作的。
有人想办法解决这个问题吗?
注意:我使用的是Eonasdan引导-日期时间选择器版本3.0.3和矩2.8 (按地区设置的矩)、jQuery 1.9和引导带3。
这里的棘手之处在于,引导日期时间选择器为<body>
附加了一个与其触发器按钮完全无关的初始化日期选择器的<div>
。
发布于 2014-10-03 09:40:50
虽然乔尔·卢布拉诺的回答和预装的小部件一样有效.它缺乏使用动态生成的(通过JS)的可能性。同时,我还设法从组件内部解决了这个问题,通过添加一行解决了这两个问题。
在组件的JS中定位picker.show
函数(根据版本(在V1.3.1中),在第1150行前后).在该函数的最后一个the语句中,放置以下行作为该语句的第一条指令。
$('.picker-open').hide().removeClass('picker-open');
仅此而已。之后,您只需要将DTP初始化封装在一个函数中,并在document和动态生成的小部件上调用它。
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容器中。
发布于 2014-09-22 17:14:57
试试这个:
$('.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.
});
});
});
这应该允许每次只打开一个日期选择器。
https://stackoverflow.com/questions/25978820
复制相似问题