0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

vuejs-datepickerで動的に多言語対応する方法

Last updated at Posted at 2020-10-15

概要

ユーザーが設定している表示言語設定に応じてvuejs-datepickerの表示言語を動的に変更するという実装をする際、vuejs-datepickerの表示言語を親コンポーネントから制御する方法に詰まったのでメモを残しておくの巻

#困ったこと
親コンポーネントとvuejs-datepickerを使用している子コンポーネントが存在し、親コンポーネントから渡すpropsに応じて子コンポーネント側で使用しているvuejs-datepickerの表示言語を変更すること

#解決策
全ての言語を配列としてimportし、dataオブジェクトの任意のプロパティの値として指定しておきます(下記コードの場合、all_langという名前でimportし、dataオブジェクトのlanguagesというプロパティの値としてall_langを指定しています)。
そして親コンポーネント側から使用したい言語を文字列でpropsとして渡し、その文字列をもとにlanguagesの配列から使用したい言語オブジェクトを抽出し、それをdatepickerのlanguageプロパティに指定すれば解決しました!あとは何らかの方法でjaやenなど言語の識別文字列をどこからか取得するだけ。
ちなみに下記の場合、親コンポーネントからスペイン語を指定しており、デフォルト日本語になっています!

App.vue
<template>
    <calender
        v-model="form.specical_date"
        title="ブロックタイトル"
        placeholder="プレースホルダー"
        language="es"
    />
</template>

<script>
import Calender from './components/Calender.vue';
export default {
    components: {
        Calender,
    },
    data() {
        return {
            form: {
                specical_date: null,
            },
        };
    },
};
</script>
Calender.vue
<template>
    <div>
        <span>{{ title }}</span>
        <datepicker
            format="yyyy-MM-dd"
            :language="languages[language]"
            :placeholder="placeholder"
            :clear-button="true"
            @input="updateDate"
        />
    </div>
</template>

<script>
import Datepicker from 'vuejs-datepicker';
import * as all_lang from 'vuejs-datepicker/dist/locale';
export default {
    components: {
        Datepicker
    },
    props: {
        title: {
            type: String,
            default: '',
        },
        placeholder: {
            type: String,
            default: ''
        },
        language: {
            type: String,
            default: 'ja'
        }
    },
    data() {
        return {
            languages: all_lang,
        };
    },
    methods: {
        updateDate(val) {
            this.$emit('input', val);
        },
    }
};
</script>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?