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);複製代碼