jQuery 日期/时间选择器

Question

我一直在寻找一个像样的 jQuery 插件，可以处理日期和时间。 核心 UI DatePicker 很棒，但不幸的是我也需要花时间。

我发现了一些让 DatePicker 与时间一起工作的技巧，但它们看起来都很不优雅，谷歌也没有发现任何好的东西。

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

Answer 1

只是为了在这里添加信息，Fluid Project 有一篇很好的 wiki 文章，概述了大量日期和/或时间选择器 此处。

Answer 2

我最近对此进行了研究，但尚未找到一个像样的日期选择器，其中还包括一个像样的时间选择器。 我最终使用的是 eyecon 很棒的 DatePicker，有两个简单的时间下拉菜单。 我很想使用 Timepickr.js 不过，看起来非常不错方法。

Answer 3

我遇到了同样的问题。 我实际上是使用服务器端编程开发的，但我进行了快速搜索以尝试帮助您并找到了这个。

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

看一下：

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

这是演示页面链接：

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

祝你好运

Answer 4

这是我用来让用户选择一个的代码
datetimepicker，设置日期时间，并有
其他日期时间选择器向该时间添加一分钟。

我需要这个来进行定制药物控制......

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

（至少不是完整的答案）

请记住，添加的 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()));
        }
    });

Answer 5

看看下面的 JavaScript 插件。

带有日期和时间的 Javascript 日历

我已使其尽可能简单。 但它仍处于早期阶段。
让我知道反馈，以便我可以改进它。

Answer 6

不是 jQuery，但它非常适合带有时间的日历：JavaScript 日期时间选择器< /em>.

我只是绑定了点击事件来弹出它：

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

Answer 7

我做了一个这样的函数：

function getTime()
{
    var date_obj = new Date();
    var date_obj_hours = date_obj.getHours();
    var date_obj_mins = date_obj.getMinutes();
    var date_obj_second = date_obj.getSeconds();

    var date_obj_time = "'"+date_obj_hours+":"+date_obj_mins+":"+date_obj_second+"'";
    return date_obj_time;
}

然后我像这样使用 jQuery UI 日期选择器：

$("#selector").datepicker( "option", "dateFormat", "yy-mm-dd "+getTime()+"" );

所以，我得到这样的值： 2010-10-31 12:41:57

Answer 8

我们很难找到一个能按照我们想要的方式工作的方法，所以我写了一个。 我维护源代码并修复出现的错误并提供免费支持。

http://www.yart。 com.au/Resources/Programming/ASP-NET-JQuery-Date-Time-Control.aspx

Answer 9

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

它是 jQuery UI Datepicker 的扩展，因此它也支持相同的主题，并且工作方式非常相同，语法相似等。在我看来，这应该与 jQuery UI 打包在一起。

Answer 10

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

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

如有任何问题，请通过我网站上的评论链接告诉我！

Answer 11

在我看来，日期和时间应作为两个单独的输入框处理，以便用户输入最有用且最高效。 让用户一次输入一件事是一个很好的原则，恕我直言。

我使用核心 UI DatePicker 和以下时间选择器。

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

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

我发现它是最好的在所有替代方案中。 用户可以快速输入，它看起来干净、简单，并且允许用户输入精确到分钟的特定时间。

附：
在我看来：滑块（由一些替代时间选择器使用）需要过多的点击，并且需要用户的鼠标精度（这使得输入速度变慢）。

Answer 12

我对日期选择器的最佳体验是基于原型的 AnyTime。 我知道这不是 jQuery，但它可能仍然值得您做出妥协。 我完全不知道原型，但它仍然很容易使用。

我发现一个警告：它在某些浏览器上不向前兼容。 也就是说，它不适用于 Chrome 上较新版本的原型。