Antd使用timePicker封装时间范围选择器（React hook版）

antd中提供了是日期范围选择器及datepaicker封装日期范围选择器的示例，但是没有时间选择范围的组件，这里使用两个timePicker组合一个事件范围选择器，通过disabled属性限定时间可选择范围；（ts+hook,支持form表单）

基本就是通过disabledHours、 disabledMinutes、disabledSeconds分别判断结束时间大于开始时间，这里设置的最小时间差为0s。

import React, { forwardRef } from ‘react‘;
import { Row, Col, TimePicker } from ‘antd‘;
import moment from ‘moment‘;
import { TimePickerProps } from ‘antd/es/time-picker‘;

interface IProps extends TimePickerProps {
  prefixCls?: string;
  value?: any;
  onChange?: any;
}

const TimePickerRange: React.FC<IProps> = (props, ref) => {
  const {
    prefixCls,
    className,
    style,
    onChange,
    value,
    disabled,
    ...rest
  } = props;

  const [startTime, setStartTime] = React.useState(value.start || moment());
  const [endTime, setEndTime] = React.useState(value.end || moment());

  /*定义时间数组*/
  const Hours = Array.from(Array(24), (v, k) => k);
  const Minutes = Array.from(Array(60), (v, k) => k);
  const Seconds = Array.from(Array(60), (v, k) => k);

  const triggerChange = changedValue => {
    if (onChange) {
      onChange(
        Object.assign({}, { start: startTime, end: endTime }, changedValue)
      );
    }
  };

   /*结束时间控制-hour*/
  const disEndHouse = () => {
    if (startTime) {
      let h = startTime.hour();
      return Hours.slice(0, h);
    }
    return [];
  };

  /*结束时间控制-minute）*/
  const disEndMinute = h => {
    if (startTime) {
      if (h > startTime.hour()) return [];
      let m = startTime.minute();
      return Minutes.slice(0, m);
    }
    return [];
  };

  /*结束时间控制-second*/
  const disEndSeconds = (h, m) => {
    if (startTime) {
      if (h > startTime.hour()) return [];
      if (m > startTime.minute()) return [];
      let s = startTime.second();
      return Seconds.slice(0, s);
    }
    return [];
  };

  /*开始时间控制-hour*/
  const disStartHouse = () => {
    if (endTime) {
      let h = endTime.hour();
      return Hours.slice(h, Hours.length - 1);
    }
    return [];
  };

  /*开始时间控制-minute*/
  const disStartMinute = h => {
    if (endTime) {
      if (h < endTime.hour()) return [];
      let m = endTime.minute();
      return Minutes.slice(m, Minutes.length - 1);
    }
    return [];
  };

  /*开始时间控制-second*/
  const disStartSeconds = (h, m) => {
    if (endTime) {
      if (h < endTime.hour()) return [];
      if (m < endTime.minute()) return [];
      let s = endTime.second();
      return Seconds.slice(s, Seconds.length - 1);
    }
    return [];
  };

  return (
    <Row ref={ref}>
      <Col span={12}>
        <TimePicker
          allowClear={false}
          disabled={disabled}
          onChange={value => {
            setStartTime(value);
            triggerChange({ start: value });
          }}
          value={value.start || moment(‘00:00:00‘, ‘HH:mm:ss‘)}
          disabledHours={disStartHouse}
          disabledMinutes={disStartMinute}
          disabledSeconds={disStartSeconds}
        />
      </Col>
      <Col span={12}>
        <TimePicker
          allowClear={false}
          disabled={disabled}
          onChange={value => {
            setEndTime(value);
            triggerChange({ end: value });
          }}
          value={value.end || moment(‘23:59:59‘, ‘HH:mm:ss‘)}
          disabledHours={disEndHouse}
          disabledMinutes={disEndMinute}
          disabledSeconds={disEndSeconds}
        />
      </Col>
    </Row>
  );
};

export default forwardRef(TimePickerRange);

出处链接：https://juejin.im/post/5d23e4fc6fb9a07edf2769ce

原文地址：https://www.cnblogs.com/bescheiden/p/12084431.html