vueの画面でjquery.ui.datepickerを使うと？

Tweet

Category JavaScript / Tagged vue 2020/01/02

問題

vueで作っている画面で、jQuery UI の datepicker を使おうと思ったんだけど、うまく動かない。

答え

本来はvueに全部お任せするのがよく、jquery, jquery.ui にHTMLを変更させるのはおすすめではないが、使い方によっては、使えなくはない。

問題点１）ネイティブのinputイベントが発火しないので、日付入力欄の入力値がvueのデータに反映されない。

jquery.ui.datepickerの onSelect オプションでわざとinputイベントを発火すると選択した日付がデータに反映される。

$('セレクタ').datepicker({
    onSelect: function () {
        var e = document.createEvent('HTMLEvents');
        e.initEvent('input', false, true);
        this.dispatchEvent(e);
    }
});

jqueryのtrigger()ではネイティブのイベントは発生しないようなので効かない。

問題点２）jqueryのいつもの方法で初期化する場合、最初に以下のようにするが、

$('セレクタ').datepidker();

v-if で表示/非表示が切り替わるような箇所では、datepickerではなくなって普通のinputに戻る。

最初から最後まで表示しっぱなしの日付入力欄ならおそらく大丈夫。

以上、vueの画面で無理やりjquery.ui.datepickerを使う場合についてでした。

メモ

素直に以下を使用したほうがよいでしょう。

https://github.com/charliekassel/vuejs-datepicker?ref=softel.co.jp