Question

我在2个单独的输入字段中有一个Datepicker和一个Timepicker，但我需要将2个字段输入组合成一个用于数据库调用。想知道我是否只能为两个控件使用1个输入字段？

首先调用datepicker，然后用户点击想要的日期并输入值，然后弹出时间戳并附加用户在第一个动作中选择的日期。

所以我有类似的东西

<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

您可以将事件绑定到datepicker的onClose（）事件。让它打开你的时间选择器。让datepicker写入输入的基值，并让timepicker将空格后面的值附加到相同的输入。

绑定日期选择器进行输入。
将方法打开到time-picker的.onClose（）事件。
将时间选择器值（带前面的空格）附加到输入值。

更新：以下是更新后的问题所带来的更新。

文档提供了一个关于如何将事件/动作绑定到datepicker结束的简短示例：

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

在此示例中，您可以使用“onClode：”之后的函数将值写入输入，并弹出时间戳。

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

Answer 3

不是jQuery，但它适用于具有时间的日历：JavaScript Date Time Picker。

只需将click事件绑定即可弹出：

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

我个人认为这更容易理解。但显然你有很多选项可以使用多个jquery插件来完成你的工作。

Answer 4

这是另一种选择：

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

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

Answer 5

您可以尝试将两个控件的输入组合成一个类似

的输入

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

Answer 6

请查看 link 。

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

，它将处于活动状态

您可以在 Google Code 找到原始的。

jQuery Datepicker和Timepicker用于相同的输入字段一个接一个地弹出

6 个答案: