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」が表示されます。カレンダー日付を押下すると日付を上下選択することができます。

Vue.js

Posted by arkgame