与同一页面上的两个 jquery 日期选择器发生冲突

Conflict with two jquery datepickers on same page

提问by musicmunky

So here is the setup: I have two jquery datepickers, inside a jquery tab, inside a jquery modal dialog window:

所以这里是设置：我有两个 jquery 日期选择器，在 jquery 选项卡内，在 jquery 模式对话框窗口内：

\---/\---/\---/_______________
/                            /
\                            \
/  DATEPICKER1               /
\                            \
/  DATEPICKER2               /
\                            \
/                            /
\                            \
/____________________________/

The first datepicker functions normally, but when I try to click a date in the second datepicker it simply activates the first one. Did you follow that? :)

第一个日期选择器正常运行，但是当我尝试单击第二个日期选择器中的日期时，它只会激活第一个。你遵循那个了吗？:)

So to sum up, clicking a date in datepicker2 activates datepicker1.

总而言之，单击 datepicker2 中的日期会激活 datepicker1。

I have no idea why this is happening - they have different ids and names, as outlined below.

我不知道为什么会发生这种情况 - 它们具有不同的 ID 和名称，如下所述。

To create the datepickers I'm just using:

要创建我正在使用的日期选择器：

$(function() {
    $("#datepicker1").datepicker();
    $("#datepicker2").datepicker();
});

The fields are simply:

这些字段很简单：

<input type="text" id="datepicker1" name="datepicker1" value="" />
<input type="text" id="datepicker2" name="datepicker2" value="" />

I'm using jQuery v1.9.0 and jQueryui v1.10.0.

我正在使用 jQuery v1.9.0 和 jQueryui v1.10.0。

Any thoughts on this? As a caveat, I am unable to post actual code due to restrictions from my employer, but I can answer most questions if you need any clarification. Any and all help would be greatly appreciated!!

对此有何想法？需要注意的是，由于雇主的限制，我无法发布实际代码，但如果您需要任何说明，我可以回答大多数问题。任何和所有的帮助将不胜感激！

采纳答案by musicmunky

UPDATE:It looks like the behavior described below was addressed in another stackoverflow question here:
Prevent jQuery UI dialog from setting focus to first textbox

更新：看起来下面描述的行为在此处的另一个 stackoverflow 问题中得到解决：
防止 jQuery UI 对话框设置焦点到第一个文本框

Apologies for the "duplicate" question - if I had known this was the problem I would have figured it out quickly!!!

为“重复”问题道歉-如果我知道这是问题所在，我会很快弄清楚的！！！

################################################################################

############################################### #############################

Well, the resolution is very simple, and perhaps someone can enlighten me as to why it works this way because I'm a bit clueless at the moment.

嗯，解决方案非常简单，也许有人可以启发我为什么它会以这种方式工作，因为我现在有点无能为力。

Here's what I did:
I added another two text input fields to the form (they were needed) and reordered the layout so that one of those new input fields was the "first" element (in the top-left corner), like so:

这就是我所做的：
我在表单中添加了另外两个文本输入字段（它们是必需的）并重新排列布局，以便这些新输入字段之一是“第一个”元素（在左上角），如下所示：

\---/\---/\---/_______________
/                            /
\                            \
/  TEXTFIELD1   DATEPICKER1  /
\                            \
/  TEXTFIELD2   DATEPICKER2  /
\                            \
/                            /
\                            \
/____________________________/

Suddenly the problem has vanished! However, I notice an interesting behavior:
When I select a date in EITHER datepicker, the cursor then immediately jumps back to the first text field. So if this were happening when I had the datepickers with no text fields, that behavior would mean that the cursor would immediately have jumped back to the first datepicker which could have cause the issue I was having.

突然问题就消失了！但是，我注意到一个有趣的行为：
当我在 EITHER 日期选择器中选择一个日期时，光标会立即跳回到第一个文本字段。因此，如果在我使用没有文本字段的日期选择器时发生这种情况，则该行为将意味着光标将立即跳回到第一个日期选择器，这可能会导致我遇到的问题。

Now, as to WHY it works this way I have no idea. I tried setting the tabindex parameters for the various textfields/datepickers but that didn't change the behavior.

现在，至于为什么它以这种方式工作，我不知道。我尝试为各种文本字段/日期选择器设置 tabindex 参数，但这并没有改变行为。

Anyway, I appreciate the input from everyone who chimed in - this was a weird problem, but I'll never forget how to fix it now. Thanks everyone for your help!!

无论如何，我感谢所有参与进来的人的意见 - 这是一个奇怪的问题，但我永远不会忘记现在如何解决它。谢谢大家的帮助！！

回答by McElie

Try this friend: in your JS

试试这个朋友：在你的 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">

In your input

在您的输入中

Start date: input type="text" id="from" name="from"

开始日期：input type="text" id="from" name="from"

End date: input type="text" id="to" name = "to"

结束日期：input type="text" id="to" name="to"

This worked for me :)

这对我有用:)

by MacElie M.

通过 MacElie M。

回答by Stanislas Nichini

I think you have another code that interfere with the javascript as this : http://jsfiddle.net/fMD62/

我认为你有另一个干扰 javascript 的代码：http: //jsfiddle.net/fMD62/

