245

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

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

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

4

12 回答 12

251

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

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

于 2010-09-12T09:08:49.410 回答
46

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

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

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

于 2009-12-28T15:02:23.657 回答
14

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

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

这个灵感来自谷歌日历使用的一个：

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

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

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

于 2011-08-18T13:27:13.833 回答
13

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

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

于 2009-08-07T15:14:19.967 回答
7

只是为了在这里添加信息，流体项目有一个很好的 wiki 文章，概述了这里的大量日期和/或时间选择器。

于 2010-03-26T20:50:52.117 回答
4

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

于 2009-08-09T01:44:01.110 回答
3

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

貌似还行，没看源码太多，不过好像是纯JavaScript的。

看看：

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

这是演示页面链接：

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

祝你好运

于 2009-08-07T15:02:39.410 回答
1

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

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

$(".arrival-date").click(function() {
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});
于 2011-01-26T19:34:52.177 回答
1

看看下面的 JavaScript 插件。

带有日期和时间的 Javascript 日历

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

于 2012-08-02T15:03:02.423 回答
1

这是我用来让用户选择一个 datetimepicker、设置 datetime 并让另一个 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()));
        }
    });
于 2012-05-08T20:48:10.837 回答
0

我做了一个这样的功能：

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

于 2010-10-15T05:44:28.383 回答
-4

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

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

于 2010-09-08T02:07:17.560 回答