FEV2 / fw-cms

  import React, { useState, useEffect, useRef } from 'react';
  import { DatePicker as Picker } from 'antd';
  import moment from 'moment';
  import type { Moment } from 'moment';
  import './style.less';
  

  interface searchParams<T> {
    trid?: number | undefined;
    date?: Array<T>

  }

  const DatePicker: any = Picker;
  const { RangePicker } = DatePicker;

  type RangeValue = [Moment | undefined, Moment | undefined];
  

  function PlayBackPicker(props: any) {
    const { handelDate } = props;

    const startTime = moment(new Date()).startOf('days').valueOf();
    const endTime = moment(new Date()).endOf('days').valueOf();
    const date = useRef<Array<number | null>>([startTime, endTime]);
    const [dateFlag, setDateFlag] = useState<RangeValue>([moment(new Date()).startOf('days'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss').endOf('days')]);
    const [flag, setFlag] = useState<boolean>(true);

    useEffect(() => {
      handelDate(date.current);
    }, []);
  
    /**
     * @description: 年月日时间选择
     * @param {*}
     * @return {*}
     */
    const disabledDate = (current: Moment) => {
      if (flag) {
        //禁用当天之后的时间    
        return current > moment().endOf('day');
      }
      //限制选择开始时间后的取值范围
      const startHour = dateFlag[0] && dateFlag[0].hour();
      const startMinute = dateFlag[0] && dateFlag[0].minute();
      const startSecond = dateFlag[0] && dateFlag[0].second();
      const beforeDate = dateFlag[0] && (current > moment().endOf('day') || moment(current).set({ 'hour': startHour, 'minute': startMinute, "second": startSecond }).diff(dateFlag[0], 'days') > 1);
      //限制选择结束时间后的取值范围
      const afterHour = dateFlag[1] && dateFlag[1].hour();
      const afterMinute = dateFlag[1] && dateFlag[1].minute();
      const afterSecond = dateFlag[1] && dateFlag[1].second();
      const afterDate = dateFlag[1] && dateFlag[1].diff(moment(current).set({ 'hour': afterHour, 'minute': afterMinute, "second": afterSecond }), 'days') > 1;
      return !!beforeDate || !!afterDate;
    };

    /**
     * @description: 日期时分秒时间范围
     * @param {any} date
     * @param {any} type
     * @return {*}
     */
    const disabledTracksTime = (date: any, type: any) => {
      if (!date) return;
      const { _d: checkDate, _i: nowDate } = date;
      const checkYear = moment(checkDate).format('YYYY-MM-DD');
      const nowYear = moment(nowDate).format('YYYY-MM-DD');

      const checkHours = moment(checkDate).format('HH');
      const nowHours = moment(nowDate).format('HH');
  

      // if (type === 'start') {
      //     const hour = moment(date).hour();
      //     const minute = moment(date).minute();
      //     const second = moment(date).second();
      //     return {
      //         disabledHours: () => {
      //             const disabledArr = timeArr(24).splice(hour + 1, timeArr(24).length - hour - 1);
      //             console.log('disabledArr1', disabledArr);
      //             return disabledArr;
      //         },
      //         disabledMinutes: () => {
      //             const disabledArr = timeArr(60).splice(minute, timeArr(60).length - minute);
      //             console.log('disabledArr2', disabledArr);

      //             return disabledArr;
      //         },
      //         disabledSeconds: () => {
      //             const disabledArr = timeArr(60).splice(second, timeArr(60).length - second);
      //             console.log('disabledArr3', disabledArr);

      //             return disabledArr;
      //         },
      //     };
      // }

  
      const nowHour = moment(nowDate).hour();
      const nowMinute = moment(nowDate).minute();
      const nowSecond = moment(nowDate).second();
      const resultLimit = {
        // type: 'end',
        disabledHours: () => {
          const disabledArr = timeArr(24).splice(nowHour + 1, timeArr(24).length - nowHour);
          return disabledArr;
        },
        disabledMinutes: () => {
          const disabledArr = timeArr(60).splice(nowMinute, timeArr(60).length - nowMinute);
          return disabledArr;
        },
        disabledSeconds: () => {
          const disabledArr = timeArr(60).splice(nowSecond, timeArr(60).length - nowSecond);
          return disabledArr;
        },
      };
      if (checkYear === nowYear && checkHours !== nowHours) {
        return { disabledHours: resultLimit.disabledHours };
      }
      if (checkYear === nowYear && checkHours === nowHours) {
        return resultLimit;

      }
    };
    /**
     * @description: 时分秒时间数组
     * @param {number} length
     * @return {*}
     */
    const timeArr = (length: number): Array<number> => {
      const arr = Array.from(Array(length), (value, index) => index);
      return arr;
    };
    const onOpenChange = (type: boolean) => {
      if (type) {
        setDateFlag([undefined, undefined]);
        if (date.current[0] !== null && date.current[1] !== null) {
          date.current = [null, null];
          handelDate([null, null]);
        }
      } else {
        setFlag(true);
      }
    };
    return (
      <div>
  
        <RangePicker
          format="YYYY-MM-DD HH:mm:ss"
          allowClear={false}
          value={dateFlag}
          showTime={{
            hideDisabledOptions: true,
          }}
          disabledDate={disabledDate}
          disabledTime={disabledTracksTime}

          // max={disabledTracksTime}

          onCalendarChange={
            (value: any) => {
              setDateFlag(value);
              setFlag(false);
            }

          }

          onOpenChange={onOpenChange}
          onChange={(dateVal: Object, dateString: Array<string>) => {
            const dateTimestamp = dateString.map(item => {
              return moment(item).valueOf();
            });
            date.current = dateTimestamp;
            handelDate(dateTimestamp);
          }}
          onOk={
            (val: any) => {
              console.log('val', val);
            }

          }

        />
      </div>
    );

  }
  export default PlayBackPicker;