works perfectly (with jquery 1.9.1 and jqueryui 1.9.2

完美运行（使用 jquery 1.9.1 和 jqueryui 1.9.2

maybe try

也许试试

$(function() {
    $("#datepicker1,#datepicker2").datepicker();
});

回答by Tom Yeldham

This is a total shot in the dark but have you tried initialising each one seperately? Something like the following

这完全是在黑暗中拍摄，但您是否尝试过单独初始化每个？类似于以下内容

$(function() {
    $('.datepicker').each(function(){
        $(this).datepicker();
    });
});

It's probably what the others have mentioned and you are encountering some form of interference with your code, but it's worth a quick shot.

这可能是其他人提到的，并且您的代码遇到了某种形式的干扰，但值得一试。

回答by vusan

Case 1:
@antony's comment(including jsfiddle link below the question) works as of
version jquery-1.9.1and 1.9.2/jquery-ui.js

案例 1：
@antony 的评论（包括问题下方的 jsfiddle 链接）适用于
版本jquery-1.9.1和1.9.2/jquery-ui.js

Case 2:
OP's case where datepicker1 works well but choosing datepicker2 will open datepicker1
version: jQuery v1.9.0and jQueryui v1.10.0

案例 2：
OP 的情况，其中 datepicker1 运行良好但选择 datepicker2 将打开 datepicker1
版本：jQuery v1.9.0和jQueryui v1.10.0

Case 3:
My case where choosing datepicker1 works well but choosing datepicker2 has no any effect.
version: jquery-3.1.1.min.jsand jQueryui v1.12.1

案例 3：
我选择 datepicker1 效果很好但选择 datepicker2 没有任何效果的情况。
版本：jquery-3.1.1.min.js和jQueryui v1.12.1

Case 3 solution:
initialize date1 first $('date1').datepicker()date1 will works
For date2, first destroy date1 then initialize date2

情况3解决方案：
初始化date1先$('date1').datepicker()date1
对date2有效，先销毁date1再初始化date2

$('date1').datepicker('destroy');
$('date2').datepicker();

Now for date1, destroy date2 and initialize date1.

现在对于 date1，销毁 date2 并初始化 date1。

回答by Bardo

On your example both datepickers have different id's and name's, however, the problem you describe is exactly what'll happen if you use the same name for both.

在您的示例中，两个日期选择器都有不同的 ID 和名称，但是，如果您对两者使用相同的名称，您描述的问题正是会发生的情况。

Does your actual code use different id and name for both datepickers?

您的实际代码是否对两个日期选择器使用不同的 ID 和名称？

回答by DonP

Just to preface, I am a backend database programmer so know little about JavaScript so looked to find this post with the exact same question. Gleaning from what I read above and comparing to my existing code, I modified my JavaScript so that it works and thought I would share it.

只是作为序言，我是一名后端数据库程序员，因此对 JavaScript 知之甚少，因此希望找到具有完全相同问题的这篇文章。根据我上面阅读的内容并与我现有的代码进行比较，我修改了我的 JavaScript 以便它可以工作并认为我会分享它。

The only caveat was that my existing forms with single date selectors no longer worked so I had to add a bit to handle those and all seem fine now. In this case, the database fields are actually a Unix timestamp so the form gets processed when submitted with the two fields converted as needed but for clarity, I did not include that code here.

唯一需要注意的是，我现有的带有单个日期选择器的表单不再有效，所以我不得不添加一点来处理这些，现在看起来一切都很好。在这种情况下，数据库字段实际上是一个 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 );
      }
    });     
  });

回答by Gh61

EXPLANATION of issue

问题说明

I have the same issue and its very disappointing. I searched through the source code of jquery and found this:

我有同样的问题，非常令人失望。我搜索了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();
            }
        }
    });
}

So when you set focus in element thats not inside the .ui-dialog, it will trigger _focusTabbable()function which set focus to the first input in dialog.

因此，当您在不在 内部的元素中设置焦点时.ui-dialog，它将触发_focusTabbable()将焦点设置为对话框中的第一个输入的函数。

The problem is, that $.datepickercreates div on the end of body - so it is outside of .ui-dialog

问题是，这$.datepicker会在 body 的末尾创建 div - 所以它在.ui-dialog

If there is another input which _focusTabbable()will give focus its ok, as datepicker can handle that. But if this input has datepicker binded, it will close the previous datepicker, open another on the first input and the select on the previous datepicker is not fired.

如果有另一个输入_focusTabbable()可以使焦点确定，因为 datepicker 可以处理。但是如果此输入绑定了日期选择器，它将关闭前一个日期选择器，在第一个输入上打开另一个，并且不会触发前一个日期选择器上的选择。

One of possible solutions

可能的解决方案之一

The solution is in this case have input wich will take first focus in dialog and does not have datepicker on it.

解决方案是在这种情况下，输入将在对话框中获得第一个焦点，并且没有日期选择器。

I simply use this HTML code as first input on begin of dialog content where otherwise datepicker input will be on first place:

我只是使用此 HTML 代码作为对话框内容开头的第一个输入，否则日期选择器输入将放在第一位：

<span class="ui-helper-hidden-accessible"><input type="text" /></span>

回答by Robert Bolton

Try putting the contents of the JQuery UI Dialog into an IFrame. That might help you get around some of your issues.

尝试将 JQuery UI 对话框的内容放入 IFrame。这可能会帮助您解决一些问题。

\---/\---/\---/_______________
/                            /
\  ####IFRAME######          \
\  #              #          \
/  #DATEPICKER1   #          /
\  #              #          \
/  #DATEPICKER2   #          /
\  #              #          \
/  ################          /
\                            \
/____________________________/

回答by manuel_m2

in a js archive:

在 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"
}); 

in ur page: <input type="text" id="fecha_1"><input type="text" id="fecha_2">

在您的页面中： <input type="text" id="fecha_1"><input type="text" id="fecha_2">