如何在同一输入框中使用jQuery日期选择器和时间选择器并实现一个接一个弹出？

Question

我有一个日期选择器和一个时间选择器，分别在两个不同的输入框中，但我需要将这两个输入框的值合并为一个值以便于数据库调用。我想知道是否可以只使用一个输入框来控制这两个功能？

首先调用日期选择器，用户会点击所需的日期并输入其值，然后时间选择器弹出并附加在第一次操作中用户选择的日期。

我正在使用jQuery UI Datepicker和Timepickr插件。

所以我有这样的代码：

<input class="datepicker">2009-06-22</input>
<input class="timepicker">12:00:00</input>

但是我希望得到类似于这样的东西

<input class="datetimepicker">2009-06-22 12:00:00</input>

<script type="text/javascript">
// Date and Time picker same input field
$("#datepicker").datepicker( {
   dateFormat: 'yy-mm-dd',
   onClose: function(dateText, inst) {
      var tempDate = $("#datepicker").val(dateText);
      $("#datepicker").timepickr({
         onClose: function(timeText, inst) {
            var tempTime = $("#datepicker").val(dateText);  
            alert("Temp Time: '" + tempTime.val() + "'");
            $("#datepicker").val(tempDate.val() + ' ' + tempTime.val());
         }  
      });                                   
   }
});             
</script>

- Phill Pafford

---

啊，糟糕。我在输入链接时搞砸了，这是正确的链接... jQuery Timepicker mod - Fentex

Answer 1

我想向您推荐 Any+Time(TM)，在此工具中，您可以通过一个单一、易于使用（且快速！）的日期/时间组合选择器将日期和时间合并为单个字段。

- Andrew M. Andrews III

---

刚刚发布了版本4，其中包括许多新功能，包括支持时区（试着在其他选择器中找到它！），jQuery选择器/链接和易于删除（以减少内存泄漏并支持更动态的页面）。请访问http://www.ama3.com/anytime/ 了解更多信息并下载代码。如果您遇到任何问题或有任何建议，请使用该网站上的联系链接。谢谢！ - Andrew M. Andrews III

安德鲁，我刚开始使用AnyTime选择器，这是你的建议。太棒了！ :) 如果其他人发现这篇文章，并且正在使用带有内联编辑的jqgrid，则AnyTime选择器不会直接正常工作。如果您打开选择器，然后关闭行，然后返回到相同的选择器字段，则会出现错误，例如“无法创建另一个AnyTime选择器”。我找到的解决方法是将$('input').AnyTime_noPicker();传递给editRow（）的oneditfunc。 - jessica

谢谢，杰西卡！如果还有其他人遇到问题，请不要犹豫使用网站上的联系表格！ - Andrew M. Andrews III

Any+Time为每个Any+Time输入附加一个新的隐藏div用于UI（不像jQuery UI日期选择器重复使用隐藏div UI），这会使性能在设计不良的MSIE6中大幅下降。因此，如果您需要支持MSIE6，请不要使用Any+Time！ - Eduardo

Any+Time为每个输入创建一个新的小部件，因为每个输入可以有不同的格式，从而需要不同的按钮。这是我第一次听说性能下降的问题，但我会调查这个问题，并在必要时寻找可能不破坏库灵活性的解决方案。 - Andrew M. Andrews III

Answer 2

您可以将事件绑定到日期选择器的 onClose() 事件上。让它打开您的时间选择器。让日期选择器写入输入的基本值，并让时间选择器将其值附加到同一输入后面，以空格分隔。

1. 将日期选择器绑定到输入。
2. 将打开时间选择器的方法附加到日期选择器的 .onClose() 事件。
3. 将时间选择器的值（带有前导空格）附加到输入值。

更新：以下是根据更新后的问题更新的结果。

文档简要介绍了如何将事件/操作绑定到日期选择器关闭时的示例：

$('.selector').datepicker({
   onClose: function(dateText, inst) { ... }
});

在这个例子中，你可以使用函数在"onClode："后面写入值到输入框，并弹出时间选择器。

$(".selector").datepicker({
  onClose: function(dateText, inst) {
    $(".selector").val(dateText);
    // Raise Timepickr
  }
});

- Sampson

---

我喜欢这个选项的流程，但从未绑定过任何东西。我已经编辑了我的帖子，向您展示我正在使用的代码。非常基础。 - Phill Pafford

我该如何调用时间选择器？ - Phill Pafford

抱歉，我不知道。我从未使用过那个特定的第三方插件。您需要查阅其文档或联系插件作者。老实说，寻找一个内置日期和时间的不同第三方插件可能会更容易一些 - 比如 http://razum.si/jQuery-calendar/TimeCalendar.html 或者 Alexander 回答中提到的插件。 - Sampson

你可以尝试在 $(".selector").val(dateText); 行后将插件绑定到 $(".selector")，然后立即调用 $(".selector") 的 .click() 或 .focus() 方法。也许这样就可以了。 - Sampson

我已经修改了代码，但仍然存在问题，请查看新的编辑。 - Phill Pafford

Answer 3

不是jQuery，但它非常适合带有时间的日历：JavaScript日期时间选择器。

只需绑定单击事件即可弹出它：

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

个人认为这样更容易理解。但是显然，有很多选择可以使用多个jQuery插件来完成您的工作。

- Bat_Programmer

Answer 4

这里有一个替代方案：

http://www.r-ip.ru/dev/datetimepicker/index.html

$('#datetimepicker').datetimepicker({ 
  dateFormat: 'yy-mm-dd',
  timeFormat: ' hh:ii:ss' 
});

- AlexC

---

那个没有说明。此外，提供的链接中时间选择器的界面很糟糕。花了我几秒钟才弄清楚点击一个值会增加它。无论如何，我已经取消了我的反对票。 - Sampson

我同意它有我所要求的，但不包括我想使用的插件。你提供的解决方案很好，但我同意时间控制有点令人困惑。还是谢谢。 - Phill Pafford

链接已失效。 - Marcel

那个链接在我的杀毒软件上显示为“特洛伊木马仿冒者” ;) - Prof

Answer 5

你可以尝试将两个控件的输入合并成一个，例如：

$("#datetime").focus(function() {
    var mydate = $("#date").val();
    var mytime = $("#time").val();
    if(mydate && mytime && !this.value) {
        this.value = mydate + " " + mytime;
    }
});

- dhaval

Answer 6

请查看链接。

我已经更新了一些布局问题，并添加了第二个滑块，如果{showTime:true, time24h:true}将会激活。

您可以在Google Code找到原始版本。

- sakhunzai