こんにちは。
CMSの管理画面などで日付入力フォームはよく使われていますが、先日「今日から数えて◯年度の年度末を設定上限としてほしい」という実装が発生しました。
上記の実装は初めてで手こずったため、備忘録としてその際の実装方法や前提知識をまとめてみます。
前提：日付入力フォームをHTMLで表示する
この記事では、日付入力フォームとは以下のようなUIを指すものとします。
年/月/日はそれぞれ数値入力と上下キーの入力に対応し、画面右側のカレンダーのボタンを押すと画像2枚目のようなカレンダーを表示できるものです。
このようなUIはHTMLの<input type="date">で実装できます。下記の1行で日付入力フォームが表示されます。
<input type="date" />
日付入力フォームの上限・下限を設定する
日付入力フォームの設定の上限はmax属性を、下限はmin属性を付与することで実装できます。
例えば2026年9月1日を上限、2020年1月1日を下限としたい場合は以下のように記述します。
<input type="date" min="2020-01-01" max="2026-09-01" />
注意点としてmin属性とmax属性はyyyy-mm-dd形式固定となるため、月や日が1桁の場合は十の位をゼロ埋めする必要があります。
❌ max="2026-9-1"
⭕️ max="2026-09-01"
n年度の年度末を設定上限とするJSを実装する
実装したい設定は以下の通りとします。
- 本日から起算してn年後の年度末を設定上限とする
- 3年後を想定
- 本日が2025年6月1日の場合、上限は3年後の年度末である2029年4月1日とする
- 本日が2026年2月1日の場合、上限は同じく3年後の年度末である2029年4月1日とする
- 3年後を想定
<input class="date-form" type="date" />
document.addEventListener("DOMContentLoaded", () => {
const today = new Date();
const currentYear = today.getFullYear();
const currentMonth = today.getMonth() + 1; // getMonthは1加算する必要あり
const currentDate = today.getDate();
let passedYear = 3; // n年後の年度
// 1月〜3月、4月1日以外の場合は年の数字を1加算する
if (!(currentMonth < 4 || (currentMonth === 4 && currentDate === 1))) {
passedYear = passedYear + 1;
}
const dateForm = document.querySelector(".date-form");
dateForm.max = `${currentYear + passedYear}-04-01`;
});
注意点として、getMonth()の返り値は1月の場合に0となるため、実際の月数を表示させたい場合は取得した値に1を加算する必要があります。
本日のn年後の場合
次は年度末の場合を加味せずに、単純に本日からn年後を上限とする場合です。
- 本日が2025年6月1日の場合、上限は2028年6月1日とする
- 本日が2026年2月1日の場合、上限は2029年2月1日とする
<input class="date-form" type="date" />
document.addEventListener("DOMContentLoaded", () => {
const today = new Date();
const currentYear = today.getFullYear();
const currentMonth = (today.getMonth() + 1).toString().padStart(2, "0");
const currentDate = today.getDate().toString().padStart(2, "0");
let passedYear = 3; // n年後の年度の数値を定義
const dateForm = document.querySelector(".date-form");
dateForm.max = `${currentYear + passedYear}-${currentMonth}-${currentDate}`;
});
前述の通りmax(min)属性はyyyy-mm-ddの書式でないと効かないため、月か日が1桁の場合は十の位にゼロ埋めが必要になります。
JavaScriptでのゼロ埋めはpadStart()を用いるケースが多いです。
ただし、padStart()はString値のメソッドなので、today.getDate()などで取得した値はNumber型なのでそのままではゼロ埋めできません。
Number型の値を文字型に変換する方法としてtoString()を用いています。
最後に
ご覧いただきありがとうございます。
日付入力フォームは、登録フォームや入力画面といったユーザーの操作と密接に結びついています。上限を設定することはそれほど多くないかもしれませんが、この記事が参考になれば幸いです。
参考記事