jQuery UI DateTimePicker 吐到单个元素

Posted 2023-05-07

【中文标题】jQuery UI DateTimePicker 吐到单个元素

【英文标题】：jQuery UI DateTimePicker Spit to individual Elements

【发布时间】：2014-02-26 03:03:24

【问题描述】：

( 作为一个 JS 菜鸟，我真的很想只使用一个输入字段并在 php 中快速处理所有这些，这是我的元素。但我也想尝试和学习与 JS 一起生活.)

使用jquery-ui-timepicker-addon.js，我需要将输入划分到各个字段year,month,day,hour,minutes..

我发现了一些其他类似的问题here on SE，但它们只涉及普通的 UI 时间选择器，它只提供年、月、日三元组（从未真正理解为什么）..

但是，使用这些资源，我“破解”了一些几乎可以工作的东西，但问题是被单击以触发选择器的字段总是被所有值填充......

演示：http://jsfiddle.net/obmerk99/9Tk69/2/

现在，更进一步，我已经成功地划分了hour:minute 对..

演示：http://jsfiddle.net/obmerk99/9Tk69/3/

但仍然存在一些问题..

1 - 这一定是人类历史上最丑陋的代码（或者至少是 JS） - 一定有更好的方法来做到这一点。如果有人给我一个等效的 PHP 代码，我会感到羞愧。

2 - 被触发的输入字段仍然获得所有输入..

3 - 只有当 TIME 被触动时它才能正常工作。如果仅设置 DATE，timesplit[0] 将未定义...

4 - 我无法让两者都工作，点击日期或小时或秒的那一刻 - 焦点丢失。

编辑我

Better working Demo

这基本上是@Steve Wellens answer，

getYear() 应该改为getFullYear..

第一个字段触发器的问题仍然存在（获取完整值）模糊，并且 - 它仅在触摸所有值时才有效..（如果您不更改小时，它将为空白）

在这一点上，我认为使用 ONE 字段并使用 PHP 拆分将是我的最佳选择（对于少数拥有它的人来说，还有 html5）。

最终考虑this ..

【问题讨论】：

使用 HTML5 的日期和时间输入（单个输入的日期时间或单独的日期和时间）并依赖本机选择器会更容易吗？如果您必须支持许多较旧的浏览器，则可能不是一个选择，尽管您可以使用 Modernizr 来检测对输入类型的支持并使用 jQuery UI 作为后备。以这种方式拆分你的元素似乎是导致大量不必要悲伤的秘诀。

hmmm.. 好点 :-) 但不幸的是，我确实需要支持旧的（ish）浏览器。至少像你说的那样作为后备。老实说，我的 FIREFOX (26) 甚至不完全支持..

我会继续使用 HTML5 输入，除非有一个非常紧迫的原因需要以这种方式拆分它。这样，您知道它可以在现代移动设备上运行，如果您需要实现回退，它应该很容易 - 使用 Modernizr 使用 inputtypes 属性检测对 HTML5 输入的支持，如果不存在，应用您选择的日期选择器。我之前在 Phonegap 应用程序中做过这个，它工作得非常好。除非绝对必要，否则我会避免像瘟疫那样拆分输入。

Right .. 至少对我来说，稍后在 PHP 中拆分它也会更容易。但这不是问题的范围。再说一遍，你说的是 ddatepicker 的后备 - 这正是我问的..

我想说的是，采用这种方法会给自己制造很多不必要的悲伤。大多数 JS 日期选择器并没有真正设置来处理这种拆分，这是有道理的（它避免了人们选择不存在的日期的问题，例如 2 月 31 日）。我个人根本不想这样做，因为这样做很痛苦，如果客户想这样做，我会反对它。如果你真的需要有单独的字段，我觉得最好的方法是从头开始实现一个选择器。

【参考方案1】：

你可以这样试试（我只做了几个字段）：

jQuery(document).ready(function () 

    jQuery('.countdown-timepicker').datetimepicker(
        onSelect: function (dateText, inst) 
            var FullDate = new Date(dateText);

            jQuery('.mydate_date_day').val(FullDate.getDate());
            jQuery('.mydate_date_month').val(FullDate.getMonth());
            jQuery('.mydate_time_hour').val(FullDate.getHours());
        
    );
);

PS：使用类选择单个元素似乎是错误的。

【讨论】：

谢谢.. 它有点工作，但触发字段仍然得到完整的日期。此外，getYear() 应更改为getFullYear。见编辑