今までVue.js
とbootstrap-datepicker
を組み合わせて使ってました。
諸々の事情があってVue.jsを1系から2系にアップデータした結果、
テキストボックスをクリックしてもカレンダーが表示されない現象が発生しました。
対応方法をブックマーク的な感じで残しておきます。
↓が今までのソースコードの抜粋(そもそもこれが駄目な可能性があるのかな)
before.html
<input type="text" id="sampleDate" v-model="sampleDate">
before.coffee
new Vue
el: '#sampleDiv'
data:
sampleDate: ''
calender.coffee
$(document).on 'ready page:load', () ->
$('#sampleDate').datepicker
まずは結果から。
after.html
<input type="text" id="sampleDate" v-model="sampleDate">
after.coffee
new Vue
el: '#sampleDiv'
data:
sampleDate: ''
mounted: ->
$('#sapleDiv').datepicker()
.on 'changeDate', () =>
this.sampleDate = $('#sampleDate').val()
色々と調べてみると、
-
mounted
に記載すること - datepickerの
changeDate
を使用すること
上記の2つを使用すると正常に動作するということにたどり着いたので、
そのように記載しました。
vue-datepicker
なるものも存在するのですが、
諸々の事情でそちらは使用出来ませんでした><;