nuxt.jsのプロジェクトにVue.js用のDatePickerを導入します。
npm install vuejs-datepicker
~/plugins/datepicker.js
import Vue from 'vue'
import DatePicker from 'vuejs-datepicker'
Vue.component('DatePicker', DatePicker)
nuxt.config.js
...
plugins: [
{ src: '~/plugins/datepicker', mode: 'client', ssr: false },
],
...
shims.d.ts プロジェクトのどこかに作る
declare module 'vuejs-datepicker'
declare module 'vuejs-datepicker/dist/locale'
<template>
<div class="l_input">
<Datepicker :language="ja" :v-model="from" :format="dateFormatter" />
</div>
</template>
<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { ja } from 'vuejs-datepicker/dist/locale'
@Component({
components: {
}
})
export default class InputText extends Vue {
from = ''
dateFormatter (date: Date) {
return this.$moment(date).format('YYYY-MM-DD')
}
}
</script>