日付と時刻の両方を処理できる適切なjQueryプラグインを探していました。コアUI DatePickerはすばらしいですが、残念ながら私も時間をかけることができる必要があります。
DatePickerが時間とともに機能するためのハッキングをいくつか見つけましたが、それらはすべて非常に洗練されていないようで、Googleは何もうまくいきません。
使用可能なインターフェイスを持つ単一のUIコントロールで日付と時刻を選択するための優れたjQueryプラグインはありますか？
回答:
断然素晴らしくて最も単純なDateTimeピッカーオプションはhttp://trentrichardson.com/examples/timepicker/です。
これはjQuery UI Datepickerの拡張なので、同じテーマをサポートし、同様に機能します。同様の構文などです。これはjQuery UI imoと一緒にパッケージ化する必要があります。
@David、推薦ありがとうございます！@fluid_chelsea、私はAny + Time（TM）バージョン3.xをリリースしました。これは、Prototypeの代わりにjQueryを使用し、大幅に改善されたインターフェースを備えているので、今あなたのニーズを満たしていることを願っています。
問題があれば、ウェブサイトのコメントリンクからお知らせください。
私の見解では、日付と時刻は、ユーザーにとって最も使いやすく効率的なものにするために、2つの別個の入力ボックスとして処理する必要があります。ユーザーが一度に1つずつ入力できるようにするのが良い原則です。
コアUIのDatePickerと次の時間ピッカーを使用しています。
これは、Googleカレンダーが使用するものに触発されています。
jQuery timePicker：
例：
github上のhttp://labs.perifer.se/timedatepicker/
プロジェクト：https : //github.com/perifer/timePicker
私はそれがすべての選択肢の中で最高であることがわかりました。ユーザーは高速で入力でき、見た目がきれいで、シンプルで、特定の時間まで分単位で入力できます。
PS：私の見解では、スライダー（一部の代替時間ピッカーで使用）はクリック数が多すぎ、ユーザーからのマウスの精度が必要です（入力が遅くなります）。
日付ピッカーでの私の最高の経験は、プロトタイプベースのAnyTimeを使用することです。私はそれがjQueryではないことを知っていますが、それでもあなたにとって妥協する価値があるかもしれません。私はプロトタイプをまったく知りません。それでも、作業するのは簡単です。
私が見つけた警告の1つ：一部のブラウザーでは前方互換性がありません。つまり、Chromeの新しいバージョンのプロトタイプでは動作しませんでした。
私は最近これを調査しましたが、まともな時間ピッカーを含むまともな日付ピッカーをまだ見つけていません。私が最終的に使用したのは、アイコンの素晴らしいDatePickerで、時間の2つの単純なドロップダウンがありました。私はTimepickr.jsを使いたくなりましたが、本当に素晴らしいアプローチのように見えます。
同じ問題に遭遇しました。私は実際に使用してサーバー側のプログラミングを開発しましたが、簡単に検索してあなたを助け、これを見つけました。
大丈夫そうですが、ソースをあまり見ていませんでしたが、純粋にJavaScriptのようです。
見て取ります：
http://www.rainforestnet.com/datetimepicker/datetimepicker.htm
ここにデモページのリンクがあります：
http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm
幸運を
これは、ユーザーが1つのdatetimepickerを選択し、datetimeを設定し、他のdatetimepickerにその時間に1分を追加させるために使用するコードです。
私はこれをカスタムの投薬管理のために必要としました...
とにかく、オンラインで答えを見つけることができなかったので、他の人の役に立つかもしれないと思いました...
（少なくとも完全な答えではありません）
60000を追加すると、1分が追加されることに注意してください。（60 * 1000ミリ秒）
$('.frdtPicker').datetimepicker({
onClose: function(dateText, inst) {
var endDateTextBox = $('.todtPicker');
if (endDateTextBox.val() != '') {
var testStartDate = new Date(dateText);
var testEndDate = new Date(endDateTextBox.val());
if (testStartDate > testEndDate) {
var testStartDate = new Date(dateText).getTime() + 60000;
var testStartDate2 = new Date(testStartDate);
endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
}
}
else {
var testStartDate = new Date(dateText).getTime() + 60000;
var testStartDate2 = new Date(testStartDate);
endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
}
$('.frdtPicker').val(dateText); //endDateTextBox.val());
},
onSelect: function(selectedDateTime) {
var start = $(this).datetimepicker('getDate');
$('.todtPicker').datetimepicker('option', 'minDate', new Date(start.getTime()));
}
});次のJavaScriptプラグインを見てください。
できるだけシンプルにしています。しかし、それはまだ初期の段階です。私はそれを改善できるようにフィードバックを知らせてください。
jQueryではありませんが、時間のあるカレンダー（JavaScript Date Time Picker）でうまく機能します。
クリックイベントをバインドしてポップアップします。
$(".arrival-date").click(function() {
NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});私はこのような1つの関数を作成します。
function getTime()
{
var date_obj = new Date();
var date_obj_hours = date_obj.getHours();
var date_obj_mins = date_obj.getMinutes();
var date_obj_second = date_obj.getSeconds();
var date_obj_time = "'"+date_obj_hours+":"+date_obj_mins+":"+date_obj_second+"'";
return date_obj_time;
}次に、jQuery UIの日付ピッカーを次のように使用します。
$("#selector").datepicker( "option", "dateFormat", "yy-mm-dd "+getTime()+"" );だから、私はこのような値を取得します：2010-10-31 12:41:57
思い通りに機能するものを見つけるのに苦労していたので、私が作成しました。私はソースを維持し、バグが発生したときに修正し、無料サポートを提供します。
http://www.yart.com.au/Resources/Programming/ASP-NET-JQuery-Date-Time-Control.aspx