概要
つい最近Vuejs-datepickerを触る機会があったのでその時困ったこととか解決法をまとめておきたいと思います。
Vuejs-datepickerって？
日付選択をカレンダーを使用して出来るようにするパッケージです。
Vueと一緒に使っています！
公式のページはvuejs-datepickerを見てください。
公式にデモもあるので試したい方はそちらで！
インストールはnpmでnpm install vuejs-datepickerかCDNを利用してください。
基本的な使用法
< datepicker
v-model = "変数"
propsを記述
> < / datepicker >
v-modelの後に指定した日付を保持しておく変数を指定します。
そのあとにPropsを指定していきます。
困ったこと＆解決法
- カレンダーのみを表示したい
- propsで
inline = "true"を指定
- propsで
- カレンダーの幅を調整したい
- propsで指定できなかったのでjsを使って力業
/*Vueのmountedで実行しました。*/
var target = document.getElementsByTagName("id");//変更したいもののIDを指定
target.style.width = "100%"; //幅を指定
以上です。
引き続き使っていて何かあったら追記していきたいと思います。