jQuery Datepicker 年範囲設定
2024-10-30
jQuery UI Datepicker は、カレンダー形式で日付を選択するための便利なプラグインです。このプラグインのオプションの一つとして、表示される年数を設定することができます。
オプションの使い方
$(function() {
$("#datepicker").datepicker({
yearRange: "2020:2030"
});
});
このコードでは、yearRange オプションを使って、2020年から2030年までの年を表示するように設定しています。
- 文字列
指定した範囲の年を表示します。文字列はコロン(:)で区切って最小年と最大年を指定します。例えば、yearRange: "2020:2030"とすると、2020年から2030年までの年が表示されます。 - 数値
指定した年数を前後して表示します。例えば、yearRange: 5とすると、現在の年から前後5年間が表示されます。
$(function() {
$("#datepicker").datepicker({
yearRange: "2020:2030"
});
});
コードの説明
- (function()):∗∗この部分は、DOMが完全に読み込まれた後に実行されることを保証するjQueryのショートハンドです。2.∗∗("#datepicker").datepicker({})
このコードは、ID が "datepicker" の要素に Datepicker プラグインを適用します。 - yearRange: "2020:2030": このオプションは、Datepicker で表示される年数を指定します。ここでは、2020年から2030年までの年が表示されます。
具体的な動作
- ページが読み込まれると、ID が "datepicker" の要素が Datepicker として初期化されます。
- ユーザーが Datepicker をクリックすると、カレンダーが表示されます。
- カレンダーには、2020年から2030年までの年が表示されます。
- ユーザーは、この範囲内の年を選択することができます。
minDate と maxDate オプション
このオプションを使うことで、カレンダー上で選択可能な最小日と最大日を指定できます。
$(function() {
$("#datepicker").datepicker({
minDate: new Date(2020, 0, 1),
maxDate: new Date(2030, 11, 31)
});
});
このコードでは、2020年1月1日から2030年12月31日までの日付のみ選択可能になります。
beforeShowDay オプション
このオプションを使うことで、特定の日を無効化することができます。
$(function() {
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var year = date.getFullYear();
return [year >= 2020 && year <= 2030];
}
});
});
このコードでは、2020年から2030年以外の年は選択できなくなります。
どちらの方法を選ぶべきか？
- 複雑な日付条件
beforeShowDayオプションが柔軟性があります。 - 特定の期間の制限
minDateとmaxDateオプションが適しています。 - シンプルな年数制限
yearRangeオプションが最も簡単です。
注意
beforeShowDayオプションは、カレンダーの表示に影響を与える可能性があります。minDateとmaxDateオプションは、カレンダー上で表示される年数には影響しません。
jquery datepicker
