Vuetifyを使って日付ピッカーでYYYYMMDD形式でセットするテキストフィールドをつくる方法

はじめに

フォームで YYYYMMDD 形式の日付入力欄を作りたくなったので、Vuetifyを使って日付ピッカーでセットするテキストフィールドを作ることを検討しました。

イメージはこんな感じです。

具体的な動作はこんな感じです。

• テキストフィールドにフォーカスしたら日付ピッカーがポップアップする
• ピッカーに入力した内容がテキストフィールドに入る
• テキストフィールドは20210716のように YYYYMMDD の形式になっている

ただ、v-date-pickerには YYYYMMDD 形式で入力できないため、入力時にテキストフィールドに値をセットし、フォームではテキストフィールドから値を取り出す形になりそうでした。
[参考]https://vuetifyjs.com/ja/components/date-pickers/#section-30b530f330d730eb

そんなUIを、公式ドキュメントを参考にしつつ、できるだけシンプルなもので作成してみました。

やってみたこと

• v-date-pickerのv-modelにセットするデータとv-text-fieldのv-modelにセットするデータは分ける
• v-date-pickerで入力したら、データを YYYYMMDD 形式に変換してv-text-fieldのv-modelにセットしたデータに入れる（&ピッカーを閉じる）

実際に作ってみたコードは次のようになりました

<template>
  <div>
    <v-menu v-model="menu">
      <template v-slot:activator="{ on, attrs }">
        <v-text-field v-model="text" v-bind="attrs" v-on="on" readonly clearable>
        </v-text-field>
      </template>
      <v-date-picker v-model="picker" @input="formatDate(picker)">
      </v-date-picker>
    </v-menu>
    picker: {{ picker }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      menu: "",
      text: "",
      picker: "",
    };
  },
  methods: {
    formatDate(date) {
      if (!date) return null;
      const [year, month, day] = date.split("-");
      this.text = `${year}${month}${day}`;
      this.menu = false;
      return;
    },
  },
};
</script>

動作はこのようになります

まとめ

• v-date-pickerには YYYYMMDD 形式で入力できない
• v-date-pickerを使って YYYYMMDD 形式でセットするフィールドをつくるには、v-text-fieldを組み合わせると楽
  • v-date-pickerのv-modelにセットするデータとv-text-fieldのv-modelにセットするデータは分ける
  • v-date-pickerで入力したら、データを YYYYMMDD 形式に変換してv-text-fieldのv-modelにセットしたデータに入れる（&ピッカーを閉じる）