antd 时间选择器，设置显示为中文

最新推荐文章于 2025-03-31 17:40:48 发布

前端大脸

最新推荐文章于 2025-03-31 17:40:48 发布

阅读量7.5k

点赞数 4

分类专栏： react antd 文章标签： antd 中文化

本文链接：https://blog.youkuaiyun.com/qq_41148886/article/details/103121517

版权

react 同时被 2 个专栏收录

6 篇文章

订阅专栏

antd

1 篇文章

订阅专栏

本文介绍如何在antd框架中将DatePicker的时间选择器显示为中文。两种方法包括使用LocaleProvider进行包裹，以及直接全局设置中文环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用antd框架时，一些默认提示为英文，将英文提示改为中文，以DatePicker为例
可以使用

import { Tooltip , Button, Icon, Table, Select, DatePicker, LocaleProvider   } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

将中文化代码用LocaleProvider包裹

 <LocaleProvider locale={zh_CN}>
                            <DatePicker
                                disabledDate={ this.disabledStartDate }
                                showTime
                                format="YYYY-MM-DD HH:mm:ss"
                                value={ startValue }
                                placeholder="起始时间"
                                onChange={ this.onStartChange }
                                onOpenChange={ this.handleStartOpenChange }
                            />
                            <DatePicker
                                disabledDate={ this.disabledEndDate }
                                showTime
                                format="YYYY-MM-DD HH:mm:ss"
                                value={ endValue }
                                placeholder="结束时间"
                                onChange={ this.onEndChange }
                                open={ endOpen }
                                onOpenChange={ this.handleEndOpenChange }
                            />
                        </LocaleProvider>

效果图