vue.jsのvuetifyで、jQueryのjquery-datetimepickerを使用したいです。

Question

■やりたいこと
vue.jsで、jQueryのjquery-datetimepickerを使用したいです。
顧客から追加要望があったのが、jquery-datetimepickerだからです。
vue.jsのvuetifyを使用しています。vuetify上なので、難航しています。
要件と指定は、カレンダーと時刻をGUIで指定したいということなので、vuetifyやvue.jsのコンポーネントも検討しています。

■やったこと
・npmインストール
↓下記のjquery-datetimepicker
https://www.npmjs.com/package/jquery-datetimepicker
npm install jquery-datetimepicker
npm i jquery-mousewheel
npm i php-date-formatter
・main.jsでの記述
import jQuery from 'jquery'
global.jquery = jQuery
global.$ = jQuery
window.$ = window.jQuery = require('jquery')
・App.vueでの記述
下記の２通りを試しました。
１
created() {
global.jqueryDatetimepicker.setLocale('ja')
global.jqueryDatetimepicker('#jquerydatetimepicker').datetimepicker({})
},
２
mounted: function() {
global.jqueryDatetimepicker.setLocale('ja')
global.jqueryDatetimepicker('#jquerydatetimepicker').datetimepicker({})
},

方法をご存じの方、ご教授願います。
よろしくお願い致します。

Answer 1

vue.jsで、jQueryのjquery-datetimepickerを使用したいです。

特別な理由がない限り、Vue.js用のコンポーネントを使ったほうが絶対にいいです。

Vue.jsなどの仮想DOM系のフレームワークと、jQueryの入力コンポーネントは、整合させるのが極めて難しいです。

Comments

[AyakoNan]

そうですよね。カレンダーは表示されるのですが、どうやってもv-modelとバインドしないんですよね。顧客の理解も得られたので、vuetify-datetime-pickerでいきます、ありがとうございます。

Answer 2

https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

こんなのがありましたよ。
私も同じような境遇でして、

Comments

[AyakoNan]

こんな方法もあるんですね。顧客の理解も得られたので、vuetify-datetime-pickerでいきます。ありがとうございます。