如何设置 Element-Plus Datepicker 的区域设置

Question

我在

main.ts

中单独导入DatePicker，因为我不想要完整ElementPlus的开销。但是，如果我这样做，如何设置小部件的区域设置？

这是没有语言环境的代码。它以英文显示。

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");

这是我期望的工作，但它什么也没做 - 它仍然以英语显示。也没有错误

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");

这里出了什么问题？

Answer 1

我在文档中找不到明确的解释，但与 app.use() 一起使用的

{ locale: }

选项的唯一示例是完整的

ElementPlus

导入，所以我认为不能假设相同的选项适用于每个组件。 可以与单个组件一起使用的是Config Provider组件

<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>

Element Plus Playground 示例