#概要
<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/
###最後に
分かりにくい点があったら大変申し訳ないが、以上とさせていただく。