メールフォームの 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>
日付のマイナス指定はどうしたら良いのでしょうか?
ご教授いただけると助かります。
No.1ベストアンサー
- 回答日時:
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>
gura_ さま
ご回答いただきまして、ありがとうございます。
教えていただいたコードで思い通りの動作を確認できました。
本当に助かりました。
また何かございましたら、よろしくお願いいたします。
No.3
- 回答日時:
こんにちは
何をなさりたいのかイマイチはっきりとわかりませんけれど・・
>年齢制限のある申し込みで年齢を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);
});
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript gasについて 1 2022/05/31 21:51
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript WordPressのコンタクトフォーム7にて送信者の位置情報を送らせたい 2 2022/09/14 23:28
- JavaScript HTMLで作った時報アプリが動きません 1 2024/01/21 09:49
- JavaScript 変数名をどのようにつけるのが良いかアドバイスお願い致します 4 2024/02/28 19:44
- JavaScript 出発駅A、到着駅Bを選択すると、2.3㎞と170円と返るようにしたいです。 1 2024/01/26 08:33
- JavaScript HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない 7 2023/12/15 19:32
- JavaScript HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない 2 2023/12/18 18:12
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
二次元配列を使って順位をだすときに、同点の場合の順位をだす方法を教えて下さい。
JavaScript
-
三項でたとえば交換って
Ruby
-
テキストファイルのファイル名を抽出してBAT処理する方法はありますか。
その他(プログラミング・Web制作)
-
-
4
Q&A掲示板の入力フォームに文字数制限を設けて入力可能な文字数を表示したい
JavaScript
-
5
htmlの修正方法を教えていただきたいです。
HTML・CSS
-
6
[初心者]javascriptのfor文でなぜか繰り返し処理をしない。理由がわかりません。
JavaScript
-
7
javascriptの値をformのinput hiddenに入れたい
JavaScript
-
8
ボタンが押されたらWebページの文字コードを 変える、というプログラミングを書きたいです。 目的は文
HTML・CSS
-
9
かっこいいウェブを作るテク
HTML・CSS
-
10
プログラミング言語の制作方法について
C言語・C++・C#
-
11
ボタンを押したあとに画像を表示させる方法についてアドバイスお願い致します
JavaScript
-
12
テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい
HTML・CSS
-
13
php配列のキーの二重定義 $a['zero'],$a['iti']と$a[0],$a[1]とが同等
PHP
-
14
Excel-VBAのmsgBox()の不思議
Visual Basic(VBA)
-
15
mallocについて
C言語・C++・C#
-
16
以下のURL入れますか?皆さんは↓
AJAX
-
17
VBA初心者 Ctrl+での操作、ボタンに登録での操作
Visual Basic(VBA)
-
18
Javaって使いますか、もう古いですか?C++とどっちがいいですか?分析でC++使う授業ありましたけ
C言語・C++・C#
-
19
複雑なシフト表から1日ごとの出勤者、シフトを抜き出したいです
Excel(エクセル)
-
20
JavascriptでDom XSSの脆弱性対策を行いたい
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
URLのパラメータを取得しリンク...
-
ジェネレーターの作り方
-
javascriptでテーブルに追加し...
-
C#OpenCv V4にのエラーに関する...
-
JavaScriptで決まった「時刻」...
-
HTMLにWSHを組み込む
-
Strutsで半角英数字1文字以上
-
GoogleMap 住所から座標の取得
-
初回アクセスから●時間経過後、...
-
[Javascript] キーボードからの...
-
Java script エラー
-
var exports = exports || {}; ...
-
スマフォではボタンを表示させ...
-
HTMLで作った時報アプリが動き...
-
C#テキストボックスの文字を配...
-
同じIDで定義した要素の配列を...
-
同じ型【ハイフンと数字】だけ...
-
関数でy=g(x)のgとは何の略です...
-
ボタンをクリックすると数が増...
-
二次元配列の全要素の全要素を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
var exports = exports || {}; ...
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
GASでGoogleフォームの自動返信...
-
HTMLで作った時報アプリが動き...
-
javascriptでテーブルに追加し...
-
html javascript リンク先アド...
-
【西暦等の変換】
-
ローカルにあるファイルを検索...
-
ASP.NETのコントロールの値をJa...
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
gas スプレッドシートがアクテ...
-
ASP.NET MVCでObjectをjsに渡す
-
カンマで終わってるのはセミコ...
-
JavaScriptで文字列の特定文字...
-
javascriptでiframeのURL変更は?
-
APIを使って埋め込んだグーグル...
おすすめ情報