web-dev-qa-db-ja.com

同じ入力フィールドのjQuery DatepickerとTimepickerが次々とポップアップする

2つの別々の入力フィールドにDatepickerとTimepickerがありますが、データベース呼び出しのために2つのフィールド入力を1つに結合する必要があります。両方のコントロールに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>
jquerydatepickerdatetimepickertimepicker
15
Phill Pafford

Any + Time（TM） をお勧めします。この場合、単一のフィールドの日付/時刻を単一の使いやすい（そしてすばやく！）日付/時刻と組み合わせることができます。コンボピッカー。

16
Andrew M. Andrews III

イベントを日付ピッカーのonClose（）イベントにバインドできます。タイムピッカーを開いてください。 datepickerに入力の基本値を書き込み、timepickerに同じ入力のスペースに続いてその値を追加させます。

  1. 日付ピッカーを入力にバインドします。
  2. 日付ピッカーの.onClose（）イベントにタイムピッカーを開くメソッドをアタッチします。
  3. 入力値にタイムピッカー値（前にスペースがある）を追加します。

更新：以下は、更新された質問に起因する更新です。

ドキュメントは、イベント/アクションを日付ピッカーの終了にバインドする方法の簡単な例を示しています。

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

この例では、「onClode：」に続く関数を使用して値を入力に書き込み、タイムピッカーをポップアップできます。

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

JQueryではありませんが、時間のあるカレンダーでうまく機能します： JavaScript Date Time Picker 。

クリックイベントをバインドしてポップアップします。

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

個人的には、これを理解する方がはるかに簡単です。しかし、明らかにあなたはあなたの仕事をするために利用可能な複数のjqueryプラグインを持つ非常に多くのオプションを持っています。

1
Bat_Programmer

リンクをチェックアウトしてください。

レイアウトの問題を更新し、2番目のスライダーを追加しました。これは{showTime:true, time24h:true}

オリジナルはGoogle Codeにあります。

0
sakhunzai

ここに代替があります：

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

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

両方のコントロールからの入力を1つのように組み合わせて試すことができます

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