SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

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

問題

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

答え

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

問題点1)ネイティブの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()ではネイティブのイベントは発生しないようなので効かない。

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

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

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

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

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

メモ

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

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

関連するメモ

コメント