@yizhou-library/rangedatepicker

日期区间选择器

@317hu/rangedatepicker 用于日历开始和结束日期、时间的按区间选择输入，其中时间部分可配置为是否显示。

代码演示

:::demo 基础使用，配置可选择开始|结束的日期和时间，条件限制：结束日期、结束时间（同一天以内）都不能早于开始时间。

render() {
  const nowTime = moment(new Date()).format('HH:mm');
  return (
    <div className="markdown-inner">
      <RangeDatePicker
        disabledTime={() => {}}
        showTime={{
          defaultValue: [moment(nowTime, 'HH:mm'), moment('23:59', 'HH:mm')],
          format: 'HH:mm',
        }}
        placeholder={['开始时间', '结束时间']}
        format="YYYY-MM-DD HH:mm"
        onChange={() => {}}
        disabledDateTimeNow
      />
    </div>
  )
}

:::

:::demo 设置今天以前的日期，为不可选。

render() {
  const nowTime = moment(new Date()).format('HH:mm');
  return (
    <div className="markdown-inner">
      <RangeDatePicker
        disabledTime={() => {}}
        showTime={false}
        placeholder={['开始时间', '结束时间']}
        format="YYYY-MM-DD HH:mm"
        disabledDate={(current) => {// disabledDate: (current: moment.Moment) => boolean; 是函数 且需要返回
          return current && moment(current).format('YYYY-MM-DD') < moment(new Date()).format('YYYY-MM-DD');
        }}
        onChange={() => {}}
      />
    </div>
  )
}

:::

:::demo 设置日期，不显示时间设置。

constructor(props) {
  super(props)
  this.state = {}
}

render() {
  const nowTime = moment(new Date()).format('HH:mm');
  return (
    <div className="markdown-inner">
      <RangeDatePicker
        disabledTime={() => {}}
        showTime={false}
        placeholder={['开始日期', '结束日期']}
        format="YYYY-MM-DD"
        disabledDate={(current) => {// disabledDate: (current: moment.Moment) => boolean; 是函数 且需要返回
          return current && moment(current).format('YYYY-MM-DD') < moment(new Date()).format('YYYY-MM-DD');
        }}
        onChange={() => {}}
      />
    </div>
  )
}

:::

API

参数	说明	类型	可选值	默认值
disabledTime	禁用选择的时间，可使用函数返回	moment.Moment,Date,Function	large,small,mini	—
disabledDate	禁用选择的日期，可使用函数返回	Function	true,false	false
showTime	是否显示底部时间选择区	Boolean	true,false	—
placeholder	显示的输入提示文案	Array	['开始时间', '结束时间']	—
format	日期显示的格式	String	YYYY-MM-DD	—
onChange	日期发生变化的回调	Function	—	—
disabledDateTimeNow	是否禁用【今天】的当前时间	Boolean	—	—