Broken on vue3 ?

[grojguy]

Thank you so much for this excellent module!

I updated my project to Vue3, and I now I have many errors from DateTimePicker, and the application is no longer working.

Is vue-drumroll-datetime-picker not working with Vue3?

Thank you!

[plusone-masaki]

Yes, we have not yet published support for Vue3. The development is already almost complete, so could you please try this branch?

https://github.com/plusone-masaki/vue-drumroll-datetime-picker/tree/feature/vue3_support

[grojguy]

Thank you! Yes, I will give it a try. However, I apologize... I do not know how to manually install in my vue.js project. Where would I find instructions how to manually install?

Yes, we have not yet published support for Vue3. The development is already almost complete, so could you please try this branch?

https://github.com/plusone-masaki/vue-drumroll-datetime-picker/tree/feature/vue3_support

[plusone-masaki]

Try this command.

yarn add https://github.com/plusone-masaki/vue-drumroll-datetime-picker.git#feature/vue3_support

[grojguy]

Try this command.

yarn add https://github.com/plusone-masaki/vue-drumroll-datetime-picker.git#feature/vue3_support

Thank you! I have installed the feature/vue3_support branch.

However, I have the following error...

I have created a devbox demo using a basic Vue3 project: codesandbox.io (NOTE: The feature/vue3_support branch is cloned locally in this devbox, and installed to the project from this cloned repo, because the direct repo reference does not seem to work in codebase.io (hangs forever during 'npm install'). However, I don't think this is relevant to the error because in my real dev environment, I use the direct link to the git repo link you suggested above, and I see the same error shown above.)

The likely problem... after installing directly from the repo, or from the local clone, in node_modules there is no src or dist folder ...

However, if I install normally the release version (npm install vue-drumroll-datetime-picker), I see the expected contents...

Thank you for any assistance.

[plusone-masaki]

Thank you for your verification. It may not be possible to install correctly unless you publish to npm. i will try. thank you.

[plusone-masaki]

I just published it. Try out v2.0.0 by running this command.

npm i vue-drumroll-datetime-picker

[grojguy]

I just published it. Try out v2.0.0 by running this command.

npm i vue-drumroll-datetime-picker

Thank you! OK, I was able to installa and run. However, (2) issues...

1. According to your README...

   <script>
   import { DateTimePicker, DatePicker, TimePicker } from 'vue-drumroll-datetime-picker'
   import 'vue-drumroll-datetime-picker/style.css'
   //...
   </script>

   However, that appears to be wrong path for style.css.
   It is at vue-drumroll-datetime-picker/dist/style.css', so I had to change the import line to... import 'vue-drumroll-datetime-picker/style.css'

2. Something has changed with styling. With Vue2 and version vue-drumroll-datetime-picker@1.x.x and the following code...

            <div class="flex" style="width: 50%; font-size: 1.9em; align-items: center; justify-content: left;">
               <date-time-picker style="width: 100%; color: black;"
                 v-model="date.cur.fmtd"
                 height="5.5em"
                 :format="curDateFormatMask"
                 :pattern="{
                 }"
                 @input="saveUpdate"
               />
             </div>

   ... I had this...

But with Vue3 and vue-drumroll-datetime-picker@2.0.0, I have this...

It appears to be a font size issue, but I cannot change font size, e.g...

                <date-time-picker style="width: 100%; color: black; font-size: 2em;"
                  v-model="date.cur.fmtd"
                  height="5.5em"
                  :format="curDateFormatMask"
                  :pattern="{
                  }"
                  @input="saveUpdate"
                />

... has no effect.

Any thoughts?

[plusone-masaki]

Thank you for the report. I will fix the stylesheet path in the README. The display problem may also be due to two implementation issues.

1. Try specifying the font size for the parent element such as a div.
2. The library used internally for scrolling calculates the height, so if the parent element is smaller than necessary or hidden with display: none etc. before displaying the Picker, the height may be high. The calculation of the value may be incorrect. In this case, I think it will return to normal by resetting the value set in v-model to another value. Please try it.

[grojguy]

I have simplified the code, and tried both suggestions, and both seem to make no difference, as seen below...

Here is the excerpt of simplified code...

              <div class="flex q-pr-lg" style="font-size: 1.5em; width: 25%; align-items: center; justify-content: right;">
                Date/{{ $t("AH_TIME_STR") }}:
              </div>
              <div class="flex" style="width: 50%;">
                <date-time-picker style="width: 100%; color: black;"
                  modelValue="2024-01-31 12:26"
                />
              </div>
              <div class="flex q-pl-sm" style="width: 15%; font-size: 2.5em; align-items: center; justify-content: left;">
                <KeyboardInput />
              </div>

This gives:

If I then change the middle <div>, adding font-size: 2em; to style, there is no change...

              <div class="flex" style="width: 50%; font-size: 2em;">
                <date-time-picker style="width: 100%; color: black;"
                  modelValue="2024-01-31 12:26"
                />
              </div>

Overall, it looks like there are problems both with scaling, and positioning of the characters and containers.

Thank you for your help. Let me know if I can provide anything more to help with troubleshooting. I look forward to getting this working again.

[plusone-masaki]

@grojguy I don't know if it will solve the problem, but first try pasting the code in the demo as is and see if it works. Then, by customizing it, you can explore the possibility of achieving what you want.

Mark this thread as resolved.