html5 输入元素“日期” - 如何显示日历元素

Posted 2023-05-07

【中文标题】html5 输入元素“日期” - 如何显示日历元素

【英文标题】：html5 input element "date" - how to show calendar element

【发布时间】：2013-03-28 16:50:32

【问题描述】：

我有一个使用 jqueryUI 工作的日历选择器，但想尝试将其转换为本机日期选择器。

我希望能够拥有以下内容：

从视图中隐藏的“”元素开始。 当点击主页元素时，显示元素，日历打开 当用户在日历上选择日期时，该元素被隐藏。

现在当我进入第 2 步时， 项目正在显示，但日历隐藏， 因此用户必须单击以显示元素，然后再次单击以显示日历，然后第三次单击以选择日期。

编辑：我尝试了以下方法：

$('#nativedate').click(function()
    console.log('click logged');
)

然后用另一种方法：

$(#nativedate).trigger('click');

这适用于我设置的事件处理程序，但它不打开日历

【问题讨论】：

基本上是您试图让事情变得更加用户友好？你有什么代码可以提供吗？

是的，这是一个例子：jaredstanley.com/html5/moonphase 1.单击主舞台，您将看到 日期选择器出现，然后 2.单击日期选择器，您将看到日历弹出，然后 3. 点击日历，日历消失。我想删除第 2 步...

尝试添加$('#datepicker').css("visibility", "visible");，所以我认为它看起来像这样$('#nativedate').click(function() $('#datepicker').css("visibility", "visible"); )

我在你的 script.js 中看到你的 showCalender 函数有一个注释掉的 $('#datepicker').show(); 行，如果我之前说的不起作用，尝试用 $('#datepicker').css("visibility", "visible"); 替换它

感谢@AaronRussell - 这是旧代码，用于显示 jqueryUI 日历 - 它下面的两行：'$('#nativedate').show();'是显示日历元素的那个。同样，我能够正确显示元素，但它处于关闭状态。我想让它在它出现时处于 open 状态。

【参考方案1】：

一些问题：

---

i) 浏览器的本机日期时间元素是正在打开还是您的日历在输入 decleration 时打开？ ii）如果您的项目在一段时间后没有显示，那么尝试一些 javascript 来强制它在该特定输入标签附近保持打开状态？

这些可能会有所帮助

---

Disable native datepicker in Google ChromeRemove background arrow from date input in Google Chrome v20

---

或试试谷歌搜索 或者您可以使用 CSS 编辑浏览器本机 DateTime Picker。

【讨论】：

在桌面上用 chrome 测试：jaredstanley.com/html5/moonphase 可以复制上述步骤。正在使用浏览器的本机日期时间元素，但我试图在不实际单击该元素的情况下强制打开日历。

??您建议“尝试 Google 搜索”、“编辑 CSS”、“尝试一些 javascript” - 不用说，我在之前来这里之前已经花时间处理所有这些。