本稿について
本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます
#vue
見た目的にはこんな感じ
ライブラリのインストール
npm install vuejs-datepicker --save
<vuejs-datepicker :value="movie.reservation_at" :format=“date_format">予約日時を指定する</vuejs-datepicker>
※ 初めはコンポーネントでimportして使おうとしたが、vuejs-datepickerはSSRでは機能しない(エラーになる)ため、pluginにした上で、client-onlyで実行しないといけない
plugins/vue-datepicker.js
import Vue from 'vue'
import Datepicker from 'vuejs-datepicker'
Vue.component('date-picker', Datepicker)
nuxt.config.js
plugins: [
{ src: '~/plugins/vue-datepicker', mode: 'client' }
],
import vuejsDatepicker from "vuejs-datepicker"
export default {
data: function() {
return {
date_format: 'yyyy-MM-dd'
}
},
components: {
'vuejs-datepicker': vuejsDatepicker
},
...
日本語化
// datepickerの日本語化
import { ja } from "vuejs-datepicker/dist/locale";
export default {
...
computed: {
lang: function() {
return ja;
}
...
}
<vuejs-datepicker :value="movie.reservation_at" :format="Format" :language="lang"></vuejs-datepicker>
[参考]