jQuery日期/时间选择器

2020/10/11 10:41 · javascript ·  · 0评论

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

我发现有一些可以使DatePicker与时间配合使用的技巧,但是它们看起来都不太雅致,Google并没有发现任何不错的东西。

是否有一个不错的jQuery插件,可在具有可用界面的单个UI控件中选择日期和时间?

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

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

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

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

如有任何问题,请通过我网站上的评论链接让我知道!

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

I use the core UI DatePicker, and the following time picker.

This one is inspired by the one Google Calendar uses:

jQuery timePicker:
examples: http://labs.perifer.se/timedatepicker/
project on github: https://github.com/perifer/timePicker

I found it to be the best among all of the alternatives. User can input fast, it looks clean, is simple, and allows user to input specific times down to the minute.

PS:
In my view: sliders (used by some alternative time pickers) take too many clicks and require mouse precision from the user (which makes input slower).

我对日期选择器的最佳体验是使用基于原型的AnyTime我知道那不是jQuery,但仍然值得您妥协。我绝对不知道任何原型,并且仍然很容易使用。

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

只是为了在此处添加信息,The Fluid Project有一个不错的Wiki文章,概述了此处的大量日期和/或时间选择器

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

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

似乎还不错,没有过多地查看源代码,但似乎纯粹是JavaScript。

看一下:

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

这是演示页面链接:

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

祝好运

这是我用来让用户选择一个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()));
        }
    });

看一下下面的JavaScript插件。

具有日期和时间的Javascript日历

我已经使其变得尽可能简单。但它仍处于起步阶段。让我知道反馈,以便我进行改进。

不是jQuery,但它对于带有时间的日历非常适用:JavaScript Date Time Picker

我只是绑定了click事件以将其弹出:

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

我做一个这样的功能:

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

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

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

本文地址:http://javascript.askforanswer.com/jqueryriqi-shijianxuanzeqi.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!