jquery datepicker - 两个日期形式相同时发生冲突答案

【问题标题】：jquery datepicker - Conflict when two dates in same formjquery datepicker - 两个日期形式相同时发生冲突
【发布时间】：2011-10-14 03:41:38
【问题描述】：

我有一个包含两个日期字段的表单。表格很大，我只展示相关部分。

<input id="dateofassessment" name="dateofassessment"  readonly="readonly" class='datebox' />
<input id="LastIncident" name="LastIncident" readonly="readonly" class="datebox" />

（我应该指出“dateofassessment”是表格中的第一项，“LastIncident”是最后一项）

我像这样附加日期选择器对象..

    $(".datebox").datepicker({
        dateFormat: 'dd-M-yy',
        changeYear: true,
        showButtonPanel: false
        });

“评估日期”输入框完美运行。日历显示正常，单击日期会填写“评估日期”字段 - 完美！

但是，“LastIncident”框并不能很好地工作。单击它会显示日历确定。但是，选择日期不会填写表格。事实上，日历在“LastIncident”处关闭，并在我选择日期后立即在“dateofassessment”字段重新打开。

我无法将整个代码发布在 Intranet 站点上，因为代码量很大。但希望我已经发布了相关部分。

仅供参考，这些字段是“只读”的这一事实没有任何区别。

版本... jQuery v1.5.1 日期选择器 1.8.9

【问题讨论】：

当前 jQuery 版本：v1.6.2 |当前 jQuery UI 版本：v1.8.14。请更新库，看看行为是否仍然存在。
好主意。我现在按照建议更新到最新版本。不幸的是，问题仍然存在。
您的代码works just fine，您的代码中的其他地方是否有问题？
解决方案：我在上面的代码之外查看了一个问题，它似乎与 jqModal 冲突。表单位于模态 div 中。当我将其更改为非模态时，问题就消失了。在网上搜索 jqModal 和 datapicker，人们报告了 z-index 的问题，我猜这可能是日历对象从一个表单字段移动到另一个表单字段时无法解释的行为的原因。

标签： javascript jquery datepicker uidatepicker jqmodal

【解决方案1】：

这显然是 datepicker 的错误。推荐使用

$(".datebox").datepicker({
        dateFormat: 'dd-M-yy',
        changeYear: true,
        showButtonPanel: false
        });

试试

$("#dateofassessment").datepicker({
        dateFormat: 'dd-M-yy',
        changeYear: true,
        showButtonPanel: false
        });

$("#LastIncident").datepicker({
        dateFormat: 'dd-M-yy',
        changeYear: true,
        showButtonPanel: false
        });

我知道这会让你重复自己，这很糟糕，但它可以帮助解决问题。或者您可以尝试另一个日期选择器。或者将这个更新为较新的版本

【讨论】：

感谢您的回复，伊万。事实上，这就是我最初编写它的方式。不幸的是，使用此代码也无法正常工作。

【解决方案2】：

您的问题位于其他地方，请参阅按预期工作的小提琴：http://jsfiddle.net/AfmpL/

【讨论】：

【解决方案3】：

您还可以使用 .setDefaults 使所有日期选择器的行为相同（我的母版页中有我的，甚至在 OnDocumentReady 中也没有，因为我希望它在 OnDocumentReady 函数之前运行）。

$.datepicker.setDefaults({
    showOn: "button",
    buttonImage: "/Program/Images/calendar.png",
    buttonImageOnly: true,
    buttonText: ""
})

因此，您几乎不必重复自己。

$("#dateofassessment").datepicker();
$("#LastIncident").datepicker();

【讨论】：

【解决方案4】：

尝试使用此 JavaScript：

$(function() {
    $( "#datepicker" ).datepicker();
    $( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
});

$(function() {
    $( "#datepicker2" ).datepicker();
    $( "#datepicker2" ).datepicker( "option", "dateFormat", "yy-mm-dd" );   
});

然后使用以下表单域：

<input type="text" id="datepicker" name="fecha_ingreso" />
<input type="text" id="datepicker2" name="fecha_ingreso2" />

【讨论】：