319

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

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

ここに画像の説明を入力してください

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

6 に答える 6

604

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オプションを使用します。

于 2012-12-13T17:30:00.240 に答える
22

次のことを試してください：-

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

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

例：-

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

参照： -jquerydatepickerで年の範囲を設定する

于 2015-02-28T06:42:41.360 に答える
6

これは私がしました：

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

ここ50で、は今年からの範囲です。

于 2014-11-26T02:13:31.730 に答える
6

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
于 2019-01-04T06:38:04.333 に答える
2

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

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

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

defaultViewDate

これは私が探していたオプションであり、Webを検索しても結果が見つかりませんでした。

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

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

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

于 2016-10-26T07:59:18.743 に答える
1

元の質問が投稿されたのはどれくらい前かを考えると、これを提案するのは少し遅いですが、これは私がしたことです。

私は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; }

これにより、訪問者が基準年にマウスを合わせるまでの数十年が隠されます。訪問者は、任意の年数をすばやくスクロールできます。

これを自由に使用してください。コードに適切な帰属を付けてください。

于 2016-08-10T16:43:32.323 に答える