react-day-picker 库里日期选择器中文展示

最新推荐文章于 2025-02-05 17:00:41 发布

weixin_48648178

最新推荐文章于 2025-02-05 17:00:41 发布

阅读量1k

点赞数

文章标签：前端 react.js

本文链接：https://blog.csdn.net/weixin_48648178/article/details/130865464

版权

文章介绍了如何在项目中引入date-fns的中文库，并详细说明了在DayPicker组件中设置locale属性和localeUtils对象的过程，以实现日期和星期的中文格式化显示，包括日、月、星期的短格式和长格式，以及设定一周的起始日。

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

先引入中文库
import { zhCN } from 'date-fns/locale';
然后再DayPicker组件里添加这2个属性
<DayPicker
          locale="zh-cn"
          localeUtils={{
            formatDay: (date) => format(date, 'd', { locale: zhCN }),
            formatMonthTitle: (date) => format(date, 'yyyy年M月', { locale: zhCN }),
            formatWeekdayShort: (index) => format(new Date(2023, 0, index + 1), 'EE', { locale: zhCN }),
            formatWeekdayLong: (index) => format(new Date(203, 0, index + 1), 'EEEE', { locale: zhCN }),
            getFirstDayOfWeek: () => 1
          }}/>
          这样就可以了