AntD uses TimePicker to encapsulate the time range selector (React hook version)

antD provides an example of date range selector and datepaicker encapsulating date range selector, but there is no component of time selection range. Here, two timepickers are used to combine an event range selector, and the time optional range is limited by the disabled attribute; (ts+hook, support form form form form)

Basically, the end time is greater than the start time by disabledHours, disabledMinutes and disabledSeconds. The minimum time difference set here is 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());

  /*Define time array*/
  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)
      );
    }
  };

   /*End time control hour*/
  const disEndHouse = () => {
    if (startTime) {
      let h = startTime.hour();
      return Hours.slice(0, h);
    }
    return [];
  };

  /*End time control - minute)*/
  const disEndMinute = h => {
    if (startTime) {
      if (h > startTime.hour()) return [];
      let m = startTime.minute();
      return Minutes.slice(0, m);
    }
    return [];
  };

  /*End time control - 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 [];
  };

  /*Start time control hour*/
  const disStartHouse = () => {
    if (endTime) {
      let h = endTime.hour();
      return Hours.slice(h, Hours.length - 1);
    }
    return [];
  };

  /*Start time control - minute*/
  const disStartMinute = h => {
    if (endTime) {
      if (h < endTime.hour()) return [];
      let m = endTime.minute();
      return Minutes.slice(m, Minutes.length - 1);
    }
    return [];
  };

  /*Start time control - 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);

Tags: PHP React Attribute REST

Posted on Fri, 01 Nov 2019 09:09:09 -0700 by Pawn