jQuery Datepicker 和 Timepicker 用于同一输入字段依次弹出

Question

我在 2 个单独的输入字段中有一个日期选择器和一个时间选择器，但我需要将 2 个字段输入合并为一个以进行数据库调用。 想知道两个控件是否只能使用 1 个输入字段？

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

我正在使用 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>

Answer 1

我想推荐 Any+Time(TM)，您可以在其中组合日期/时间在单个字段中使用单个、易于使用（且快速！）的日期/时间组合选择器。

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
  }
});

Answer 3

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

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

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

就我个人而言，我发现这更容易理解。 但显然你有很多选择，有多个 jquery 插件可以完成你的工作。

Answer 4

您可以尝试将两个控件的输入合并为一个，例如

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

Answer 5

这是一个替代方案：

http://www.r-ip.ru/dev/日期时间选择器/index.html

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

Answer 6

请查看链接。

我更新了一些布局问题并添加了第二个滑块，如果 {showTime:true, time24h:true} 则该

滑块将处于活动状态。您可以在 Google 代码。