web-dev-qa-db-ja.com

jQueryの日時ピッカー

私は日付と時刻の両方を処理できるまともなjQueryプラグインを探し回っていました。コアUIのDatePickerは素晴らしいですが、残念ながら私も時間をかけられるようにする必要があります。

私はDatePickerが時代とともに機能するためのいくつかのハックを見つけました、しかしそれらはどれもかなり洗練されていないようで、グーグルは何も生み出していません。

使用可能なインターフェースを備えた単一のUIコントロールで日付と時刻を選択するための優れたjQueryプラグインはありますか？

javascriptjquerydatepickerdatetimepicker
245
Chelsea

はるかに簡単で最も簡単なDateTimeピッカーのオプションは http://trentrichardson.com/examples/timepicker/ です。

これはjQuery UI Datepickerの拡張であるため、同じテーマをサポートします。同様に、同様の構文で動作します。これはjQuery UI imoにパッケージ化されています。

251
xordon

@ David、推薦をありがとう！ @fluid_chelsea、私はちょうどPrototypeの代わりにjQueryを使い、そしてはるかに改良されたインターフェースを持っているAny + Time（TM）バージョン3.xをリリースしました。

http://www.AMA3.com/anytime/

どんな問題でも、私のウェブサイトのコメントリンクを通して私に知らせてください！

46
Andrew M. Andrews III

私の考えでは、日付と時間は、ユーザーにとって最も使いやすく効率的に入力できるように、2つの別々の入力ボックスとして扱うべきです。一度に1つずつ入力することをお勧めします。

私はコア UI DatePicker と以下のタイムピッカーを使います。

これは、Googleカレンダーが使用しているものに触発されています。

jQueryのtimePicker：
例： http://labs.perifer.se/timedatepicker/
githubでプロジェクト： https://github.com/perifer/timePicker

私はそれがすべての選択肢の中で最高であることがわかりました。ユーザーは速く入力することができます、それはきれいに見えます、単純で、そしてユーザーが分まで特定の時間を入力することを可能にします。

シモンズ：私の見解では：スライダー（いくつかの代替タイムピッカーによって使用される）はあまりにも多くのクリックを取り、ユーザーからのマウスの正確さを要求する（これは入力を遅くする）。

14
Magne

日付ピッカーに関する私の最も良い経験は、プロトタイプベースの AnyTime です。私はそれがjQueryではないことを知っていますが、それでもあなたにとって妥協の価値があるかもしれません。私は全くプロトタイプを知っていません、そしてそれはまだそれを使うのに十分に簡単です。

私が見つけた1つの警告：それはいくつかのブラウザでは前方互換性がありません。つまり、Chrome上の新しいバージョンのプロトタイプでは動作しませんでした。

13
David Berger

ここに情報を追加するために、The Fluid Projectにはたくさんの日付や時間ピッカー の概要 をまとめたNice wikiの記事があります。

7
Jaxidian

私は最近これを調査しましたが、まともなタイムピッカーも含むまともな日付ピッカーをまだ見つけていません。私が使用してしまったのは eyeconのすばらしいDatePicker で、時間の経過とともに2つの単純なドロップダウンが表示されました。私は Timepickr.js を使いたくなりましたが、本当にいいアプローチのようです。

4
deceze

私は同じ問題に出くわしました。私は実際に私が使っているサーバーサイドのプログラミングを開発しました、しかし私はあなたを手助けしようと試みるために迅速な調査をして、これを見つけました。

大丈夫に思えますが、あまりソースを見ていませんでしたが、純粋にJavaScriptのようです。

見て取ります：

http://www.rainforestnet.com/datetimepicker/datetimepicker.htm

これはデモページへのリンクです。

http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm

がんばろう

3
Michael Stone

これは私がユーザーに1つのdatetimepickerを選択させ、datetimeを設定させ、他のdatetimepickerにその時間にOne Minuteを追加させるために使用するコードです。

私はこれをカスタムの薬物コントロールに必要としました…。

とにかく、私はどこに答えを見つけることができなかったのでそれは他の誰かを助けるかもしれないと思った...

（少なくとも完全な答えではありません）

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()));
        }
    });
1
carlos martini

次のJavaScriptプラグインを見てください。

Javascript Calendar with date and time

可能な限り単純になるようにしました。それはまだ初期の頃です。改善できるように、フィードバックをお知らせください。

1
Joe

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

私はそれをポップアップするためにクリックイベントをバインドしました：

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

私はこのように一つの機能を作ります。

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

0
dhaniBinZain