245

日付と時刻の両方を処理できる適切な jQuery プラグインを探しています。コア UIDatePickerは素晴らしいのですが、残念ながら私も時間を割く必要があります。

DatePicker が時間を処理するためのいくつかのハックを見つけましたが、それらはすべてかなり洗練されていないように見え、Google は何も良いものを見つけていません。

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

4

12 に答える 12

251

最も優れた最も単純なDateTimeピッカーオプションはhttp://trentrichardson.com/examples/timepicker/です。

これはjQueryUIDatepickerの拡張であるため、同じテーマをサポートし、非常に同じように機能し、同様の構文などをサポートします。これは、jQueryUIimoと一緒にパッケージ化する必要があります。

于 2010-09-12T09:08:49.410 に答える
46

@デビッド、推薦してくれてありがとう！@fluid_chelsea さん、Prototype の代わりに jQuery を使用し、インターフェイスが大幅に改善された Any+Time(TM) バージョン 3.x をリリースしました。

http://www.ama3.com/anytime/

何か問題があれば、私のウェブサイトのコメント リンクからお知らせください。

于 2009-12-28T15:02:23.657 に答える
14

私の見解では、ユーザーが最も使いやすく効率的に入力できるようにするには、日付と時刻を 2 つの別個の入力ボックスとして処理する必要があります。ユーザーが一度に 1 つのことを入力できるようにすることは、良い原則です。

コアUI の DatePickerと、次のタイム ピッカーを使用します。

これは、Google カレンダーが使用するものに触発されたものです。

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

私はそれがすべての選択肢の中で最高であることがわかりました. ユーザーはすばやく入力でき、見栄えがよく、シンプルで、特定の時間を分単位で入力できます。

PS: 私の見解では、スライダー (一部の代替時間ピッカーで使用されます) はクリックが多すぎ、ユーザーにマウスの精度が必要です (入力が遅くなります)。

于 2011-08-18T13:27:13.833 に答える
13

日付ピッカーでの私の最高の経験は、プロトタイプベースのAnyTimeです。それが jQuery ではないことはわかっていますが、それでも妥協する価値があるかもしれません。私はプロトタイプをまったく知りませんが、それでも作業は簡単です。

私が見つけた 1 つの警告: 一部のブラウザーでは前方互換性がありません。つまり、Chrome の新しいバージョンのプロトタイプでは機能しませんでした。

于 2009-08-07T15:14:19.967 に答える
7

ここに情報を追加するだけで、The Fluid Project には、ここに多数の日付および/または時刻ピッカーの概要をまとめた素晴らしい wiki の記事があります。

于 2010-03-26T20:50:52.117 に答える
4

私はこれを最近調査しましたが、適切な時間ピッカーも含む適切な日付ピッカーをまだ見つけていません。私が最終的に使用したのは、 eyecon の素晴らしい DatePickerで、時間の 2 つの単純なドロップダウンがありました。私はTimepickr.jsを使用したくなりましたが、本当に素晴らしいアプローチのようです。

于 2009-08-09T01:44:01.110 に答える
3

私は同じ問題に遭遇しました。私は実際にサーバー側プログラミングを使用して開発しましたが、あなたを助けようと簡単に検索して、これを見つけました.

ソースをあまり見ていませんが、純粋に JavaScript のようです。

見て取ります：

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

デモページのリンクは次のとおりです。

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

幸運を

于 2009-08-07T15:02:39.410 に答える
1

これは、ユーザーに1つのdatetimepickerを選択させ、日時を設定し、他の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()));
        }
    });
于 2012-05-08T20:48:10.837 に答える
1

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

日時付きの Javascript カレンダー

できるだけシンプルにしました。しかし、それはまだ初期の段階です。改善できるよう、フィードバックをお知らせください。

于 2012-08-02T15:03:02.423 に答える
1

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

クリックイベントをバインドしてポップアップさせました：

$(".arrival-date").click(function() {
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});
于 2011-01-26T19:34:52.177 に答える
0

私はこのような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

于 2010-10-15T05:44:28.383 に答える
-4

思い通りに機能するものを見つけるのに苦労したので、書きました。ソースを維持し、バグが発生したときに修正し、無料のサポートを提供します。

http://www.yart.com.au/Resources/Programming/ASP-NET-JQuery-Date-Time-Control.aspx

于 2010-09-08T02:07:17.560 に答える