jQueryで簡単操作！Datepickerのカレンダーに100年の年範囲ドロップダウンを追加

2024-04-24

jQuery UI Datepicker で年範囲ドロップダウンを 100 年に設定する方法

jQuery UI Datepicker は、Web ページに日付入力フィールドを追加するための便利なプラグインです。デフォルトでは、カレンダー表示と前月/翌月への移動機能が備わっていますが、さらに年範囲を制限してドロップダウンメニューから年を選択できるようにすることもできます。

手順

jQuery UI Datepicker のライブラリをロードする

<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

日付入力フィールドに Datepicker を適用する
```
<input type="text" id="datepicker">
```
yearRange オプションを使用して年範囲を設定する
```
$( "#datepicker" ).datepicker({
    changeYear: true,
    yearRange: "-100:+0" // 過去100年～現在まで
});
```
このコードは、changeYear オプションを true に設定して年選択機能を有効にし、yearRange オプションで年範囲を過去100年～現在までと指定しています。

補足

yearRange オプションは、以下の形式で記述できます。
- -100:+0: 過去100年～現在まで
- 1920:2024: 1920年～2024年
minDate と maxDate オプションを使用して、選択可能な最小/最大日付をさらに制限することもできます。
ドロップダウンメニューに表示される年数は、ブラウザのウィンドウ幅によって調整される場合があります。

関連技術

jQuery
Web 開発

上記以外にも、jQuery UI Datepicker には様々なオプションやカスタマイズ方法があります。詳細は公式ドキュメントを参照してください。

jQuery UI Datepicker で年範囲ドロップダウンを 100 年に設定するサンプルコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Datepicker 年範囲設定</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
</head>
<body>
  <input type="text" id="datepicker">

  <script>
    $( "#datepicker" ).datepicker({
      changeYear: true,
      yearRange: "-100:+0" // 過去100年～現在まで
    });
  </script>
</body>
</html>

JavaScript

$( "#datepicker" ).datepicker({
  changeYear: true,
  yearRange: "-100:+0" // 過去100年～現在まで
});

解説

<input type="text" id="datepicker">: 日付入力フィールドを作成します。
<link rel="stylesheet" ...>: jQuery UI Datepicker の CSS ファイルをロードします。
<script src="..."></script>: jQuery と jQuery UI Datepicker の JavaScript ファイルをロードします。

$( "#datepicker" ).datepicker(): Datepicker を #datepicker 要素に適用します。
changeYear: true: 年選択機能を有効にします。
yearRange: "-100:+0": 年範囲を過去100年～現在までに設定します。

実行結果

このコードを実行すると、以下のようになります。

入力フィールドをクリックすると、カレンダーが表示されます。
カレンダーの上部には、年と月の選択ドロップダウンメニューが表示されます。
ドロップダウンメニューから、過去100年～現在までの任意の年を選択できます。

このコードは、jQuery UI Datepicker の最新バージョン (1.13.1) を使用しています。古いバージョンの場合は、オプション名が異なる場合があります。
コードをカスタマイズして、独自の要件に合わせて調整することができます。

jQuery UI Datepicker で年範囲ドロップダウンを 100 年に設定するその他の方法

$( "#datepicker" ).datepicker({
  changeYear: true,
  minDate: new Date(new Date().getFullYear() - 100, 0, 1),
  maxDate: new Date()
});

このコードは、minDate オプションと maxDate オプションを使用して、選択可能な最小/最大日付を設定することで、年範囲を過去100年～現在までに制限しています。

yearRange オプションと beforeShow イベントを使用する

$( "#datepicker" ).datepicker({
  changeYear: true,
  beforeShow: function(input) {
    var minYear = new Date().getFullYear() - 100;
    var maxYear = new Date().getFullYear();

    $(input).datepicker("option", "yearRange", minYear + ":" + maxYear);
  }
});