16

2つの別々の入力フィールドにDatepickerとTimepickerがありますが、データベース呼び出しのために2つのフィールド入力を1つに結合する必要があります。両方のコントロールに1つの入力フィールドしか使用できないかどうか知りたいですか？

最初に日付ピッカーを呼び出すと、ユーザーは目的の日付をクリックして値を入力し、次にタイムピッカーがポップアップして、ユーザーが最初のアクションで選択した日付を追加します。

jQueryUIDatepickerおよび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>
4

6 に答える 6

16

Any+Time(TM)をお勧めします。これは、1 つのフィールド内の日付/時刻を、1 つの使いやすい (そして迅速な!) 日付/時刻コンボ ピッカーと組み合わせることができます。

于 2010-04-01T14:23:44.253 に答える
1

イベントを日付ピッカーの onClose() イベントにバインドできます。タイムピッカーを開いてもらいます。日付ピッカーに入力のベース値を書き込み、タイムピッカーにその値をスペースの後に同じ入力に追加させます。

  1. 日付ピッカーを入力にバインドします。
  2. date-picker の .onClose() イベントに timepicker を開くメソッドをアタッチします。
  3. 入力値にタイム ピッカー値を (前にスペースを付けて) 追加します。

更新済み: 以下は、更新された質問の結果として更新されたものです。

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

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

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

$(".selector").datepicker({
  onClose: function(dateText, inst) {
    $(".selector").val(dateText);
    // Raise Timepickr
  }
});
于 2009-06-22T17:31:35.747 に答える
1

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

クリック イベントをバインドしてポップアップするだけです。

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

個人的には、これを実行するのがはるかに簡単だと思います。しかし、明らかに、仕事をするために利用できる複数のjqueryプラグインを備えた非常に多くのオプションがあります.

于 2011-09-18T23:19:32.120 に答える
0

代替案は次のとおりです。

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

$('#datetimepicker').datetimepicker({ 
  dateFormat: 'yy-mm-dd',
  timeFormat: ' hh:ii:ss' 
});
于 2009-06-22T17:27:37.810 に答える
0

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

いくつかのレイアウトの問題を更新し、次の場合にアクティブになる 2 つ目のスライダーを追加しました。{showTime:true, time24h:true}

元のものはGoogle Codeにあります。

于 2010-09-15T15:07:32.260 に答える
0

両方のコントロールからの入力を 1 つに結合してみることができます。

$("#datetime").focus(function() {
    var mydate = $("#date").val();
    var mytime = $("#time").val();
    if(mydate && mytime && !this.value) {
        this.value = mydate + " " + mytime;
    }
});
于 2009-06-22T17:38:52.367 に答える