input type="date"で昨日以前を選択できないようにする方法

概要

<input type="date>"を用いることで、簡単にカレンダーによる選択を実装できる。
昨日以前を選択できないようにしたかったが、検索しても中々ヒットしなかった。
個人的な備忘録の意味でも、方法と流れをまとめてみた

▼使用スキル
HTML、Vue.js

手順①

HTML

<input type="date" min="2021-07-18">

HTMLにinput type="date"を設置。min='XXXX-XX-XX'を指定することで、'XXXX-XX-XX'がより前の日付に関しては、選択できなくなる。例えば、2021-07-18とすれば、7/17以前の日付は、選択できないようになる。
デモコード
詳しくは公式のリファレンスをご確認ください。

手順➁

ユーザーがサービスを利用する日にちによって、'XXXX-XX-XX'の中身を変更するようにしたい。つまり、動的に管理したい。本記事では、Vue.jsにて実装していく。

HTML

<div id="app">
 <input type="date" v-bind:min="today">
</div>

Vue.js

var vue = new Vue ({
  el: '#app',
  data: {
    today:''
   },
  created: function(){
    this.today= new Date();
  }
 })

ここまでのデモはこちら

解説

this.today= new Date();により、今日の日付を取得している。今日が7/18ならば、minには7/18が入る。しかし、このままでは正常に動作しない。上記のデモは確認してみて欲しい。
検証ツールを確認すると分かりやすいのだが、
この時点では、min=Tue Jul 20 2021 12:56:01 GMT+0900 (日本標準時)とminに入っている形式がおかしい。minが正常に動作するためには、min='XXXX-XX-XX'という形式になっている必要がある。
todayの形式を'XXXX-XX-XX'に変更する記述は以下になる。

手順➂

Vue.js

  created: function(){
    let todaySet = new Date();
    let YYYY = todaySet.getFullYear();
    let MM = ('00' + (todaySet.getMonth()+1)).slice(-2);
    let DD = ('00' + todaySet.getDate()).slice(-2);
    this.today = YYYY + '-' + MM + '-' + DD
  },

解説

恐縮ではあるが、getFullYear()等の詳しい解説は割愛させていただく。別途、公式のリファレンスや、他Qiita記事をご覧願いたい。

一点解説しておくと、下記コードの'00'及びslice(-2)がポイントである。下記部分がない場合、例えば今日が7/7だとすると、todayは2021-7-7という形式になる。下記部分があることで、2todayは2021-07-07となる。minが正常に動作するのは、2021-07-07の方だ。

 let MM = ('00' + (todaySet.getMonth()+1)).slice(-2);
 let DD = ('00' + todaySet.getDate()).slice(-2);

完成形はこちらでご確認いただきたい。
https://jsfiddle.net/zxyaukLh/2/

最後に

分かりにくい点があったら大変申し訳ないが、以上とさせていただく。