web-dev-qa-db-ja.com

jQueryの日付ピッカー年が表示されます

JQuery datepickerを使用すると、表示される年の範囲をどのように変更できますか？ jQuery UIサイトでは、デフォルトは「現在の年が表示される前と後の10年」です。私はこれを誕生日の選択に使用したいと思いますが、今日は10年前にはダメです。これはjQuery datepickerで実行できますか、別のソリューションを使用する必要がありますか？

datepickerデモへのリンク： http://jqueryui.com/demos/datepicker/#dropdown-month-year

jquerydatepicker
78
John Boker

デモページを少し下に見ると、「日付ピッカーの制限」セクションが表示されます。ドロップダウンを使用して、「Year dropdown shows last 20 years "demo、ソースを表示：

$("#restricting").datepicker({ 
    yearRange: "-20:+0", // this is the option you're looking for
    showOn: "both", 
    buttonImage: "templates/images/calendar.gif", 
    buttonImageOnly: true 
});

同じことをしたいと思うでしょう（明らかに-20から-100 か何か）。

165
Shog9

年または月の選択ボックスを表示しないのはなぜですか？

$( ".datefield" ).datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange:'-90:+0'
});
40
Plippie

誰も書いていないのは、ハードコーディングされた日付範囲を設定できることです。

例えば：

yearRange: "1901:2012"

これを行わないことをお勧めしますが、完全に有効なオプションです（たとえば、「1963：1984」など、カタログで特定の年を合法的に探している場合に便利です）。

10
Warren Sergent

生年月日フィールド（および私が使用するもの）に最適なのは、Shog9が言ったことに似ていますが、より具体的なDOBの例を示します。

$(".datePickerDOB").datepicker({ 
    yearRange: "-122:-18", //18 years or older up to 122yo (oldest person ever, can be sensibly set to something much smaller in most cases)
    maxDate: "-18Y", //Will only allow the selection of dates more than 18 years ago, useful if you need to restrict this
    minDate: "-122Y"
});

将来のグーグルがこれが役に立つことを願っています:)。

6
Maverick

@ Shog9が投稿したものに加えて、beforeShowDay：コールバック関数で日付を個別に制限することもできます。

日付を取り、ブール配列を返す関数を提供します。

"$(".selector").datepicker({ beforeShowDay: nationalDays}) 
natDays = [[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], [4, 27, 'za'], 
[5, 25, 'ar'], [6, 6, 'se'], [7, 4, 'us'], [8, 17, 'id'], [9, 7, 
'br'], [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']]; 
function nationalDays(date) { 
    for (i = 0; i < natDays.length; i++) { 
      if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == 
natDays[i][1]) { 
        return [false, natDays[i][2] + '_day']; 
      } 
    } 
  return [true, '']; 
}
5
JamesSugrue
 $("#DateOfBirth").datepicker({
        yearRange: "-100:+0",
        changeMonth: true,
        changeYear: true,
    });

yearRange： '1950：2013'、//ハードコーディングされた年の範囲を指定するか、この方法で

yearRange： "-100：+0"、//過去100年

年と月の選択のドロップダウンを表示するのに役立ちます。

3
Manish

au、nz、などは、国の日付が表示されている国（オーストラリア、ニュージーランド、アイルランド、...）の国コードです。コードに見られるように、これらの値は「_day」と結合され、CSSスタイルとしてその日に適用されるように戻されます。対応するスタイルは以下に示す形式で、その日のテキストを邪魔にならないように移動し、それを国旗の画像に置き換えます。

.au_day {
  text-indent: -9999px;
  background: #eee url(au.gif) no-repeat center;
}

新しいスタイルで返される「false」値は、これらの日が選択されない可能性があることを示します。

2
kbwood

これもうまくいくと思う

$(function () {
    $(".DatepickerInputdob").datepicker({
        dateFormat: "d M yy",
        changeMonth: true,
        changeYear: true,
        yearRange: '1900:+0',
        defaultDate: '01 JAN 1900'
    });
1
Himansz