使用ant design的時間組件 #DatePicker日期選擇框# 需求是要起始時間和結(jié)束時間最多范圍是30天，結(jié)束時間不能超過當(dāng)天日期。

import React , {useEffect, useState } from 'react';
import {DatePicker, Select, Table, Tooltip} from 'antd';
const moment = require('moment');
interface IProps {
  deviceId ?: number
  type ?: number
}
const DateChoose= (props:IProps)=>{
    const dateFormat = 'YYYY-MM-DD HH:mm:ss';
    const [startValue,setStartValue] = useState(moment().subtract(30, 'days')); // 開始日期默認是結(jié)束日期往前推30天
    const [endValue,setEndValue] = useState(moment());  // 結(jié)束日期默認是當(dāng)天

    useEffect(()=>{ // 篩選條件改變 觸發(fā)請求
      console.log('getTableData')
     },[endValue,startValue])
    
    // 首先打開時間面板，此方法被調(diào)用
  const disabledStartDate = (startVal) => {
   if (!startVal || !endValue) {
      // 如果沒有選擇結(jié)束日期，則選擇開始日期時，開始日期不能大于今天
      return startVal.valueOf() > new Date().getTime();// 大于今天的日期一律返回true，禁止選擇
    }
    // 如果選擇了結(jié)束日期，則結(jié)束日期和開始日期之差大于30天（24*60*60*1000*30是30天的毫秒數(shù)）,還需要開始日期小于結(jié)束日期，返回true，禁止選擇
    const minus = endMonth.clone().subtract(30, "days");
    return  startVal.valueOf() < minus.valueOf() || endValue.valueOf() <= startVal.valueOf();
  }

  // 控制結(jié)束日期
  const disabledEndDate = (endVal) => {
    if (!endVal || !startValue) {
      // 如果沒有選擇開始日期，則結(jié)束日期時大于今天
      return endVal.valueOf() > new Date().getTime();// 大于今天的日期一律返回true，禁止選擇
    }
    //如果選擇了開始日期，則結(jié)束日期和開始日期除了不能超過30個自然日之外，還需要結(jié)束日期不能小于開始日期，還需要不能超過今天，返回true為不能選擇
    const minus = endMonth.clone().add(30, "days");
    return endVal.valueOf() <= startValue.valueOf() || endVal.valueOf() > moment().endOf('day') || endVal.valueOf() > minus.valueOf();
  }

  // 時間組件fn 選中時間后賦值
  const onStartChange = value => {
    setStartValue(value);
  };

  const onEndChange = value => {
    setEndValue(value);
  };

  // 下拉列表框選擇回調(diào)
  const changeSelect = val =>{
    console.log('val',val)
    setSelectedVal(val)
  }

return (
     <div>
                  <DatePicker
                    disabledDate={disabledStartDate}
                    format={dateFormat}
                    value={startValue}
                    placeholder="開始日期"
                    onChange={onStartChange}
                    showTime={true}
                  />
                  <span className={styles.lines}>~</span>
                  <DatePicker
                    disabledDate={disabledEndDate}
                    format={dateFormat}
                    value={endValue}
                    placeholder="結(jié)束日期"
                    onChange={onEndChange}
                    showTime={true}
                  />
                </div>
)
}

export default DateChoose;