Vue.js / Nuxt.js

[Nuxt.js] datepickerを導入する

ふぐ

Nuxt.jsにて日付入力の補完をしてくれるdatepickerを導入した

パッケージをインストールする

  • プロジェクトにvuejs-datepickerとmomentを入れる
npm install vuejs-datepicker --save
yarn add vuejs-datepicker

npm install --save moment
yarn add moment

どこからでも使えるようにpluginに登録する

  • plugins/vuejs-datepicker.js作成
import Vue from "vue";
import moment from 'moment'
import Datepicker from "vuejs-datepicker";
import { ja } from "vuejs-datepicker/dist/locale";
Datepicker.props.language.default = () => ja;
Datepicker.props.format.default = (date) => {
  return moment(date).format('YYYY年MM月DD日');
};
Vue.component("datepicker", Datepicker);

  • nuxt.config.js編集
plugins: [
    '~/plugins/vuejs-datepicker.js', // ⭐️ 追加
  ],

これで、どのファイルでも<datepicker></datepicker>を使えるようになった

使う

<template>
  <div>
    <datepicker />
  </div>
</template>
補足

nuxt.config.jsのpluginsにてデフォルトの言語をjaに、デフォルトのフォーマットをYYYY年MM月DD日にしてる

これを呼び出し元で変えたい場合は、propで渡してあげればOK

<template>
  <div>
    <datepicker
      :language='en'
      :format='customFormatter'
    />
  </div>
</template>

<script>
import { en } from "vuejs-datepicker/dist/locale";
import moment from 'moment'
export default {
  data(){
    return {
      en, // ⭐️ 追加
    }
  },
  methods: {
   customFormatter(date) { // ⭐️ 追加
     return moment(date).format('YYYY-MM-DD')
   }
 },
};
</script>

\ 案件のご依頼・ご相談はこちらから /