input type = "date" における日付入力の範囲を制限したい。

Question

input type = "date" における日付入力の範囲を制限したいです。

CSSフレームワークとしてbootstrap4.1.3を利用しています。

具体的には、name="start" で入力されたデータの最大で10年後までしか入力出来ないように制限したいです。

<p>開始</p>
 <input type="date" class="form-control" id='start' name='start'>

<p>終了</p>
 <input type="date" class="form-control" id='end' name='end'>
  
<div class="button_wrapper">
 　<div class="col-lg-12 col-md-12 col-sm-12">
      <button type="submit" class="btn btn-primary">スタートボタン</button>
   </div>
</div>

例えば、開始で「１９９０−０１-０１」を選択したら終了で選択できる最大の日付は「２０００−０１−０１」という具合にしたいです。
実際の挙動的には、仮に10年の範囲を超えて選択出来たとしても、submitした後はmaxの値として強制的に更新される、等々何でも構いません。

どなたかアドバイスお願いします。

Comments

[m.ts10806]

CSSフレームワーク利用されているならそちらをタグに追加し、バージョンを質問に追記してください。
HTMLだけのアプローチにならないこともありますし、そもそもブラウザで表示されている画面の情報は如何様にも改竄可能なので、サーバーサイトでのチェックは不可欠です。

Answer 1

https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/date

min, max を使ってみればいいのではないでしょうか？
ブラウザの実装状況までは知らないので実際に試してみてください。

Answer 2

「終了」に入力できる値を「開始」の値に応じて動的に変化させるにはJavaScriptで制御するより方法がないように思いますが。