【Vue】【Quasar】カレンダーをポップアップさせる

こんにちは。
前回、前々回はfirebaseを使って認証機能を実装していきました。

qkuronekop.hatenablog.jp

qkuronekop.hatenablog.jp

今回はUIを作ってる途中で、カレンダーをポップアップさせるのにちょっと詰まったのでご紹介しようと思います。

カレンダーのUIはこちらにあります。

https://quasar.dev/vue-components/date

使いたいDatePickerを選んでコピーしてくれば、画面に貼り付けることができるのですが、
私が今回使いたかったのはこれ。

カレンダーのアイコンをクリックするとピッカーがポップアップするもの。

サンプルのコードをコピーするだけこんな感じで、最初からピッカーが表示されるし、ピッカーの様子もおかしい。

足りなかったのはここ。

// quasar.conf.js

return {
  framework: {
    components: [
      'QDate',
      'QInput',
      'QPopupProxy',
    ],
    directives: [
      'ClosePopup'
    ],
  }
}

QDataだけでなくPopup Proxyも必要でした。

https://quasar.dev/vue-components/popup-proxy

QInputに関しては別なところですでにinputを使っているので気にしてなかったのですが、これも必要です。

これでカレンダーが無事完成しました！