jquery - 将来の日付または過去の日付の日付範囲ピッカー

Question

日付と終了日から選択するための 2 つの動的テキスト ボックスがあるフォームがあります。

1) 過去の日付のみ
2) 将来の日付のみ
3) 現在の日付と過去の日付
4) 現在の日付と将来の日付のみ
5) すべての日付

jQuery Date range Picker を使用する方法はありますか。または利用可能な他のプラグイン。

Answer 1

jQuery DatePicker ( jQuery UI から) を使用する場合は、API によって提供されるパラメーターを使用する必要があります。

1 つの日付ピッカーの日付を制限する

1. maxDateこのように設定し$( "#datepicker" ).datepicker({ maxDate: '-1d' });ます。ここでデモを参照してください: http://jqueryui.com/datepicker/#min-maxおよび API ドキュメントは次のとおりです: http://api.jqueryui.com/datepicker/#option-minDate
2. 将来の日付のみの制限の同じものminDateと値'-1d'
3. 値maxDateと同じ使用0
4. 値minDateと同じ使用0
5. minDate設定しないでください。maxDate

こちらの jsfiddle サンプルを参照してください: http://jsfiddle.net/dv8tf7oo/

さらに、これらの制限は、初期化時だけでなく、実行時にも追加できます。

基本の From / To フィールド

jQuery UI デモでデモを参照してください: http://jqueryui.com/datepicker/#date-range

$(function() {
    $("#from").datepicker({
        onClose: function(selectedDate) {
            $("#to").datepicker("option", "minDate", selectedDate );
        }
    });
    $("#to").datepicker({
        onClose: function(selectedDate) {
            $("#from").datepicker("option", "maxDate", selectedDate );
        }
    });
});

Answer 2

JQuery Datepicker には、特定の日付に設定したり、現在の日付に基づいて計算したりできる minDate および maxDate プロパティがあります。これらのいずれかまたは両方を使用して、要件を達成できます。

http://api.jqueryui.com/datepicker/#option-maxDateを参照してください

たとえば、次のように日付を 2014 年 1 月 28 日から今日までに制限します。

$("#datepicker").datepicker({
                changeMonth: true,
                changeYear: true,
                minDate: new Date(2014, 1-1, 28),
                maxDate: "+0D",
                dateFormat: "dd-MM-yy"
            });