Closed2
Nuxt3でflowbite-datepickerの言語を変更する
stackoverflowの投稿を参考に試してみる
<script lang="ts" setup>
import Datepicker from 'flowbite-datepicker/Datepicker'
import ja from '../node_modules/flowbite-datepicker/js/i18n/ja.js'
Datepicker.locales.ja = ja
...
</script>
確認するとエラー
[plugin:vite:import-analysis] Failed to resolve import "../node_modules/flowbite-datepicker/js/i18n/ja.js" from "components/SampleDatepicker.vue". Does the file exist?
必要なファイルをpluginsディレクトリにうつして試してみる
■plugins/datepicker-ja.ts
const ja = {
days: ['日曜', '月曜', '火曜', '水曜', '木曜', '金曜', '土曜'],
daysShort: ['日', '月', '火', '水', '木', '金', '土'],
daysMin: ['日', '月', '火', '水', '木', '金', '土'],
months: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
today: '今日',
format: 'yyyy-mm-dd',
titleFormat: 'y年mm月',
clear: 'クリア',
}
export default defineNuxtPlugin(() => {
return {
provide: {
datepickerJa() {
return ja
},
},
}
})
vueファイルを書き直す。
<script lang="ts" setup>
import Datepicker from 'flowbite-datepicker/Datepicker'
const { $datepickerJa } = useNuxtApp()
(Datepicker as any).locales.ja = $datepickerJa()
const element = ref(null) as Ref<null | HTMLInputElement>
const datePicker = new Datepicker(element.value, {
autohide: true,
language: 'ja',
})
...
</script>
日本語で表示できた。
このスクラップは2023/05/16にクローズされました