jQuery Datepicker和Timepicker相同的輸入字段彈出一個接一個

我有一個Datepicker和一個Timepicker在2個單獨的輸入字段，但我需要將2個字段輸入合併爲一個數據庫調用。想知道我是否只能在兩個控件上使用1個輸入字段？jQuery Datepicker和Timepicker相同的輸入字段彈出一個接一個

第一次調用日期選擇器，用戶將點擊想要的日期並輸入數值，然後時間選擇器會彈出並追加用戶在第一個動作中選擇的日期。

我使用的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>

來源

2009-06-22 Phill Pafford

啊，sod。我搞砸了進入鏈接那裏，這裏又是... [jQuery Timepicker mod]（http://puna.net.nz/timepicker.htm） – Fentex 2009-12-13 00:52:33

這裏有一個選擇：

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

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

來源

2009-06-22 17:27:37 AlexC

該頁面上的Date Time選擇器具有作者要求的內容。 .. – 2009-06-22 17:34:12

這沒有說明。另外，提供的鏈接上的時間選擇器的界面非常糟糕。花了我幾秒鐘的時間才發現點擊一個值會增加它。無論哪種方式，我已經取消了我的倒票。 – Sampson 2009-06-22 17:38:08

我同意它具有我所要求的功能，但不支持我正在使用的插件。你提供的解決方案是好的，但我會同意時間控制有點混亂。非常感謝 – 2009-06-22 19:28:06

您可以將事件綁定到datepicker的onClose（）事件。讓它打開你的時間選擇器。讓datepicker寫入輸入的基本值，並讓timepicker將空格後的值附加到相同的輸入。

綁定日期選擇器來輸入。
附加方法以打開timepicker到date-picker的.onClose（）事件。
將時間選取器值（具有前面的空格）附加到輸入值。

更新：以下是由更新後的問題產生的更新。

的文檔提供了有關如何將事件/動作綁定到日期選擇器的關閉一個簡單的例子：

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

在這個例子中，你可以使用你的函數下面的「onClode：」寫值輸入，並彈出時間選擇器。

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

來源

2009-06-22 17:31:35 Sampson

你可以嘗試從兩個控件的輸入組合成一個像

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

來源

2009-06-22 17:38:52 dhaval

我想推薦Any+Time(TM)，在其中您可以在單場與單個組合的日期/時間，易於使用（和快速！）日期/時間組合選取器。

來源

2010-04-01 14:23:44

請結帳link。

我已經更新了一些佈局的問題，並添加第二滑塊，這將是積極的，如果{showTime:true, time24h:true}

你可以找到Google Code原來的一個。

來源

2010-09-15 15:07:32 sakhunzai

不是jQuery，但它適用於時間日曆：JavaScript Date Time Picker。

只需綁定點擊事件流行起來：

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

個人而言，我覺得這更容易跟蹤。但顯然你有很多選擇，可以使用多個jquery插件來完成你的工作。

來源

2011-09-18 23:19:32

jQuery Datepicker和Timepicker相同的輸入字段彈出一個接一個

回答

相關問題