jQuery UI Datepicker: yearRange オプションの使い方
jQuery UI Datepickerで表示される年数について
yearRange オプションは、以下の2つの形式で指定できます。
年数範囲を直接指定する
$("#datepicker").datepicker({
yearRange: "1900:2050"
});
この例では、1900年から2050年までの年が表示されます。
現在年からの相対的な年数範囲を指定する
$("#datepicker").datepicker({
yearRange: "-10:+10"
});
その他のオプション
yearRange オプション以外にも、以下のオプションを使用して、表示される年数を調整することができます。
- minDate: 最小選択可能な日付
- changeYear: 年を選択するためのプルダウンリストを表示するかどうか
これらのオプションを組み合わせることで、より柔軟に表示される年数を設定することができます。
例
$("#datepicker").datepicker({
yearRange: "1950:2020",
changeYear: true
});
jQuery UI DatepickerのyearRange オプションを使用することで、表示される年数を簡単に調整することができます。上記の解説を参考に、ニーズに合わせて設定してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery UI Datepicker サンプル</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<input type="text" id="datepicker">
<script>
$("#datepicker").datepicker({
yearRange: "1950:2020",
changeYear: true
});
</script>
</body>
</html>
このコードを保存してHTMLファイルとして開き、ブラウザで表示すると、以下のカレンダーが表示されます。
[画像：1950年から2020年までの年が表示されるカレンダー]
コード解説
yearRangeオプションで、表示される年数を1950年から2020年までに設定しています。
上記以外にも、さまざまなオプションを設定することで、カレンダーの表示をカスタマイズすることができます。詳細は、jQuery UI Datepickerのドキュメントを参照してください。
jQuery UI Datepickerで年数を表示するその他の方法
beforeShowDay オプションは、カレンダーの日付が描画される前に呼び出されるイベントハンドラです。このイベントハンドラを使用して、特定の日付のセルに年を表示することができます。
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var year = date.getFullYear();
return [true, "", year];
}
});
この例では、各日付セルの右側に年が表示されます。
$("#datepicker").datepicker({
onChangeMonthYear: function(year, month) {
$("#year").text(year);
$("#month").text(month);
}
});
この例では、カレンダーの上部に現在の月と年が表示されます。
独自のテンプレートを使用する
jQuery UI Datepickerは、テンプレートを使用してカレンダーの外観をカスタマイズすることができます。独自のテンプレートを作成することで、年を表示する位置や形式を自由に設定することができます。
jQuery UI Datepickerには、年数を表示するさまざまな方法があります。ニーズに合わせて最適な方法を選択してください。
jquery datepicker
