与同一页面上的两个 jquery 日期选择器冲突
Posted
技术标签:
【中文标题】与同一页面上的两个 jquery 日期选择器冲突【英文标题】：Conflict with two jquery datepickers on same page 【发布时间】：2013-04-16 16:27:23 【问题描述】：所以这里是设置： 我有两个 jquery 日期选择器，在 jquery 选项卡内，在 jquery 模态对话框窗口内：
\---/\---/\---/_______________
/ /
\ \
/ DATEPICKER1 /
\ \
/ DATEPICKER2 /
\ \
/ /
\ \
/____________________________/
第一个日期选择器正常运行，但是当我尝试单击第二个日期选择器中的日期时，它只会激活第一个日期选择器。你遵循了吗？ :)
总而言之，点击 datepicker2 中的日期会激活 datepicker1。
我不知道为什么会这样 - 它们有不同的 ID 和名称，如下所述。
创建我正在使用的日期选择器：
$(function()
$("#datepicker1").datepicker();
$("#datepicker2").datepicker();
);
字段很简单：
<input type="text" id="datepicker1" name="datepicker1" value="" />
<input type="text" id="datepicker2" name="datepicker2" value="" />
我正在使用 jQuery v1.9.0 和 jQueryui v1.10.0。
对此有什么想法吗？需要注意的是，由于雇主的限制，我无法发布实际代码，但如果您需要任何澄清，我可以回答大多数问题。任何和所有的帮助将不胜感激！
【问题讨论】：
+1 表示 ASCII 艺术。 你能不能把$("#datepicker2").datepicker();去掉，看看是怎么回事，datepicker2是否仍然触发datepicker
检查您是否正在编写代码副本......这不应该发生......:)
它应该可以正常工作：jsfiddle.net/DpmeB
作为 jquery 1.9.1 的补充说明，因为修复了很多错误
【参考方案1】：
更新： 看起来下面描述的行为已在此处的另一个 *** 问题中得到解决：Prevent jQuery UI dialog from setting focus to first textbox
为“重复”问题道歉 - 如果我知道这是问题，我会很快解决的！！！
############################################## #################################
好吧，解决方法很简单，也许有人可以告诉我为什么它会这样工作，因为我现在有点无能为力。
这就是我所做的： 我在表单中添加了另外两个文本输入字段（它们是必需的）并重新排序布局，以便其中一个新输入字段是“第一个”元素（在左上角），如下所示：
\---/\---/\---/_______________
/ /
\ \
/ TEXTFIELD1 DATEPICKER1 /
\ \
/ TEXTFIELD2 DATEPICKER2 /
\ \
/ /
\ \
/____________________________/
问题突然消失了！但是，我注意到一个有趣的行为： 当我在任一日期选择器中选择一个日期时，光标会立即跳回第一个文本字段。 因此，如果在我的日期选择器没有文本字段时发生这种情况，则该行为将意味着光标会立即跳回第一个日期选择器，这可能会导致我遇到的问题。
现在，至于为什么它会这样工作，我不知道。我尝试为各种文本字段/日期选择器设置 tabindex 参数，但这并没有改变行为。
无论如何，我很感谢所有参与进来的人的意见 - 这是一个奇怪的问题，但我永远不会忘记现在如何解决它。谢谢大家的帮助！！
【讨论】：
感谢您找到解决方案并分享它，我面临着完全相同的问题。尽管难以置信，但我可以验证 jQuery 1.9.1 和 jquery-ui 1.10.0 是否会发生这种情况。我认为重现该问题的主要细节是在对话框中有两个日期选择器（在我的情况下为模态） 您的链接帮助了我。谢谢。试图在 2 个字段上连接日期选择器，但 fieldA 上有一个“自动对焦”。如果我没有单击另一个字段，则 fieldA 上的日期选择器不会显示。删除“自动对焦”后，每个字段上的日期选择器都可以正常工作。【参考方案2】：试试这个朋友： 在你的 JS 中
$(function()
$( "#from" ).datepicker(
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate )
$( "#to" ).datepicker( "option", "minDate", selectedDate );
);
$( "#to" ).datepicker(
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate )
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
);
);
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/> <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
Start date: <input type="text" id="from" name="from">
End date: <input type="text" id="to" name = "to">在您的输入中
开始日期：输入 type="text" id="from" name="from"
结束日期：输入 type="text" id="to" name = "to"
这对我有用:)
作者：MacElie M.
【讨论】：
【参考方案3】：我认为您有另一个干扰 javascript 的代码 这个：http://jsfiddle.net/fMD62/
完美运行（使用 jquery 1.9.1 和 jqueryui 1.9.2
可以试试
$(function()
$("#datepicker1,#datepicker2").datepicker();
);
【讨论】：
感谢您的回复 - 遗憾的是它没有工作。但是，我确实同意一定有一些东西会干扰 jquery。我仍在寻找代码试图找到冲突。【参考方案4】：这完全是在黑暗中拍摄的，但您是否尝试过分别初始化每一个？类似于以下内容
$(function()
$('.datepicker').each(function()
$(this).datepicker();
);
);
这可能是其他人提到的，您的代码遇到了某种形式的干扰，但值得一试。
【讨论】：
只要 ID 相同，这将不起作用，尽管在我的情况下，我得到了差异 ID，所以它对我有用。谢谢你 - 有同样问题的随机编码器。 你救了我的命 :)【参考方案5】：在您的示例中，两个日期选择器都有不同的 ID 和名称，但是，您描述的问题正是如果您对两者使用相同的名称会发生什么。
您的实际代码是否对两个日期选择器使用不同的 id 和名称？
【讨论】：
两个字段都有不同的名称/ID，我什至已经确保它们使用不同的 CSS 类（我知道这不重要，但我只是在尝试任何东西我能想到这一点）。【参考方案6】：案例 1：
@antony 的评论（包括问题下方的 jsfiddle 链接）适用于
版本jquery-1.9.1 和1.9.2/jquery-ui.js
案例 2：
OP 的情况，其中 datepicker1 运行良好但选择 datepicker2 将打开 datepicker1
版本：jQuery v1.9.0 和 jQueryui v1.10.0
案例 3：
我的情况选择 datepicker1 效果很好，但选择 datepicker2 没有任何效果。
版本：jquery-3.1.1.min.js 和 jQueryui v1.12.1
案例3解决方案：
首先初始化 date1 $('date1').datepicker() date1 将起作用
对于date2，先销毁date1，再初始化date2
$('date1').datepicker('destroy');
$('date2').datepicker();
现在对于 date1，销毁 date2 并初始化 date1。
【讨论】：
【参考方案7】：尝试将 JQuery UI Dialog 的内容放入 IFrame。这可能会帮助您解决一些问题。
\---/\---/\---/_______________
/ /
\ ####IFRAME###### \
\ # # \
/ #DATEPICKER1 # /
\ # # \
/ #DATEPICKER2 # /
\ # # \
/ ################ /
\ \
/____________________________/
【讨论】：
我一般倾向于避免使用 iframe，对于这个特定页面，我根本不允许使用它们（安全问题）。【参考方案8】：问题说明
我有同样的问题，非常令人失望。 我翻遍了jquery的源码，发现是这样的：
if ( $.ui.dialog.overlayInstances )
this._on( this.document,
focusin: function( event )
if ( !$( event.target ).closest(".ui-dialog").length )
event.preventDefault();
$(".ui-dialog:visible:last .ui-dialog-content")
.data("ui-dialog")._focusTabbable();
);
因此，当您在不在.ui-dialog 内的元素中设置焦点时，它将触发_focusTabbable() 函数，该函数将焦点设置为对话框中的第一个输入。
问题是，$.datepicker 在 body 的末尾创建了 div - 所以它在 .ui-dialog 之外
如果有另一个输入 _focusTabbable() 将给予焦点，因为 datepicker 可以处理。但如果此输入绑定了日期选择器，它将关闭前一个日期选择器，在第一个输入上打开另一个，并且不会触发前一个日期选择器上的选择。
一种可能的解决方案
在这种情况下，解决方案是有输入，它将首先在对话框中获得焦点，并且没有日期选择器。
我只是将此 html 代码用作对话框内容开头的第一个输入，否则 datepicker 输入将放在首位：
<span class="ui-helper-hidden-accessible"><input type="text" /></span>
【讨论】：
【参考方案9】：作为前言，我是一名后端数据库程序员，所以对 JavaScript 知之甚少，所以希望找到这篇带有完全相同问题的帖子。从我上面阅读的内容中收集并与我现有的代码进行比较，我修改了我的 JavaScript 以便它可以工作，并认为我会分享它。
唯一需要注意的是，我现有的带有单个日期选择器的表单不再起作用，所以我不得不添加一些来处理这些，现在一切看起来都很好。在这种情况下，数据库字段实际上是一个 Unix 时间戳，因此表单在提交时会根据需要转换两个字段，但为了清楚起见，我没有在此处包含该代码。
$(document).ready(function()
$( "#StartDate" ).datepicker(
altField: '#datepicker',
altFormat: 'yy-mm-dd',
dateFormat: 'D M d, yy',
firstDay: 1,
onClose: function( selectedDate )
$( "#StartDate" ).datepicker( "option", "minDate", selectedDate );
);
$( "#EndDate" ).datepicker(
altField: '#datepicker',
altFormat: 'yy-mm-dd',
dateFormat: 'D M d, yy',
firstDay: 1,
onClose: function( selectedDate )
$( "#EndDate" ).datepicker( "option", "maxDate", selectedDate );
);
$( "#datepicker" ).datepicker(
altField: '#datepicker',
altFormat: 'yy-mm-dd',
dateFormat: 'D M d, yy',
firstDay: 1,
onClose: function( selectedDate )
$( "#datepicker" ).datepicker( "option", "maxDate", selectedDate );
);
);
【讨论】：
【参考方案10】：在 js 存档中：
$("#fecha_1").datepicker(
dateFormat: "dd/mm/yy",
dayNames: "Domingo Lunes Martes Miercoles Jueves Viernes Sabado".split(" "),
dayNamesMin: "Do Lu Ma Mi Ju Vi Sa".split(" "),
dayNamesShort: "Do Lu Ma Mi Ju Vi Sa".split(" "),
monthNames: "Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre".split(" "),
monthNamesShort: "Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic".split(" "),
prevText: "Ant",
nextText: "Sig",
currentText: "Hoy",
changeMonth: !0,
changeYear: !0,
showAnim: "slideDown",
yearRange: "1900:2100"
);
$("#fecha_2").datepicker(
dateFormat: "dd/mm/yy",
dayNames: "Domingo Lunes Martes Miercoles Jueves Viernes Sabado".split(" "),
dayNamesMin: "Do Lu Ma Mi Ju Vi Sa".split(" "),
dayNamesShort: "Do Lu Ma Mi Ju Vi Sa".split(" "),
monthNames: "Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre".split(" "),
monthNamesShort: "Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic".split(" "),
prevText: "Ant",
nextText: "Sig",
currentText: "Hoy",
changeMonth: !0,
changeYear: !0,
showAnim: "slideDown",
yearRange: "1900:2100"
);
在你的页面：<input type="text" id="fecha_1"><input type="text" id="fecha_2">
【讨论】：
是的，这就是当前的设置方式。我知道我可以为每个日期选择器设置的所有各种参数 - 这不是我的问题。以上是关于与同一页面上的两个 jquery 日期选择器冲突的主要内容，如果未能解决你的问题，请参考以下文章
为啥 jQuery UI 的日期选择器会与动态 DOM 发生冲突？