Memo
vue Vue datepicker
Home
›
Memo
›
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>
[参考]
https://hapicode.com/javascript/vuejs-datepicker.html#%E6%97%A5%E4%BB%98%E3%83%8F%E3%82%A4%E3%83%A9%E3%82%A4%E3%83%88%E8%A1%A8%E7%A4%BA
https://www.kabanoki.net/2560/
関連ページ
Nuxt local起動をhttpsで起動する
#vue
2020-11-11 15:05:58
Nuxt Firebase AuthでSNSログイン
#vue
2021-03-11 20:56:17
Nuxt local起動をhttpsで起動する
#vue
2020-11-11 15:05:58
NuxtでjQueryを利用できるようにする
#vue
2020-06-18 20:25:13
Back