vue Vue datepicker

本稿について

本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます
見た目的にはこんな感じ



ライブラリのインストール
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>

[参考]

Back