Question

我正在使用现有的javascript库来执行AJAX调用，然后执行可选的回调函数。回调函数传递正在加载到DOM中的HTML字符串。我需要将jQuery datepicker分配给该HTML字符串中日历类的所有元素。

AJAX查询中HTML字符串的简化示例是：

<tr id='1234'>
    <td>
        <input type="text" value="somevalue" />
        <input type="text" class="calendar" value="21/12/2010" />
    </td>
    <td>
        <input type="text" value="someothervalue" />
        <input type="text" class="calendar" value="21/12/2011" />
    </td>
</tr>

我可以在回调函数中执行以下操作，在两个必需的输入上设置datepicker，但这会导致使用datepicker发生奇怪的事情，例如从2010年到1900年的下一个按钮跳转以及上一个跳转按钮到1899年。

$(".calendar").datepicker('destroy').datepicker({ dateFormat: 'dd/mm/yy', showAnim: 'fadeIn', duration: 200, gotoCurrent: true, changeYear: true, yearRange: 'c-120:c' });

因此我想将语句限制在提供给回调函数的HTML片段中的元素。我可以用什么jQuery模式来实现以下结果，注意到html参数是一个字符串：

function SetCalendar(html) {
    $("html.children .calendar").datepicker('destroy').datepicker({ dateFormat: 'dd/mm/yy', showAnim: 'fadeIn', duration: 200, gotoCurrent: true, changeYear: true, yearRange: 'c-120:c' });

}

Answer 1

你几乎拥有它。如果你使用它作为你的ajax成功函数。

function ajaxSuccessFn(html) {
    $(html).find('input.calendar').datepicker({
          dateFormat: 'dd/mm/yy',
          showAnim: 'fadeIn',
          duration: 200,
          gotoCurrent: true,
          changeYear: true,
          yearRange: 'c-120:c' 
    }).end().appendTo('#someElement');
}

Answer 2

可能有更好的方法，但这有效。我仍然遇到了令人烦恼的问题，即datepicker上的下一个按钮从2010年7月跳到1900年1月，但我猜这是datepicker代码中的其他内容。

function SetCalendar(html) {
    var id = "#" + /.*?id="(.*?)"/.exec(html)[1];
    $(id).find('input.calendar').datepicker('destroy').datepicker({ 
          dateFormat: 'dd/mm/yy', 
          showAnim: 'fadeIn', 
          duration: 200, 
          gotoCurrent: true, 
          changeYear: true, 
          yearRange: 'c-120:c'  
    }); 
}

jQuery提取id，然后根据类附加日历

2 个答案: