UI Datepicker按钮不起作用

Question

我的Jquery UI Datepicker安装中的“今天”按钮在两次点击后工作，它应该在第一次点击时起作用，并且当在iPhone等移动设备上使用它们时，两个按钮都不起作用。

我在这里进行了现场测试：http://loai.directory/test

我错过了什么？我试图再次安装和设置UI库但无济于事。

Answer 1

当我访问您的测试网站时，我注意到的第一件事是，在第一次点击时，日期字段正确填充，但日历小部件不是。然后在第二次点击时，日历小部件会更新（但这可能只是因为它检测到日期字段的新值）。

我会查看在点击Select Today时被触发的听众。尝试向该侦听器添加一个刷新日历显示的命令;特别参见the #refresh method in the Jquery UI Datepicker API。

编辑（更多指导）：

好的，首先你需要一个能够检测用户点击Today按钮的监听器。当我转到您的测试页面（在Chrome中）时，右键单击小部件的“选择今天”按钮并单击“＃34;检查元素＆＃34;”，它会显示该元素的原始HTML。我看到该按钮具有datepicker-current类，看起来非常独特，所以我将为该类设置一个监听器。

$('.datepicker-current').click(function(){
  // we'll do the refresh command inside here
});

然后我们需要弄清楚如何告诉小部件刷新自己。 Jquery UI小部件有很好的文档，他们解释了＆＃34;刷新＆＃34;这里有一个简短的例子。在该示例之后，refresh命令将如下所示：

$('.datepicker-current').click(function(){
  $( (something) ).datepicker("refresh");
});

我们在文本字段元素上调用.datepicker命令，因此我们需要找出一种方法来选择该元素。在您的情况下，看起来每个文本字段都有一个hasDatepicker类，所以我只选择所有这些并在所有小部件上调用刷新（无论它们当前是否可见或是不）：

$('.datepicker-current').click(function(){
  $( '.hasDatepicker' ).datepicker("refresh");
});

你可以复制＆amp;将这3行直接粘贴到Chrome控制台中，将Jquery监听器添加到实际页面，然后自行尝试。但是像上面这样的东西应该完成你所说的。

你可能已经完成了最后一段代码，但我想向你展示我的整个思考过程只是为了说明Jquery不是魔术，你只需要准备好思考HTML元素并在Chrome控制台中逐步尝试。