jQuery日期/时间选择器

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

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

看:

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

下面是演示页面链接:

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

祝你好运

我使用数据选择器的最佳经验是使用基于原型的任何时候。我知道这不是jQuery，但对于您来说，折衷一下还是值得的。我完全不知道原型，但它仍然很容易操作。

我发现了一个警告:它在某些浏览器上不向前兼容。也就是说，它不能在Chrome上的新版本原型上运行。

我最近研究了这个，还没有找到一个体面的日期选择器，还包括体面的时间选择器。我最终使用的是eyeecon的很棒的DatePicker，有两个简单的下拉时间。虽然我很想使用Timepickr.js，但看起来是一个非常好的方法。

@David，谢谢你的推荐!@fluid_chelsea，我刚刚发布了Any+Time(TM)第三版。它使用jQuery而不是Prototype，并且有一个很大的改进的界面，所以我希望它现在能满足你的需求:

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

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

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

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

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

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

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

我做了一个这样的函数:

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

不是jQuery，但它适用于带时间的日历:JavaScript日期时间选择器。

我只是绑定点击事件弹出它:

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

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

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

这一个是受到谷歌日历使用的启发:

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

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

(至少不是一个完整的答案)

$('.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日历与日期和时间