jQuery日期/时间选择器

Question

我一直在寻找一个不错的jQuery插件，既可以处理日期，也可以处理时间。核心UI的DatePicker很棒，但很不幸，我需要能够输入时间。

我已经发现了一些关于使用DatePicker进行时间选择的方法，但它们都似乎非常不雅，并且谷歌搜索没有找到任何好的内容。

是否有一个良好的jQuery插件可以在单个UI控件中选择日期和时间，并具有可用的界面？

- Chelsea

---

我相信我的例子会更加易懂和用户友好。两者都有优缺点。 - Michael Stone

http://haineault.com/media/jquery/ui-timepickr/page/ - Freelancer

Answer 1

目前最好、最简单的日期时间选择器选项是http://trentrichardson.com/examples/timepicker/。

它是jQuery UI Datepicker的扩展，因此支持相同的主题，工作方式也非常相似，语法类似等等。我认为它应该与jQuery UI捆绑在一起。

- xordon

---

我一直在使用这个，我非常喜欢它。 - Sonny

我喜欢这个，但是仍然存在很多漏洞。 - Alastair Pitts

“非常多bug”？几乎没有。我已经在生产代码中使用它一段时间了，而且它还在积极开发中。 - Sonny

@Sonny：“你是否在生产中使用它”与其是否存在漏洞无关。也许你之前没有发现它的漏洞，是因为你并没有使用会暴露漏洞的功能，而Alastair可能使用了。但另一方面，他并没有提供任何证据支持他的说法，所以我不太倾向于认真对待它…… - iconoclast

我对这个插件最大的问题在于它的用户界面：我为什么要使用滑块，尤其是水平的滑块来输入时间呢？对我来说看起来和感觉都非常奇怪。我曾经多次遇到过使用滑块时无法达到想要的数字（反复地略微超过或略微低于目标），最终只好输入。键盘通常是输入精确数值最容易的方式。如果您需要一种可视化的输入方法，时钟才是正常的时间输入方式，而不是滑块。虽然实现难度更大，但可能会更有用（只要也可以使用键盘输入）。 - iconoclast

Answer 2

@David，感谢您的推荐！@fluid_chelsea，我刚刚发布了Any+Time(TM) 3.x版本，它使用jQuery代替Prototype，并且界面大大改进，希望现在能够满足您的需求：

http://www.ama3.com/anytime/

如果有任何问题，请通过我的网站上的评论链接与我联系！

- Andrew M. Andrews III

---

现在，Any+Time(TM)版本4.x已经发布！新版本支持时区（在其他选择器中找到这个功能可不容易哦！），还支持jQuery选择器/链接、易于删除（避免内存泄漏）等多项改进。请试用它，如果有任何问题或建议，请通过我的网站评论页面告诉我。 - Andrew M. Andrews III

Any+Time看起来非常流畅，我喜欢它。 - Zack Peterson

太棒了！我刚刚实现了这个，非常流畅，做得好 :-) - kamui

看起来不错，但许可证禁止商业使用。 - P Shved

这看起来很有前途，可以用于选择店铺营业时间。 - Induster

Answer 3

在我看来，日期和时间应该分别以两个输入框的形式处理，这样对于用户的输入最为方便和高效。让用户一次只输入一件事是一个好的原则，我认为。

我使用核心的UI DatePicker，以及下面的时间选择器。

这个灵感来自于Google日历使用的那个：

jQuery timePicker:
示例: http://labs.perifer.se/timedatepicker/
GitHub上的项目: https://github.com/perifer/timePicker

我发现它是所有替代品中最好的。用户可以快速输入，外观干净，简单，并允许用户输入具体到分钟的特定时间。

PS： 在我看来，滑块（一些替代时间选择器使用的工具）需要太多的点击并要求用户进行鼠标精确的操作（这使得输入变慢）。

- Magne

---

核心UI日期选择器：http://jqueryui.com/demos/datepicker/ - Magne

