I'm importing the DatePicker separately in main.ts, because I don't want the overhead of the full ElementPlus. However, how can I set the locale for the widget if I do this ?
This is the code without locale. It shows up in english.
import App from "./App.vue";
import { createApp } from "vue";
import "element-plus/dist/index.css";
import { ElDatePicker } from "element-plus";
...
const app = createApp(App);
app.use(ElDatePicker);
app.mount("#app");
This is what I would expect to work, but it does nothing - it still shows up in english. also no errors
import App from "./App.vue";
import { createApp } from "vue";
import "element-plus/dist/index.css";
import { ElDatePicker } from "element-plus";
import {dayjs} from 'element-plus';
import dayjsLocale from "dayjs/locale/nl";
import elmplusLocale from 'element-plus/es/locale/lang/nl';
...
const app = createApp(App);
dayjs.locale(dayjsLocale);
app.use(ElDatePicker, { locale: elmplusLocale });
app.mount("#app");
What is wrong here ?
I can't find an explicit explanation in the documentation but the only examples of the { locale: } option being used with app.use() is with the full ElementPlus import, so I don't think it can be assumed that the same option works on a per component basis. What can be used with single component is the Config Provider component
<template>
<el-config-provider :locale="nl">
<el-date-picker v-model="value1" type="date" placeholder="Pick a day" />
</el-config-provider>
</template>
<script setup>
import { ref } from 'vue'
import nl from 'element-plus/dist/locale/nl.mjs'
const value1 = ref('')
</script>