react----DateRangePicker控件使用

最新推荐文章于 2025-06-06 09:21:38 发布

weixin_38501752

最新推荐文章于 2025-06-06 09:21:38 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： js javascript reactjs

本文链接：https://blog.youkuaiyun.com/weixin_38501752/article/details/115514503

本文详细介绍了如何在React应用中使用DateRangePicker控件，包括参数配置、中文日期格式设置，以及源码链接和Demo示例。重点讲解了如何设置日期范围选择器的显示格式和日期限制条件。

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

react----DateRangePicker控件使用

先上效果图

在这里插入图片描述
1.组件传入如下参数

          <DateRangePicker
            small
            startDatePlaceholderText="开始日期" //未选时间的中文提示
            endDatePlaceholderText="结束日期"
            monthFormat="YYYY[年]MMMM" //时间选择框的标题格式
            startDate={date.startDate}
            startDateId="startDate"
            endDate={date.endDate}
            endDateId="endDate"
            onDatesChange={value => setDate(value)}
            focusedInput={focused}
            onFocusChange={focusedInput => setFocused(focusedInput)}
            orientation="horizontal"
            openDirection="down"
            isOutsideRange={(day) => { //可选日期为今天之前,不设则默认为从今天开始往后
              return !isBeforeDay(day, moment());
            }}
          >

2.时间格式使用中文表现格式需要进行如下设置


import moment from "moment";
import 'moment/locale/zh-cn'

  useEffect(()=>{
    //初始化 Moment.js 中的地域信息，日期选择等控件需要使用
    moment.locale(['zh-cn'])
    //console.log(TAG,"useEffect moment:",moment.locales()," moment.locale:",moment.locale())
  },[])

3.DateRangePicker
源码链接
 Demo链接