省エネエンジニア

Flutter、vue.js修行中。

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

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

qkuronekop.hatenablog.jp

qkuronekop.hatenablog.jp

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

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

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

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

f:id:qkuroneko:20190819131654p:plain:w320

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

f:id:qkuroneko:20190819131813p:plain:w320

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

f:id:qkuroneko:20190819132021p:plain:w320

足りなかったのはここ。

// quasar.conf.js

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

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

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

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

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