JavaScript

【サンプル付き】Vuetify で DatePicker付きの テキストフィールドを作る!【Vuetify】

みなさん、こんにちは。どんぶラッコです。

今回は Vuetify v2 を使って、このようなテキストフィールドを作ってみましょう。

v-text-field コンポーネントとv-date-picker コンポーネントの2つを使うことで実現できます。

早速、サンプルコードをみていきましょう!

サンプルと解説

実際に動くコードについてはcodesandbox上にアップロードしてあります。

App.vue

<template>
  <v-app>
    <v-content>
      <v-row justify="center">
        <v-col cols="8">
          <v-text-field v-model="value" single-line>
            <template v-slot:append-outer>
              <date-picker v-model="value"/>
            </template>
          </v-text-field>
        </v-col>
        <v-col cols="8">
          <p>日付: {{ value }}</p>
        </v-col>
      </v-row>
    </v-content>
  </v-app>
</template>

<script>
import DatePicker from "./components/DatePicker";

export default {
  name: "App",
  components: {
    DatePicker
  },
  data() {
    return {
      value: null
    };
  }
};
</script>

ここでは、 v-text-field の表示設定をしています。

          <v-text-field v-model="value" single-line>
            <template v-slot:append-outer>
              <date-picker v-model="value"/>
            </template>
          </v-text-field>

このように、v-slot:append-outerを使うことで、テキストフィールドのお尻の部分にUI表示を追加しています。

そこでは date-pickerコンポーネントを描画するように指示を出しています。

(date-pickerコンポーネントを読み込んでいるのは↓の部分です!)

<script>
import DatePicker from "./components/DatePicker";

export default {
  components: {
    DatePicker
  },
  ...
};
</script>

components/DatePicker.vue

では次にDatePickerの中身をみていきましょう。

<template>
  <v-menu v-model="menu" offset-y :close-on-content-click="false">
    <template v-slot:activator="{ on }">
      <v-btn icon color="primary" dark elevation="0" v-on="on">
        <v-icon>mdi-calendar</v-icon>
      </v-btn>
    </template>
    <v-date-picker v-model="picker" @click="menu = false"/>
  </v-menu>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: new Date().toISOString().substr(0, 10)
    }
  },
  data() {
    return {
      menu: false
    };
  },
  computed: {
    picker: {
      get() {
        return this.value;
      },
      set(val) {
        this.menu = false;
        this.$emit("input", val);
      }
    }
  }
};
</script>

手順ごとに分解していきましょう。

1. カレンダーのボタンを作る

カレンダーアイコンが表示されているボタンを作ります。

      <v-btn icon color="primary" dark elevation="0" v-on="on">
        <v-icon>mdi-calendar</v-icon>
      </v-btn>

2. ①で作成したボタンをメニューのトリガーにする

v-menu のトリガーとしてボタンを設定します。

  <v-menu v-model="menu" offset-y :close-on-content-click="false">
    <template v-slot:activator="{ on }">
      <v-btn icon color="primary" dark elevation="0" v-on="on">
        <v-icon>mdi-calendar</v-icon>
      </v-btn>
    </template>
  </v-menu>

3. メニューとして表示される対象に v-date-picker を指定する

  <v-menu v-model="menu" offset-y :close-on-content-click="false">
    <template v-slot:activator="{ on }">
      <v-btn icon color="primary" dark elevation="0" v-on="on">
        <v-icon>mdi-calendar</v-icon>
      </v-btn>
    </template>
    <v-date-picker v-model="picker" @click="menu = false"/> <!-- ここを追加したよ! -->
  </v-menu>

以上の3ステップでこのコンポーネントが成り立っています。

あとは、v-date-picker が日付を拾ってきてくれたら $emitの機能を使って親コンポーネントにお知らせしてあげるだけです。

今回は v-date-pickerv-modelに設定してる pickercomputedで指定することで 値渡しを実現しています。

  computed: {
    picker: {
      get() {
        return this.value;
      },
      set(val) {
        this.menu = false;
        this.$emit("input", val);
      }
    }
  }

以上、サンプルコードでした!

みなさんもぜひ試してみてください♪

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニア経験を経て、ProgLearnのシステム開発を担当。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です