リプレイスなどでやむなく bootstrap-datepicker と Vue.js を連携しなけれならない、という場合の対処方法です。


Laravel での実装を想定しておりますが、ディレクトリ構成などは適宜読み替えれば Laravel 以外でも同様に実装できると思います。

また、Vue.js には 専用の素敵な Datepicker がいくつもありますから、新規開発ではぜひ Vue.js 用のものを使ってくださいね。

Vue.js と jQuery の併用は相性が悪い

Vue.js はリアクティブ系ライブラリと言われます。
仮想のドキュメントツリー (VirtualDOM) を内部で管理し、イベントなどにより VirtualDOM に変更があった場合、DOM 側にそれを反映するという仕組みで動いています。

これに対し、jQuery は DOM を直接操作する、という点が大きく違います。

この2つのライブラリを併用する場合にトラブルになるのは、jQuery 何か DOM 操作を行っても、Vue.js はそれを知りようがない ことに起因します。


具体的に、 bootstrap-datepicker と Vue.js の連携では、次の不具合が発生します。

  • A. Datepicker で日付を入力する
  • B. 他の INPUT タグを操作する
  • C. Aの変更が巻き戻ってしまう

環境について

  • Laravel 5.5
  • Node.js 7.1.x
  • npm 4.5.x
  • Vue.js 2.4.x
  • Bootstrap 3系

Datepicker は次を利用しております。

bootstrap-datepicker
https://github.com/uxsolutions/bootstrap-datepicker

bootstrap-datepicker を日本語化する jQuery プラグインは次を利用しております。

jquery.bootstrap-datetimepicker-ja
https://github.com/cyokodog/jquery.bootstrap-datetimepicker-ja

実装について

ファイル構成

bootstrap-datepicker と、日本語化プラグインを Laravel の public ディレクトリ以下にそのまま設置しました。

1public/css/bootstrap-datepicker.min.css
2public/js/jquery-3.2.1.min.js
3public/js/bootstrap-datepicker.min.js
4public/js/bootstrap-datepicker.ja.min.js

読み込み順に影響するため、 webpack.json から jQuery を削除し、public 以下に配置しました。


bootstrap-datepicker は npm からインストールも可能ですが、日本語化プラグインも適用させる場合は複雑になってしまいこの形としました。
はい、私のスキル不足です。

HTML

各種アフィルを次のように読み込みます。

  • HEAD タグ内

    1<link href="/css/bootstrap-datepicker.min.css" rel="stylesheet">
    2<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
  • BODY 閉じタグの手前

    1<script src="/js/jquery-3.2.1.min.js"></script>
    2<script src="/js/bootstrap-datepicker.min.js"></script>
    3<script src="/js/bootstrap-datepicker.ja.min.js"></script>
    4<script src="{{ mix('/js/app.js') }}"></script>

Vue.jsの実装

Datepicker が 1つ の場合は次のように対応いたします。

template

1<template>
2  <form class="form-horizontal">
3    <div class="form-group">
4      <input type="text" class="form-control datepicker"
5        v-model="date" />
6    </div>
7  </form>
8</template>

script

 1<script>
 2export default {
 3  mounted() {
 4    this.setDatePicker()
 5  },
 6  data() {
 7    return {
 8      date: ""
 9    }
10  },
11  methods: {
12    setDatePicker() {
13      const self = this
14
15      $('.datepicker').datepicker({
16        format   : 'yyyy/mm/dd',
17        language : 'ja',
18        autoclose: true
19      })
20      $('.datepicker').on('change', (e) => {
21        self.date = $(e.target).val()
22      })
23    }
24  }
25}
26</script>
27

この処理のポイントは次の部分です。

1$('.datepicker').on('change', (e) => {
2  self.date = $(e.target).val()
3})
4

jQuery と Vue.js を連携させるにあたって問題になるのが、「jQuery 側の処理を Vue.js が把握していない」ということでしたね。

そのため、「change イベントを拾って Vue.js 側に伝えてあげる」ということをしています。

おまけ:Datepicker が 複数 の場合

前掲のコードでは Datepicker を適用したフォームが複数の場合に対応しておりません。

範囲を表現する daterange の対応ケースを掲載いたします。

template

 1<template>
 2  <form class="form-horizontal">
 3    <div class="form-group">
 4      <div class="input-group input-daterange" data-provide="datepicker">
 5        <input type="text" class="form-control datepicker"
 6          v-model="date_from" data-model-key="date_from" />
 7        <div class="input-group-addon">to</div>
 8        <input type="text" class="form-control datepicker"
 9          v-model="date_to"   data-model-key="date_to" />
10      </div>
11    </div>
12  </form>
13</template>

script

 1<script>
 2export default {
 3  mounted() {
 4    this.setDatePicker()
 5  },
 6  data() {
 7    return {
 8      date_from : "",
 9      date_to   : ""
10    }
11  },
12  methods: {
13    setDatePicker() {
14      const self = this
15
16      $('.datepicker').datepicker({
17          format   : 'yyyy/mm/dd',
18          language : 'ja',
19          autoclose: true
20        })
21        $('.datepicker').on('change', (e) => {
22          const key = $(e.target).attr('data-model-key')
23          self[key] = $(e.target).val()
24        })
25      }
26  }
27}
28</script>
29

先ほどとの相違点は次です。

  • change イベント発生時に、キー名を動的に取得している
  • html に v-model の対応するキー名を埋め込んだ

要するに、data オブジェクトの何と対応しているかを、HTML で指定してあげる、という処理です。

おわりに

古い実装に縛られず、システムを一新したいとは、プログラマがよく考えることだと思います。

「どうしても Bootstrap の Datepicker にしてください !」という案件が発生した場合に、お役に立てば幸いです。
(検索ワードを見ると、案外ニーズがあるように思います。)


Vue.js入門 基礎から実践アプリケーション開発まで

川口 和也,喜多 啓介,野田 陽平,手島 拓也,片山 真也
出版社:技術評論社  発売日:2018-09-22

Amazonで詳細を見る

基礎から学ぶ Vue.js

mio
出版社:シーアンドアール研究所  発売日:2018-05-29

Amazonで詳細を見る

この記事の著者 Webrow (うぇぶろう)
Web アプリ開発、 Web 顧問 エンジニア、WordPress サポートいたします。