Quasar v2 support

[tmezzena]

Hi. I'm testing this extension on Quasar v2. I can add it but on compilation (yarn dev) shows this error:

App • ⚠️ Extension(qdatetimepicker): is not compatible with quasar v2.0.1. Required version: ^1.0.0

I changed these lines on node_modules:
api.compatibleWith('quasar', '^2.0.0')
api.compatibleWith('@quasar/app', '^1.3.0 || ^2.0.0 || ^3.0.0')

compiled but shows this error on browser console:

Uncaught (in promise) TypeError: Cannot read property 'observable' of undefined
at eval (render.js?f3a3:18)
at Module../node_modules/quasar-app-extension-qdatetimepicker/src/services/render.js (vendor.js:765)
at webpack_require (app.js:290)
at fn (app.js:554)
at eval (QDatetimePicker.js:19)
at Module../node_modules/quasar-app-extension-qdatetimepicker/src/component/QDatetimePicker.js (vendor.js:611)
at webpack_require (app.js:290)
at fn (app.js:554)
at eval (index.js:6)
at Module../node_modules/quasar-app-extension-qdatetimepicker/src/component/index.js (vendor.js:622)

I think it's not so simple to work because changes on Vue v3 and Quasar v2 apis.

Is there a plan to support it on Quasar v2?

This is a great extension.

[Scalix]

Hi @TobyMosque ,
please, do you plan to add support for Quasar v2?
Thank you for your response.
Ales

[Scalix]

@tmezzena I think that https://quasar.dev/vue-components/date#with-qinput is a way to go: very simple yet powerfull.

[Tobias Mesquita]

There is already a WIP in the v2 branch.
https://github.com/TobyMosque/app-extension-qdatetimepicker/tree/v2

the basic functions is already working as expected, i just need to test the advanced ones.

[Tobias Mesquita]

try to install the new version:

quasar ext add @toby.mosque/qdatetimepicker

there is a few changes:
1 - The component name as be changed from q-datetime-picker to q-date-time-picker (or QDateTimePicker)
2 - the property this.$qdtp is no more avaliable, as a alternative, I introduced a stored who hold all defaults:

so, instead of:

export default {
  mounted () {
    this.$qdtp.icons.date = 'mdi-calendar'
    this.$qdtp.icons.time = 'mdi-clock-outline'
  }
}

you'll need to do:

import { QDTP_DEFAULTS } from '@toby.mosque/quasar-ui-qdatetimepicker' // "ui" is aliased in quasar.conf.js
import { ref, inject } from 'vue'

export default {
  setup (props) {
    const qdtpStore = inject(QDTP_DEFAULTS)
    qdtpStore.light.dateIcon = 'mdi-calendar'
    qdtpStore.light.timeIcon = 'mdi-clock-outline'
    qdtpStore.dark.dateIcon = 'mdi-calendar'
    qdtpStore.dark.timeIcon = 'mdi-clock-outline'
  }
}

a small explanation about the store, there is 2 modules, light and dark
1 - light hold the defaults when the dark mode isn't active
2 - dark hold the defaults when the dark mode is active
3 - both modules hold all properties defaults, not limited to dateIcon or timeIcon, so you'd the freedom do set the default of other properties, like dense, filled, autoUpdateValue, landscape, etc
4 - both modules are indepedent and reactive