【问题标题】:jQuery date/time picker [closed]jQuery 日期/时间选择器 [关闭]
【发布时间】:2010-11-17 17:32:37
【问题描述】:

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

我发现了一些让 DatePicker 与时间配合使用的技巧,但它们看起来都很不雅,而且 Google 也没有找到任何好的东西。

有没有一个很好的 jQuery 插件,可以在具有可用界面的单个 UI 控件中选择日期和时间?

【问题讨论】:

标签: javascript jquery datepicker datetimepicker


【解决方案1】:

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

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

【讨论】:

  • 我一直在用这个,我很喜欢。
  • 我喜欢这个,但它仍然很麻烦。
  • “非常有问题”?几乎不。我在生产代码中使用它,现在已经有一段时间了。它也在积极开发中。
  • @Sonny:你是否在生产中使用它与它是否有问题无关。你可能只是没有看到它的错误,因为你没有用它做暴露它们的事情,也许 Alastair 就是这样。另一方面,他没有提供任何证据证明他的说法,所以我不想太认真......
  • 我对这个插件最大的问题是用户界面:为什么我要使用滑块,水平的!输入时间!?它看起来和感觉对我来说很尴尬。我有过很多次使用滑块的经验,但我无法将它调到我想要的数字(反复稍微超过然后稍微低于),我最终输入了它。键盘通常是输入精确数值的最简单方法。如果您想要一种视觉输入法,时钟是正常的时间输入法,而不是滑块。较难实现,但实际上可能有用(只要键盘输入也是可能的)。
【解决方案2】:

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

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

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

【讨论】:

  • Any+Time(TM) 4.x 版现已推出!新版本支持 TIME ZONES(在任何其他选择器中找到它!)以及 jQuery 选择器/链接、易于删除(避免内存泄漏!)和许多其他改进。请搭便车,如果您有任何问题或建议,请通过我网站上的评论页面告诉我。
  • Any+Time 看起来很漂亮。我喜欢它。
  • 刚刚在 Rails 应用程序上实现了 AnyTime。完美运行。
  • 我刚刚选择了 AnyTime 选择器作为我的 JSF 应用程序的选择器!谢谢你的好产品,继续努力!
  • Any+Time 为每个 Any+Time 输入的 UI 附加一个新的隐藏 div(与重用隐藏 div UI 的 jQUery UI 日期选择器不同),这使得设计糟糕的 MSIE6 中的性能下降很多。所以如果需要支持 MSIE6,请不要使用 Any+Time!
【解决方案3】:

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

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

这个灵感来自谷歌日历使用的那个:

jQuery 时间选择器:
示例:http://labs.perifer.se/timedatepicker/
github上的项目:https://github.com/perifer/timePicker

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

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

【讨论】:

【解决方案4】:

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

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

【讨论】:

  • 如果我可以使用原型,这不会是一个问题,不幸的是,我们在这个应用程序中坚持使用 jQuery。
  • 只是一个更新 - AnyTime 3 现在可以使用 jQuery。
  • 我已经好几个月没有想过这个问题了。但是我的个人项目需要一些更新,我正准备投入一些 jquery。我想我会在使用日期选择器时替换它,因为我不需要 Any+Time 的所有功能,并且认为我不妨使用所有 jQuery。和砰!我遇到了这个。很棒的时机。
  • 很好,虽然年份选择器(点击 )对我来说很笨拙。
【解决方案5】:

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

【讨论】:

    【解决方案6】:

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

    【讨论】:

      【解决方案7】:

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

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

      看看:

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

      这里是演示页面链接:

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

      祝你好运

      【讨论】:

      • 我已经用了几年了。它的牙齿有点长,但有效。
      【解决方案8】:

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

      【讨论】:

        【解决方案9】:

        看看下面的 JavaScript 插件。

        Javascript Calendar with date and time

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

        【讨论】:

          【解决方案10】:

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

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

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

          【讨论】:

          • 更新了链接 - 他们移动了它。
          • 我已经使用了几年了,尽管我调用它的方式不同(因此无法从您的代码中识别)。我一直在迁移到 jquery 的 DatePicker,因为雨林的那个看起来有点长。
          【解决方案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 日期选择器:

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

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

          【讨论】:

          • 有时我们需要确定时间(不使用getTime函数)
          【解决方案12】:

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

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

          【讨论】:

          • 很遗憾,此链接无效。
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2010-12-25
          • 2014-04-24
          • 2012-09-11
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多