メールフォームの日付入力フォームで過去の日付で範囲指定する方法が分かりません

解決済

質問者：k-kazun
質問日時：2024/04/05 17:43
回答数：3件

メールフォームの input type="date" で、
以前に予約日の設定で7日～6ヶ月感（180日）での範囲指定では、
以下のスクリプトで思い通りの動作が確認できました。

<script>
window.onload = function(){
/* 今日の日付取得 */
const today = new Date();
/* 変数に8日後をセット */
const getConst1 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 8);
/* yyyy-mm-ddに整形 */
var y = getConst1.getFullYear();
var m = getConst1.getMonth() + 1;
var d = getConst1.getDate();
const const1 = y + "-" + m.toString().padStart(2,'0') + "-" + d.toString().padStart(2,'0');

/* 変数に6か月≒182日後をセット（30.4日×6ヶ月＝182.4日） */
const getConst2 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 182);
var y = getConst2.getFullYear();
var m = getConst2.getMonth() + 1;
var d = getConst2.getDate();
var const2 = y + "-" + m.toString().padStart(2,'0') + "-" + d.toString().padStart(2,'0');

document.getElementById("birth1").setAttribute("value",const1);
document.getElementById("birth1").setAttribute("min",const1);
document.getElementById("birth1").setAttribute("max",const2);
}
</script>

今回、このスクリプトを使い、
年齢制限のある申し込みで年齢を18～60歳で受付たいケースがあり、
予約日のスクリプトで、以下の様に修正しましたが動作しません。

<input type="date" id="birth1">

<script>
window.onload = function(){
/* 今日の日付取得 */
const today = new Date();
/* 変数に60歳（365日×60年＝21900日）をマイナス */
const getConst1 = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 21900);
/* yyyy-mm-ddに整形 */
var y = getConst1.getFullYear();
var m = getConst1.getMonth() + 1;
var d = getConst1.getDate();
const const1 = y + "-" + m.toString().padStart(2,'0') + "-" + d.toString().padStart(2,'0');

/* 変数に15歳5474日をマイナスセット（365日×15年＝5475日） */
const getConst2 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 182);
var y = getConst2.getFullYear();
var m = getConst2.getMonth() + 1;
var d = getConst2.getDate();
var const2 = y + "-" + m.toString().padStart(2,'0') + "-" + d.toString().padStart(2,'0');

document.getElementById("birth1").setAttribute("value",const1);
document.getElementById("birth1").setAttribute("min",const1);
document.getElementById("birth1").setAttribute("max",const2);
}
</script>

日付のマイナス指定はどうしたら良いのでしょうか？
ご教授いただけると助かります。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： gura_
回答日時：2024/04/05 21:32

k-kazun さん

　････年齢を18～60歳で受付たい･････

年を引けば良い。

ご参考に↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="date" id="birth1">

<script>
window.onload = function(){
/* 今日の日付取得 */
const today = new Date();

/* 変数に60歳（365日×60年＝21900日）をマイナス
const getConst1 = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 21900); 誤まり */
const getConst1 = new Date(today.getFullYear() - 60, today.getMonth(), today.getDate()); /* 60歳を設定 */
/* yyyy-mm-ddに整形 */
var y = getConst1.getFullYear();
var m = getConst1.getMonth() + 1;
var d = getConst1.getDate();
const const1 = y + "-" + m.toString().padStart(2,'0') + "-" + d.toString().padStart(2,'0');

/* 変数に15歳5474日をマイナスセット（365日×15年＝5475日）
const getConst2 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 182); 誤まり */
const getConst2 = new Date(today.getFullYear() - 18, today.getMonth(), today.getDate() ); /* 15歳を設定 */
var y = getConst2.getFullYear();
var m = getConst2.getMonth() + 1;
var d = getConst2.getDate();
var const2 = y + "-" + m.toString().padStart(2,'0') + "-" + d.toString().padStart(2,'0');

document.getElementById("birth1").setAttribute("value",const1);
document.getElementById("birth1").setAttribute("min",const1);
document.getElementById("birth1").setAttribute("max",const2);
}
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

助かりました

gura_ さま

ご回答いただきまして、ありがとうございます。
教えていただいたコードで思い通りの動作を確認できました。
本当に助かりました。
また何かございましたら、よろしくお願いいたします。

通報する

お礼日時：2024/04/05 23:39

No.3

回答者： fujillin
回答日時：2024/04/05 23:53

こんにちは

何をなさりたいのかイマイチはっきりとわかりませんけれど・・

＞年齢制限のある申し込みで年齢を18～60歳で受付たいケースがあり、
＞予約日のスクリプトで、以下の様に修正しましたが動作しません。
予約日と年齢制限が直接関係があるとも思えませんけれど・・
もしかすると、生年月日を type="date" で入力してもらおうという意図なのでしょうか？
その際に、表示できる範囲を18歳～60歳に制限したいってことなのかなぁ。

もしそうなら、入力操作の日を基準に満年齢で18～60歳で良いとするなら、
　minを「明日 - 61年」
　maxを「本日 - 18年」
として設定すれば良さそうに思います。

ただし、inputのUIはブラウザ依存なので、数十年分をカレンダで遡って入力するのは、ブラウザによってはかったるそうにも思われます。
<select>や<input type="number">で、年月日をそれぞれ入力する方がわかりやすいかもしれません。
（type="date"に対応していないブラウザでは、通常のtext入力になります）

手元のChrome、fx で試してみたところ、カレンダーの表示は指定日で制限できますが、数値入力モードにして直接入力すると、指定範囲外の日付も入力できてしまいますね。
ですので、きちんと処理したければ、別にバリデーションが必要と思われます。

・・・などと、御託を述べているだけでは回答にならないので、上記のカレンダ表示制御だけでよければ、以下のような感じで可能と思います。

＞日付のマイナス指定はどうしたら良いのでしょうか？
Dateオブジェクトであれば、加算同様に減算も可能です。

window.addEventListener('DOMContentLoaded', () => {
const
P = n => (n + '').padStart(2, '0'),
F = d =>
`${d.getFullYear()}-${P(d.getMonth()+1)}-${P(d.getDate())}`,
inp = document.getElementById('birth1'),
d1 = new Date(), d2 = new Date();

d1.setDate(d1.getDate() + 1);
d1.setFullYear(d1.getFullYear() - 61);
d2.setFullYear(d2.getFullYear() - 18);

inp.value = F(d2);
inp.min = F(d1);
inp.max = F(d2);
});