react----DateRangePicker控件使用

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