Question

我一直在寻找一个可以处理日期和时间的体面jQuery插件。核心用户界面DatePicker很棒，但不幸的是我需要花时间。

我发现有几个黑客可以让DatePicker与时俱进，但它们看起来都非常优雅，谷歌也没有好转。

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

在我看来，日期和时间应该作为两个单独的输入框来处理，以使用户输入最有效和最有效。让用户一次输入一个东西是一个很好的原则，imho。

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

这个受Google日历使用的启发：

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

我发现它是所有替代品中最好的。用户可以快速输入，看起来干净，简单，并允许用户输入特定时间。

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

Answer 4

我对日期选择器的最佳体验是使用基于原型的AnyTime。我知道这不是jQuery，但它仍然值得您妥协。我知道绝对没有原型，而且它仍然很容易使用。

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

Answer 5

只是为了添加这里的信息，The Fluid Project有一个很好的wiki写作，概述了大量的日期和/或时间选择器here。

Answer 6

我刚刚研究过这个问题，并且尚未找到一个像样的日期选择器，其中还包括体面的时间选择器。我最终使用的是eyecon's awesome DatePicker，有两个简单的下拉时间。我很想使用Timepickr.js，看起来是一个非常好的方法。

Answer 7

我遇到了同样的问题。我实际上开发了我的使用服务器端编程，但我做了一个快速搜索，试图帮助你找到它。

好吧，好像没看过源太多，但似乎纯粹是JavaScript。

看看：

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

以下是演示页面链接：

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

祝你好运

Answer 8

不是jQuery，但它适用于有时间的日历： JavaScript Date Time Picker 。

我刚绑定了click事件以弹出它：

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

Answer 9

这是我用来让用户选择一个的代码 datetimepicker，设置日期时间，并具有其他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 10

查看以下JavaScript插件。

Javascript Calendar with date and time

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

Answer 11

我创建了一个这样的函数：

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 datepicker：

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

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

Answer 12

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

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

jQuery日期/时间选择器

12 个答案: