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>
Any + Time(TM) をお勧めします。この場合、単一のフィールドの日付/時刻を単一の使いやすい(そしてすばやく!)日付/時刻と組み合わせることができます。コンボピッカー。
イベントを日付ピッカーのonClose()イベントにバインドできます。タイムピッカーを開いてください。 datepickerに入力の基本値を書き込み、timepickerに同じ入力のスペースに続いてその値を追加させます。
更新:以下は、更新された質問に起因する更新です。
ドキュメントは、イベント/アクションを日付ピッカーの終了にバインドする方法の簡単な例を示しています。
$('.selector').datepicker({
onClose: function(dateText, inst) { ... }
});
この例では、「onClode:」に続く関数を使用して値を入力に書き込み、タイムピッカーをポップアップできます。
$(".selector").datepicker({
onClose: function(dateText, inst) {
$(".selector").val(dateText);
// Raise Timepickr
}
});
JQueryではありませんが、時間のあるカレンダーでうまく機能します: JavaScript Date Time Picker 。
クリックイベントをバインドしてポップアップします。
$("#date").click(function() {
NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});
個人的には、これを理解する方がはるかに簡単です。しかし、明らかにあなたはあなたの仕事をするために利用可能な複数のjqueryプラグインを持つ非常に多くのオプションを持っています。
リンクをチェックアウトしてください。
レイアウトの問題を更新し、2番目のスライダーを追加しました。これは{showTime:true, time24h:true}
オリジナルはGoogle Codeにあります。
ここに代替があります:
http://www.r-ip.ru/dev/datetimepicker/index.html
$('#datetimepicker').datetimepicker({
dateFormat: 'yy-mm-dd',
timeFormat: ' hh:ii:ss'
});
両方のコントロールからの入力を1つのように組み合わせて試すことができます
$("#datetime").focus(function() {
var mydate = $("#date").val();
var mytime = $("#time").val();
if(mydate && mytime && !this.value) {
this.value = mydate + " " + mytime;
}
});