Naive UI日期选择器转为中文,选中时间戳转为日期格式yyy-MM-DD

Vue 20 0 2025-04-18

Naive UI日期选择器转为中文,选中时间戳转为日期格式yyy-MM-DD

Naive-ui 通过使用 n-config-provider 调整语言,将 n-config-provider 的 date-locale 设为从 naive-ui 导入的 dateZhCN 来设定全局日期中文。

导入:

import { NConfigProvider } from 'naive-ui'

import { zhCN, dateZhCN } from 'naive-ui'

然后在标签中设置:

<div style="width: 200px;">
            <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
                <n-date-picker v-model:formatted-value="cdata" value-format="yyyy-MM-dd" type="date" />
            </n-config-provider>
            <div>{{ cdata }}</div>
</div>
注意上面的属性用法,格式化日期。

完整代码如下:

<template>
<div style="width: 200px;">
            <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
                <n-date-picker v-model:formatted-value="cdata" value-format="yyyy-MM-dd" type="date" />
            </n-config-provider>
            <div>{{ cdata }}</div>
        </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { NConfigProvider } from 'naive-ui'
import { zhCN, dateZhCN } from 'naive-ui'
const cdata = ref(null);
</script>


上一篇:vue生命周期(钩子函数)介绍

下一篇:没有了

讨论数量:0

请先登录再发表讨论。 2025-04-19

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链