jQuery UI：Datepickerで年の範囲のドロップダウンを100年に設定

Datepickerを使用すると、デフォルトでは年のドロップダウンに10年しか表示されません。さらに年を追加するには、ユーザーは昨年をクリックする必要があります。

ユーザーにデフォルトで大きなリストが表示されるように、初期範囲を100年に設定するにはどうすればよいですか？

    function InitDatePickers() {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            maxDate: '@maxDate',
            minDate: '@minDate'
        });
    }

ここのドキュメントhttp://api.jqueryui.com/datepicker/#option-yearRangeでこのオプションを使用して年の範囲を設定できます。

yearRange: '1950:2013', // specifying a hard coded year range

またはこのように

yearRange: "-100:+0", // last hundred years

ドキュメントから

デフォルト： "c-10：c + 10"

年のドロップダウンに表示される年の範囲：今日の年を基準（ "-nn：+ nn"）、現在選択されている年を基準（ "c-nn：c + nn"）、絶対（ "nnnn： nnnn "）、またはこれらの形式の組み合わせ（" nnnn：-nn "）。このオプションは、ドロップダウンに表示されるものにのみ影響を与えることに注意してください。選択できる日付を制限するには、minDateまたはmaxDateオプションを使用します。

これは私にとって完璧に機能しました。

ChangeYear：-trueに設定されている場合、当月のカレンダーに示されている前月または翌月のセルを選択できることを示します。このオプションは、options.showOtherMonthsをtrueに設定して使用します。

YearRange：-年のドロップダウンで年の範囲を指定します。（デフォルト値：「-10：+10」）

例：-

$(document).ready(function() {
    $("#date").datepicker({
    changeYear:true,
    yearRange: "2005:2015"
    });
});

参照：-jquery日付ピッカーで年の範囲を設定する

これは私がしました：

var dateToday = new Date();
var yrRange = dateToday.getFullYear() + ":" + (dateToday.getFullYear() + 50);
and then
yearRange : yrRange

どこ50現在の年の範囲です。

jQuery UI datepickerでこのオプションを使用して年の範囲を設定できます。

yearRange: "c-100:c+0", // last hundred years and current years

yearRange: "c-100:c+100", // last hundred years and future hundred years

yearRange: "c-10:c+10", // last ten years and future ten years

元の質問が投稿されてからどれくらい前かを考えると、これはこれを示唆するのに少し遅いですが、これは私がやったことです。

70年の範囲が必要でしたが、100年ではありませんが、ビジターがスクロールするには長すぎます。（jQueryは1年ごとにグループで実行しますが、それはほとんどの人にとっての悩みの種です。）

最初のステップは、datepickerウィジェットのJavaScriptを変更することでした。このコードをjquery-ui.jsまたはjquery-ui-min.js（最小化される場所）で見つけます。

for (a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+".datepicker._selectMonthYear('#"+
a.id+"', this, 'Y');\" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');\">";b<=g;b++)
 a.yearshtml+='<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
a.yearshtml+="</select>";

そして、これで置き換えてください：

a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+
 ".datepicker._selectMonthYear('#"+a.id+"', this, 'Y');
 \" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');
 \">";
for(opg=-1;b<=g;b++) {
    a.yearshtml+=((b%10)==0 || opg==-1 ?
        (opg==1 ? (opg=0, '</optgroup>') : '')+
        (b<(g-10) ? (opg=1, '<optgroup label="'+b+' >">') : '') : '')+
        '<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
}
a.yearshtml+="</select>";

これは、OPTGROUPタグで数十年（現在を除く）を囲みます。

次に、これをCSSファイルに追加します。

.ui-datepicker OPTGROUP { font-weight:normal; }
.ui-datepicker OPTGROUP OPTION { display:none; text-align:right; }
.ui-datepicker OPTGROUP:hover OPTION { display:block; }

これは、訪問者が基準年の上にマウスを置くまでの数十年を隠します。あなたの訪問者は何年でもすばやくスクロールできます。

これを自由に使用してください。コードで適切な属性を指定してください。

日付ピッカーを実装して生年月日を選択したかったのですがyearRange、自分のバージョン（1.5）では機能しないようで、変更に問題がありました。ここで最新のjquery-ui datepickerバージョンに更新しました：https : //github.com/uxsolutions/bootstrap-datepicker。

その後、この非常に役立つオンザフライツールを提供していることがわかりました。そのため、日付ピッカー全体を構成し、使用する必要がある設定を確認できます。

それが私がオプションを見つけた方法です

defaultViewDate

私が探していたオプションで、ウェブを検索した結果が見つかりませんでした。

したがって、他のユーザーの場合：誕生日ピッカーを使用して誕生日を変更したい場合は、次のコードオプションを使用することをお勧めします。

$('#birthdate').datepicker({
    startView: 2,
    maxViewMode: 2,
    daysOfWeekHighlighted: "1,2",
    defaultViewDate: { year: new Date().getFullYear()-20, month: 01, day: 01 }
});

日付ピッカーを開くときは、現在の年から20年前の年を選択するビューから始めます。