Question

我正在调用内联日期选择器（简化版本用于演示目的）：

<input id="inp_datepicker" name="startDateField">
<div id="datepicker"></div>

<input id="inp_datepicker2" name="endDateField">
<div id="datepicker2"></div>

我已将此添加到Javascript中，因此他们会将所选内容放入可编辑字段中。

$("#datepicker").datepicker({
    onSelect: function() { 
        var dateObject = $(this).datepicker('getDate');
        $('#inp_datepicker')[0].value = convertDateToString(dateObject);
    }
});

$("#datepicker2").datepicker({
    onSelect: function() { 
        var dateObject = $(this).datepicker('getDate');
        $('#inp_datepicker2')[0].value = convertDateToString(dateObject);
    }
});

一切正常除了第二个日期选择器不会填充第二个字段。第一个，没问题。第二个，没什么。

我在第二个onSelect函数中设置了一个断点，发现它根本没有中断。

（我知道，我可以通过输入弹出日历来避免这种情况，过去所有工作都很好，但这次PRD指定了内联日期选择器，所以我必须将选择的结果分配给一个字段。）同样，第一个工作正常。

编辑从div中删除了class="hasDatepicker"，因为它不在源代码中，只有在jQuery-UI datepicker执行后才会在呈现的标记中。

编辑2 我很尴尬地说我自己解决了这个问题。它似乎与另一个与datepickers无关的无关脚本有关。删除该脚本后，即使脚本没有丢失任何错误，它仍然有效。啊，如果没有遗留代码我们会怎么做，是吗？此外，我认为删除这篇文章可能是最好的，所以没有人再浪费时间了。抱歉，麻烦。

Answer 1

似乎问题源于班级.hasDatepicker。

<div id="datepicker" class="hasDatepicker"></div>
<div id="datepicker2" class="hasDatepicker"></div>

当您致电.datepicker()时，它会自动添加.hasDatepicker。如果该类已经存在，那么它将假定已经添加了datepicker。

实施例： http://jsbin.com/ukotit/27/edit

从div中删除该类，它应该可以正常工作。

$("#datepicker").removeClass('hasDatepicker').datepicker({
    onSelect: function() { 
        var dateObject = $(this).datepicker('getDate');
        $('#inp_datepicker')[0].value = convertDateToString(dateObject);
    }
});

$("#datepicker2").removeClass('hasDatepicker').datepicker({
    onSelect: function() { 
        var dateObject = $(this).datepicker('getDate');
        $('#inp_datepicker2')[0].value = convertDateToString(dateObject);
    }
});

样本： http://jsbin.com/ukotit/30/edit

的更新： 的

$("#datepicker, #datepicker2").datepicker({ onSelect: function(dateText, inst) { $(this).prev()[0].value = dateText; } });

http://jsbin.com/ukotit/32/edit

Answer 2

你在div上有你的日期选择器而不是输入。

你可以重做这个更简单的：

将数据添加到elemnet并使用它。

<input id="inp_datepicker" data-relatedelementid="datepicker" type="text" name="startDateField">
<div id="datepicker" class="hasDatepicker"></div>
<input id="inp_datepicker2" data-relatedelementid="datepicker2"  type="text" name="endDateField">
<div id="datepicker2" class="hasDatepicker"></div>

$("#inp_datepicker,#inp_datepicker2").datepicker({
    onSelect: function (dateText, inst) {
        $('#'+$(this).data('relatedelementid')).text(dateText);
    }
});

页面上有两个jQuery-UI内联日期选择器，第二个不起作用

2 个答案: