UI 日期选择器按钮不起作用

Posted 2023-05-07

【中文标题】UI 日期选择器按钮不起作用

【英文标题】：UI Datepicker buttons are not working

【发布时间】：2015-07-09 04:05:27

【问题描述】：

我安装的Jquery UI Datepicker 中的“今天”按钮在单击两次后工作，它应该从第一次单击开始工作，而在 iPhone 等移动设备上使用它们时这两个按钮根本不起作用。

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

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

【问题讨论】：

它可以在我的 android 设备上使用 chrome。

你在桌面上试过了吗？今日按钮仅在您单击两次时有效

是的，当我在两台设备上单击一次时，它就会起作用。

哦，嗯，我现在很困惑

【参考方案1】：

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

我会查看单击Select Today 时触发的侦听器。尝试向该侦听器添加一个刷新日历显示的命令；具体见the #refresh method in the Jquery UI Datepicker API。

编辑（更多指导）：

好的，首先您需要一个侦听器来检测用户何时单击“今日”按钮。当我转到您的测试页面（在 Chrome 中）时，右键单击小部件的 Select Today 按钮并单击“检查元素”，它会显示该元素的原始 html。我看到按钮有datepicker-current 类，看起来很独特，所以我将为该类设置一个监听器。

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

然后我们需要弄清楚如何告诉小部件刷新自己。 Jquery UI 小部件有不错的文档，他们在这里用一个简短的例子解释了“刷新”功能。按照该示例，刷新命令将如下所示：

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

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

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

您可以将这 3 行直接复制并粘贴到您的 Chrome 控制台中，以将 Jquery 侦听器添加到实时页面，然后自己尝试一下。但是像上面这样的东西应该可以完成你所说的。

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

【讨论】：

不应该默认应用到插件中吗？

我想是这样....但显然不是。我的观点是值得一玩。

虽然我对juqury和javascript不是很了解，但还是试试看吧。谢谢你:)

Jquery 并不像人们想象的那么可怕，你应该投资它。在对正确的 Javascript 有信心之前，我对 Jquery way 有信心。无论如何试一试，如果您遇到语法问题，请使用 Chrome JS 控制台玩转并在此处发布一个 sn-p。

我真的不知道我在做什么：/请帮助

【参考方案2】：

经过更多挖掘，我发现该按钮“不起作用”，因为它没有做“我认为”它应该做的事情！

他们的代码并没有真正被破坏。它只是没有做大多数人的事情 会期望它做到。即在输入中输入今天的日期 盒子。它的作用是突出显示用户查看今天的日期 日历。如果他们再过一个月或再过一年， 日历会弹出回今天的视图而不取消选择日期 用户已选择。

引用这里的第一个答案：Today button in jQuery Datepicker doesn't work

因此，解决此问题的方法不是找出问题所在，而是如何调整其设置。下面是一个为我完成这项工作的 sn-p :) - 虽然不确定这是否是最好的方法 - 所以任何关于此的想法都会很棒:)

$.datepicker._gotoToday = function (id)  $(id).datepicker('setDate', new Date()).datepicker('hide').blur(); ;