23

所以这里是设置：我有两个 jquery datepickers，在一个 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。

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

4

10 回答 10

9

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

为“重复”问题道歉 - 如果我知道这是我会很快解决的问题！

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

好吧，解决方案非常简单，也许有人可以告诉我为什么它会这样工作，因为我现在有点无能为力。

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

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

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

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

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

于 2013-05-02T12:12:54.623 回答
4

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

于 2014-10-31T07:30:09.477 回答
2

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

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

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

于 2013-04-25T14:20:03.013 回答
2

我认为您还有另一个代码会干扰 javascript，因为：http: //jsfiddle.net/fMD62/

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

也许试试

$(function() {
    $("#datepicker1,#datepicker2").datepicker();
});
于 2013-04-23T12:54:58.777 回答
1

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

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

于 2013-04-29T16:00:52.267 回答
1

案例 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。

于 2017-05-09T05:03:46.263 回答
0

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

\---/\---/\---/_______________
/                            /
\  ####IFRAME######          \
\  #              #          \
/  #DATEPICKER1   #          /
\  #              #          \
/  #DATEPICKER2   #          /
\  #              #          \
/  ################          /
\                            \
/____________________________/
于 2013-04-24T01:53:36.600 回答
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 );
      }
    });     
  });
于 2019-01-05T23:24:36.410 回答
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会在 body 的末尾创建 div - 所以它在.ui-dialog

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

可能的解决方案之一

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

我只是将此 HTML 代码用作对话框内容开始时的第一个输入，否则 datepicker 输入将位于首位：

<span class="ui-helper-hidden-accessible"><input type="text" /></span>
于 2017-03-31T08:40:45.800 回答
-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">

于 2013-04-29T15:47:41.817 回答