【Vue3】で日付入力

2021年9月5日

Vue3 でプラグイン無しで下記のような簡単な日付入力を作成したのでその過程をメモ程度。

日付入力フォームが必要なサイトはよくあると思いますので残しておきます。

要件として下記のような input フォームにしていきます。

本日の日付より前の日付は選べない
開始日 ~ 終了日のようになっていて終了日が開始日より前が指定された場合は開始終了を入れ替える
カレンダーからの選択のみで入力欄に直接キーボードから日付が入力できないようにする

テンプレート

テンプレート部分は下記のような感じ。単純に input の type="date" を使っています。

<input type="date" v-model="startData" :min="new Date().toISOString().split('T')[0]" onkeydown="return false">
<p>〜</p>
<input type="date" v-model="endData" :min="new Date().toISOString().split('T')[0]" onkeydown="return false">

:min の部分で日付の最小値（本日の日付) を指定しています。

onkeydown="return false" を指定しておく事でキーボード入力をさせないようにしています。

スクリプト

下記のように startData と endData をウォッチしておいて開始終了が逆になったら強制的にスワップするようにしました。

setup() {
　　   const startData = ref(null)
    const endData = ref(null)

　　　　　　 watchEffect(() => {
      if(startData.value > endData.value) {
        const tmp = endData.value
        endData.value = startData.value
        startData.value = tmp
      }
    })

　　　　　　　　　return {
　　　　　　　　　　　　startData,
      endData
     }
}

以上。