Closed2

Nuxt3でflowbite-datepickerの言語を変更する

ととかるちょととかるちょ

https://stackoverflow.com/questions/73566007/how-to-change-the-locale-in-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にクローズされました