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

时间:2013-04-23 12:42:56

标签: javascript jquery html jquery-ui datepicker

所以这是设置: 我有一个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。

对此有何想法?作为一个警告,由于我的雇主的限制,我无法发布实际代码,但如果您需要任何澄清,我可以回答大多数问题。任何和所有的帮助将不胜感激!!

10 个答案:

答案 0 :(得分:9)

<强>更新 看起来下面描述的行为在另一个stackoverflow问题中解决了:
Prevent jQuery UI dialog from setting focus to first textbox

对“重复”问题表示道歉 - 如果我知道这是问题,我会很快解决这个问题!

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

嗯,分辨率很简单,也许有人可以告诉我它为什么会这样运作,因为我现在有点无能为力。

这就是我所做的:
我在表单中添加了另外两个文本输入字段(需要它们)并重新排序布局,以便其中一个新输入字段是“第一个”元素(在左上角),如下所示:

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

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

现在,为什么它以这种方式工作我不知道。我尝试为各种textfields / datepickers设置tabindex参数,但这并未改变行为。

无论如何,我很欣赏每个插话的人的意见 - 这是一个奇怪的问题,但我永远不会忘记现在如何修复它。谢谢大家的帮助!!

答案 1 :(得分:4)

试试这位朋友: 在你的JS

&#13;
&#13;
 $(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 );
      }
    });  
  });  
  
&#13;
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
&#13;
 <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">
&#13;
&#13;
&#13;

在您的输入中

开始日期:输入类型=&#34;文字&#34; ID =&#34;从&#34;命名=&#34;从&#34;

结束日期:输入类型=&#34;文字&#34; ID =&#34;至&#34; name =&#34; to&#34;

这对我有用:)

由MacElie M。

答案 2 :(得分:3)

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

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

也许试试

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

答案 3 :(得分:1)

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

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

这可能是其他人提到的,你遇到了对代码的某种形式的干扰,但值得快速拍摄。

答案 4 :(得分:1)

在您的示例中,两个日期选择器都有不同的ID和名称,但是,如果您对两者使用相同的名称,那么您描述的问题就是这样。

您的实际代码是否对两个datepickers使用不同的ID和名称?

答案 5 :(得分:1)

案例1:
@ antony的评论(包括问题下面的jsfiddle链接)起作用 版本jquery-1.9.11.9.2/jquery-ui.js

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

案例3:
我选择datepicker1的情况很好但选择datepicker2没有任何影响 版本:jquery-3.1.1.min.jsjQueryui v1.12.1

案例3解决方案:
初始化date1 first $('date1').datepicker() date1将起作用 对于date2,首先销毁date1然后初始化date2

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

现在为date1,销毁date2并初始化date1。

答案 6 :(得分:0)

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

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

答案 7 :(得分:0)

问题说明

我有同样的问题,非常令人失望。 我搜索了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在正文的末尾创建了div - 因此它超出了.ui-dialog

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

可能的解决方案之一

在这种情况下解决方案是输入,它将在对话框中首先聚焦,并且没有日期选择器。

我只是将这个HTML代码用作对话框内容开头的第一个输入,否则将首先输入datepicker:

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

答案 8 :(得分:0)

仅作为序言,我是一名后端数据库程序员,所以对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 );
      }
    });     
  });

答案 9 :(得分:-1)

在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">