这会破坏C# MVC模型绑定在该字段上的优势。 - Serj Sagan

Answer 4

我最喜欢的日期选择器是基于原型的AnyTime。我知道它不是jQuery，但对你来说可能仍然值得妥协。即使我完全不懂原型，使用起来也很容易。

我发现一个注意点：在某些浏览器上它不具备向前兼容性。也就是说，在Chrome上无法与较新版本的原型一起使用。

- David Berger

---

如果我能使用原型，这不会是个问题，不幸的是对于这个应用程序我们只能使用jQuery。 - Chelsea

更新一下，AnyTime 3现在可与jQuery一起使用。 - Jaxidian

我已经好几个月没有考虑过这个问题了。但是我的个人项目需要一些更新，我正准备加入一些jquery。我想在此期间替换日期选择器，因为我不需要Any+Time的所有功能，而且我也可以全面使用jQuery。然后，嘭！我发现了这个。时间非常完美。 - David Berger

不错，但年份选择器（点击<或>）对我来说有点笨拙。 - a coder

Answer 5

补充一下这里的信息，Fluid项目有一个很好的维基页概述了大量的日期和/或时间选择器，在这里查看。

- Jaxidian

Answer 6

最近我进行了一些研究，但仍然没有找到一个既有一个好的日期选择器又包括一个好的时间选择器。最终我使用了eyecon的DatePicker，并使用两个简单的下拉框来选择时间。虽然我也考虑使用Timepickr.js，看起来是一个非常不错的方法。

- deceze

Answer 7

我遇到过同样的问题。实际上，我使用了服务器端编程来开发我的项目，但我进行了快速搜索以帮助你，并找到了这个东西。

看起来还不错，没有太多地查看源代码，但似乎纯粹是JavaScript。

看一下：

http://www.rainforestnet.com/datetimepicker/datetimepicker.htm

这是演示页面链接：

http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm

好运

- Michael Stone

---

我已经使用这个工具几年了。虽然它有点老旧，但仍能正常运行。 - a coder

Answer 8

不是jQuery，但它非常适合带有时间的日历：JavaScript日期时间选择器。

我只是将点击事件绑定到弹出它：

$(".arrival-date").click(function() {
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});

- bigspotteddog

---

更新了链接 - 他们把它移动了。 - bigspotteddog

我已经使用那个东西几年了，虽然我调用它的方式不同（因此无法从你的代码中识别）。我一直在迁移到jQuery的DatePicker，因为Rainforest的DatePicker看起来有点老旧。 - a coder

Answer 9

这是我用来让用户选择一个日期时间选择器、设置日期时间并让另一个日期时间选择器在此基础上加一分钟的代码。

我需要这个自定义药物控制...

无论如何，我认为这可能会帮助其他人，因为我在网上找不到答案...

请记住，添加的60000表示增加了一分钟。(60 * 1000 毫秒)

$('.frdtPicker').datetimepicker({
        onClose: function(dateText, inst) {
            var endDateTextBox = $('.todtPicker');
            if (endDateTextBox.val() != '') {
                var testStartDate = new Date(dateText);
                var testEndDate = new Date(endDateTextBox.val());
                if (testStartDate > testEndDate) {

                    var testStartDate = new Date(dateText).getTime() + 60000;
                    var testStartDate2 = new Date(testStartDate); 

                    endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
                }
            }
            else {
                var testStartDate = new Date(dateText).getTime() + 60000;
                var testStartDate2 = new Date(testStartDate);
                endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
            }
            $('.frdtPicker').val(dateText); //endDateTextBox.val());

        },
        onSelect: function(selectedDateTime) {
            var start = $(this).datetimepicker('getDate');
            $('.todtPicker').datetimepicker('option', 'minDate', new Date(start.getTime()));
        }
    });

- carlos martini

Answer 10

请看下面的JavaScript插件。

带日期和时间的Javascript日历

我尽可能地让它简单易用，但它仍处于早期阶段。请告诉我您的反馈，以便我改进它。

- Sastrija