背景・実現したいこと
不動産管理会社で解約日と立会希望日に入力制限を掛けたいと思い作成しております。
解約日は受付日より1ヵ月以降の先の日付を選択出来るようにしたい。
立会希望日は本日から解約日までに制限を掛けたい。
解約日のフィールドコードがfield1
立会希望日のフィールドコードがfield2となっております。
エラー情報 (開発者ツールのコンソール)
実装しない。
利用したソースコード
// ページ読み込み後、2つのフォームにカレンダーを表示する
window.onload = function() {
// フィールド1用のカレンダー
var field1 = document.getElementById(“field1”);
var today = new Date();
var oneMonthLater = new Date();
oneMonthLater.setMonth(today.getMonth() + 1);
field1.min = formatDate(today);
field1.max = formatDate(oneMonthLater);
field1.value = formatDate(oneMonthLater);
field1.onchange = function() {
var selectedDate = new Date(this.value);
field2.min = formatDate(today);
field2.max = formatDate(selectedDate);
if (selectedDate < today) {
field2.value = formatDate(today);
} else {
field2.value = formatDate(selectedDate);
}
}
// フィールド2用のカレンダー
var field2 = document.getElementById(“field2”);
field2.min = formatDate(today);
field2.max = formatDate(oneMonthLater);
field2.onchange = function() {
var selectedDate = new Date(this.value);
if (selectedDate < today) {
field2.value = formatDate(today);
} else if (selectedDate > field1.value) {
field2.value = field1.value;
}
}
};
// 日付フォーマット関数
function formatDate(d) {
var year = d.getFullYear();
var month = (“0” + (d.getMonth() + 1)).slice(-2);
var day = (“0” + d.getDate()).slice(-2);
return year + “-” + month + “-” + day;
}