Vue.js インプットフォームにカレンダー日付を設定するサンプル
環境
vue 2.6.14
Google Chrome 106.0.5249.119
書式
<input type="date" v-model="value" /> const app =new Vue({ el:セレクターID, data: { value:日付 }
「type="date"」を指定してカレンダー日付を設定します
インプットフォームにカレンダー日付を上下できるボタンが出るようになります。
「value:日付」でカレンダーの初期値を設定します。
使用例
<!DOCTYPE html> <html> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <body> <div id="cft"> <input type="date" v-model="value" /> </div> <script> const app = new Vue({ el: '#cft', data: { value: '2022-11-01', }, }); </script> </body> </html>
結果
カレンダー日付画面に「2022/11/01」が表示されます。カレンダー日付を押下すると日付を上下選択することができます。