web-dev-qa-db-ja.com

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

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

ユーザーがデフォルトで大きなリストを表示するように初期範囲を100年に設定する方法を教えてください。

enter image description here

    function InitDatePickers() {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            maxDate: '@maxDate',
            minDate: '@minDate'
        });
    }
jqueryjquery-uijquery-ui-datepicker
294
BahaiResearch.com

このオプションを使用してドキュメントごとに年の範囲を設定できます 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オプションを使用してください。

547
ᾠῗᵲᄐᶌ

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

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

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

例： - 

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

参照： - jquery datepickerで年の範囲を設定してください

16
Ranju

これは私がしました：

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

50は、現在の年からの範囲です。

5
learner88

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
1
Sanjib Debnath

元の質問が投稿されたのがどれほど前かを考えると、これを提案するには少し時間がかかりますが、これは私がしたことです。

私は70年の範囲を必要としました、それは100ほどではありませんが、訪問者がスクロールするにはまだ長すぎる年です。 （jQueryは年を追ってグループ化されていますが、それはほとんどの人にとってパッチの問題です。）

最初のステップは、日付ピッカーウィジェットの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; }

これは、訪問者が基準年を超えてマウスが落ち着くまで、数十年を隠します。あなたの訪問者は何年でも素早くスクロールできます。

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

0
Garison Piatt

私は生年月日を選択するために日付ピッカーを実装したいと思っていましたが、私のバージョン（1.5）ではうまく動かないようでしたのでyearRangeを変更するのに苦労しました。私はここで最新の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年前の年を選択するビューから始めます。

0
AlexioVay