Vueのコンポーネントで、v-calendarっていうやつがある。
相当色んな事が出来て、今まで見てきたカレンダー的モジュールの中では一番じゃないだろうかと個人的に思ってる。
中のソースもめっちゃ勉強になる。
で、これのDatePickerを使う場合に、外から日付を渡して表示する場所を変えたかったりする。
一筋縄でいかなかったのでちょっと記載。
多分普通に使う分には↓の感じ。
<vc-date-picker v-model="dateval" />
適当なdataをv-modelで指定してあげれば、それに応じた日付にはしてくれると思う。
ただ、このdatevalを外で変えた場合に、カレンダーのページがその日付の月になってない。
これをやるのに、shoPageRangeっていうの呼ぶらしい。公式のドキュメントにもそんな感じで書いてある。
これのissue。
まー上手くいかないと。popoverの場合は上手くいかない。is-inlineだとうまくいくっぽい。
どうもpopoverの場合、$refs.calendarの$refsがcalendarじゃなくてpopoverになってるみたいですね。
で、ソース色々見てたら、少なくとも最新のバージョンではどうも違うっぽい。正解はこっちだと思う。
<vc-date-picker v-model="dateval" ref="calendar"/> methods:{ changePage(){ this.dateval = "何かの日付" this.$refs.calendar.adjustPageRange()//コッチ } }
datepicker使う場合は少なくとも「adjustPageRange」っぽいですね。
内部的なカレンダーの日付のページにこれで合わせてくれる模様。
コード的にはここ。
あと、カレンダーが非表示の状態だと動かないっぽい?
なので、最終的にはこんな感じにしておく必要がありそう。
<vc-date-picker v-model="dateval" ref="calendar" @popoverDidShow="handleShow"/> methods:{ changePage(){ this.dateval = "何かの日付" }, handleShow(){ カレンダーが表示されたときに呼ぶ this.$refs.calendar.adjustPageRange() } }