时间快捷键1 弹窗用法 2 popver 时间快捷键的常用值。今天昨天本周上周本月上月本年上年等

1 弹窗用法

如果是弹窗用法

import React, { useState, useEffect, useContext, useRef } from "react";
import { Button, Modal, DatePicker, Space,   Row, Col,Divider} from 'antd';
import { arrTostr, filterOption } from '_s/libs/util.js' //数组转字符串
const { RangePicker } = DatePicker;

interface Props {
  isOpen: boolean,
  onclose: () => void,
  onhandleTime: (data: any) => void
}

const DateModal = (props: Props) => {
  const { isOpen, onclose,onhandleTime } = props
  const [time,setTime]=useState<any>(['','']) // 时间time 时间戳
  const [dimension,setDimension]=useState<any>('') // 时间类型，天 季，年
  const [pickerValue,setPickerValue]=useState<any>() 
  const [showTime,setShowTime]=useState<any>([]) //回显时间
  const [selectedDate, setSelectedDate] = useState('');
  // 确认弹窗
  const handleOk = () => {
    onhandleTime({"time":time,"dimension":dimension,"showTime":showTime})
    // onclose()
    setTime(['',''])
    setShowTime([])
    setPickerValue(null)
    setDimension('')
    setSelectedDate('')
  };
  //关闭弹窗
  const handleCancel = () => {
    setTime(['',''])
    setShowTime([])
    setDimension('')
    setPickerValue(null)
    onclose()
    setSelectedDate('')
  
  };
  //修改时间控件
  const handleRange = (dates: any) => {
    const dataTimstamp =  arrTostr(dates)
    if(dates&&dates.length>0){
      const start:any =dates[0].format('YYYY-MM-DD')
      const end:any=dates[1].format('YYYY-MM-DD')
      setShowTime([start,end])
    }else {
      setShowTime([])
    }
    console.log(dates,dataTimstamp)
  
    setTime(dataTimstamp)
    setPickerValue(dates)
    setDimension('other')
  }
  //今天
  const getToday=()=>{
    const today = new Date()
    const todayTimestamp = [Math.floor(today.getTime()/1000), Math.floor(today.getTime()/1000)]
    console.log(today,todayTimestamp); // 在控制台输出当前时间
    setShowTime([showTimeFn(today),showTimeFn(today)])
    console.log('时间',showTime)
    setTime(todayTimestamp)
  }
  //昨天
  const getYesterday = () => {
    const today = new Date();
    const yesterday = new Date(today);
    yesterday.setDate(yesterday.getDate() - 1);
    const start = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate());
    const end = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate(), 23, 59, 59);
    console.log(start,end)
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    const yesterdayTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(yesterdayTimestamp); // 在控制台输出昨天的时间数组
    setTime(yesterdayTimestamp)
  };
  //本周
  const getCurrentWeek = () => {
    const today = new Date();
    const currentDay = today.getDay(); // 获取今天是星期几 0表示星期日;6表示星期六
    const diff = today.getDate() - currentDay + (currentDay === 0 ? -6 : 1); // 计算本周起始日期的日期差
    const start = new Date(today.setDate(diff)); // 获取本周起始日期
    const end = new Date(); // 获取当前日期
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    const currentWeekTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(start, end); // 在控制台输出本周的起始日期和结束
    console.log(currentWeekTimestamp); // 在控制台输出本周的时间数组
    setTime(currentWeekTimestamp)
  };
  //上周
  const getLastWeek = () => {
    const today = new Date();
    const currentDay = today.getDay(); // 获取今天是星期几
    const diff = today.getDate() - currentDay - 6; // 计算上周起始日期的日期差
    const start = new Date(today.setDate(diff)); // 获取上周起始日期
    const end = new Date(today.setDate(today.getDate() + 6)); // 获取上周结束日期
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    const lastWeekTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(lastWeekTimestamp); // 在控制台输出本周的时间数组
    console.log(start, end); // 在控制台输出本周的起始日期和结束
    setTime(lastWeekTimestamp)
  };
//本月
  const getCurrentMonth = () => {
    const today = new Date();
    const start = new Date(today.getFullYear(), today.getMonth(), 1);
    const end = new Date();
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    console.log(start,end)
    const currentMonthTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(currentMonthTimestamp); // 在控制台输出本月的时间数组
    setTime(currentMonthTimestamp)
  };
  //上月
  const getLastMonth = () => {
    const today = new Date();
    const start = new Date(today.getFullYear(), today.getMonth() - 1, 1);
    const end = new Date(today.getFullYear(), today.getMonth(), 0, 23, 59, 59);
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    console.log(start,end)
    const lastMonthTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(lastMonthTimestamp); // 在控制台输出上月的时间数组
    setTime(lastMonthTimestamp)
  };
  //本季度
  const getCurrentQuarter = () => {
    const today = new Date();
    const quarter = Math.floor(today.getMonth() / 3);
    const start = new Date(today.getFullYear(), quarter * 3, 1);
    const end = new Date();
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    console.log(start,end)
    const currentQuarterTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(currentQuarterTimestamp); // 在控制台输出本季度的时间数组
    setTime(currentQuarterTimestamp)
  };
  //上季度
  const getLastQuarter = () => {
    const today = new Date();
    const quarter = Math.floor(today.getMonth() / 3) - 1;
    const start = new Date(today.getFullYear(), quarter * 3, 1);
    const end = new Date(today.getFullYear(), quarter * 3 + 2, new Date(today.getFullYear(), quarter * 3 + 1, 0).getDate(), 23, 59, 59);
    console.log(start,end)
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    const lastQuarterTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(lastQuarterTimestamp); // 在控制台输出上季度的时间数组
    setTime(lastQuarterTimestamp)
  };
  // 本年
  const getCurrentYear = () => {
    const today = new Date();
    const start = new Date(today.getFullYear(), 0, 1);
    const end = new Date();
    console.log(start,end)
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    const currentYearTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(currentYearTimestamp); // 在控制台输出本年度的时间数组
    setTime(currentYearTimestamp)
  };
  // 上年
  const getLastYear = () => {
    const today = new Date();
    const start = new Date(today.getFullYear() - 1, 0, 1);
    const end = new Date(today.getFullYear() - 1, 11, 31, 23, 59, 59);
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    console.log(start,end)
    const lastYearTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(lastYearTimestamp); // 在控制台输出上年度的时间数组
    setTime(lastYearTimestamp)
  };

  // 中国标准时间转 年-月-日时间
  const showTimeFn=(time:any)=>{
      var date = new Date(time)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      const showTime=  y + '-' + m + '-' + d
      console.log('showTime',showTime)
      return  showTime
  }

  //选择点击时间
  const clickDate=(dates:any,dimension:string)=>{
    console.log(dates,dimension,selectedDate)
    setDimension(dimension)
    setSelectedDate(dates)
    switch(dates){
      case 'today':

        getToday()
        break;
        case 'yesterday':
          getYesterday()
          break;
          case 'thisWeek':
            getCurrentWeek()
          break;
          case 'lastWeek':
            getLastWeek()
          break;
          case 'thisMonth':
            getCurrentMonth()
          break;
          case 'lastMonth':
            getLastMonth()
          break;
          case 'thisQuarter':
            getCurrentQuarter()
          break;
          case 'lastQuarter':
            getLastQuarter()
          break;
          case 'thisYear':
            getCurrentYear()
          break;
          case 'lastYear':
            getLastYear()
          break;
          default:
            break;
    }
  }



  return (
    <div className="modalClass" >
      <Modal title="日期选择"  className="timeModal"   width={360} open={isOpen}   footer={null}  onCancel={handleCancel}>
        <div>
          <div style={{width:'100%'}}>
            <Space direction="vertical" size={12}  style={{width:'100%'}}>
              <div className="rowClass">
                  <div className="titleLeft">天</div>
                  <div className={`cursorClass ${selectedDate =='today' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('today','day')}>今天</div>
                  <div className={`cursorClass ${selectedDate =='yesterday' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('yesterday','day')}>昨天</div>
              </div>
              <div className="rowClass"> 
                <div  className="titleLeft">周</div>
                <div className={`cursorClass ${selectedDate =='thisWeek' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('thisWeek','week')}>本周</div>
                <div className={`cursorClass ${selectedDate =='lastWeek' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('lastWeek','week')}>上周</div>
           
              </div>
              <div className="rowClass"> 
                <div  className="titleLeft">月</div>
                <div className={`cursorClass ${selectedDate =='thisMonth' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('thisMonth','month')}>本月</div>
                <div className={`cursorClass ${selectedDate =='lastMonth' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('lastMonth','month')}>上月</div>
              </div>
              <div className="rowClass">  
                <div  className="titleLeft">季度</div>
                <div className={`cursorClass ${selectedDate =='thisQuarter' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('thisQuarter','quarter')}>本季度</div>
                <div className={`cursorClass ${selectedDate =='lastQuarter' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('lastQuarter','quarter')}>上一季度</div>
              </div>
              <div className="rowClass"> 
                <div  className="titleLeft">年度</div>
                <div className={`cursorClass ${selectedDate =='thisYear' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('thisYear','year')}>本年度</div>
                <div className={`cursorClass ${selectedDate =='lastYear' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('lastYear','year')}>上一年度</div>
              </div>
            </Space>
          </div>
          <div  className="timeClass">
            <div className="title">
              自定义
            </div>
            <div>
            <RangePicker value={pickerValue} allowClear style={{ width: '100%' }} onChange={handleRange} />
            </div>
          </div>
          <div style={{textAlign:'right',marginTop:'20px'}}>   <Button type="primary"  onClick={handleOk}>确认</Button> </div>
        </div>
      </Modal>
    </div>
  );
};

export default DateModal;

2 popver



### 父组件

 <div className="desktop_event_time">
                        <Popover placement="bottomRight" content={<DatePop onhandleTime={handleTime} onclose={hideOpen} />} title="选择时间" trigger="click" open={open}
                            onOpenChange={handleOpenChange}>
                            {
                                flagTime ? (<div>
                                    <span style={{ color: '#cccccc' }}>选择日期</span>
                                    <span style={{ marginLeft: '70px' }}>
                                        <InsertRowAboveOutlined />
                                    </span>
                                </div>) : (
                                    <Space>
                                        <span className="showTime" >{showTime[0]} 至 {showTime[1]}</span>
                                        <div style={{ paddingTop: '5px', display: 'inline-block', }}>
                                            <span><TimesIcondate /></span>
                                        </div>
                                    </Space>

                                )
                            }
                        </Popover>
                    </div>


子组件

import React, { useState, useEffect, useContext, useRef } from "react";
import { Button, Modal, DatePicker, Space,   Row, Col,Divider} from 'antd';
import { arrTostr, filterOption } from '_s/libs/util.js' //数组转字符串
const { RangePicker } = DatePicker;

interface Props {
  isOpen: boolean,
  onclose: () => void,
  onhandleTime: (data: any) => void
}

const DateModal = (props: Props) => {
  const { isOpen, onclose,onhandleTime } = props
  const [time,setTime]=useState<any>(['','']) // 时间time 时间戳
  const [dimension,setDimension]=useState<any>('') // 时间类型，天 季，年
  const [pickerValue,setPickerValue]=useState<any>() 
  const [showTime,setShowTime]=useState<any>([]) //回显时间
  const [selectedDate, setSelectedDate] = useState('');
  // 确认弹窗
  const handleOk = () => {
    onhandleTime({"time":time,"dimension":dimension,"showTime":showTime})
    onclose()
    setTime(['',''])
    setShowTime([])
    setPickerValue(null)
    setDimension('')
    setSelectedDate('')
  };
  //关闭弹窗
  const handleCancel = () => {
    setTime(['',''])
    setShowTime([])
    setDimension('')
    setPickerValue(null)
    onclose()
    setSelectedDate('')
  
  };
  //修改时间控件
  const handleRange = (dates: any) => {
    const dataTimstamp =  arrTostr(dates)
    if(dates&&dates.length>0){
      const start:any =dates[0].format('YYYY-MM-DD')
      const end:any=dates[1].format('YYYY-MM-DD')
      setShowTime([start,end])
    }else {
      setShowTime([])
    }
    console.log(dates,dataTimstamp)
  
    setTime(dataTimstamp)
    setPickerValue(dates)
    setDimension('other')
  }
  //今天
  const getToday=()=>{
    const today = new Date()
    const todayTimestamp = [Math.floor(today.getTime()/1000), Math.floor(today.getTime()/1000)]
    console.log(today,todayTimestamp); // 在控制台输出当前时间
    setShowTime([showTimeFn(today),showTimeFn(today)])
    console.log('时间',showTime)
    setTime(todayTimestamp)
  }
  //昨天
  const getYesterday = () => {
    const today = new Date();
    const yesterday = new Date(today);
    yesterday.setDate(yesterday.getDate() - 1);
    const start = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate());
    const end = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate(), 23, 59, 59);
    console.log(start,end)
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    const yesterdayTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(yesterdayTimestamp); // 在控制台输出昨天的时间数组
    setTime(yesterdayTimestamp)
  };
  //本周
  const getCurrentWeek = () => {
    const today = new Date();
    const currentDay = today.getDay(); // 获取今天是星期几 0表示星期日;6表示星期六
    const diff = today.getDate() - currentDay + (currentDay === 0 ? -6 : 1); // 计算本周起始日期的日期差
    const start = new Date(today.setDate(diff)); // 获取本周起始日期
    const end = new Date(); // 获取当前日期
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    const currentWeekTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(start, end); // 在控制台输出本周的起始日期和结束
    console.log(currentWeekTimestamp); // 在控制台输出本周的时间数组
    setTime(currentWeekTimestamp)
  };
  //上周
  const getLastWeek = () => {
    const today = new Date();
    const currentDay = today.getDay(); // 获取今天是星期几
    const diff = today.getDate() - currentDay - 6; // 计算上周起始日期的日期差
    const start = new Date(today.setDate(diff)); // 获取上周起始日期
    const end = new Date(today.setDate(today.getDate() + 6)); // 获取上周结束日期
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    const lastWeekTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(lastWeekTimestamp); // 在控制台输出本周的时间数组
    console.log(start, end); // 在控制台输出本周的起始日期和结束
    setTime(lastWeekTimestamp)
  };
//本月
  const getCurrentMonth = () => {
    const today = new Date();
    const start = new Date(today.getFullYear(), today.getMonth(), 1);
    const end = new Date();
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    console.log(start,end)
    const currentMonthTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(currentMonthTimestamp); // 在控制台输出本月的时间数组
    setTime(currentMonthTimestamp)
  };
  //上月
  const getLastMonth = () => {
    const today = new Date();
    const start = new Date(today.getFullYear(), today.getMonth() - 1, 1);
    const end = new Date(today.getFullYear(), today.getMonth(), 0, 23, 59, 59);
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    console.log(start,end)
    const lastMonthTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(lastMonthTimestamp); // 在控制台输出上月的时间数组
    setTime(lastMonthTimestamp)
  };
  //本季度
  const getCurrentQuarter = () => {
    const today = new Date();
    const quarter = Math.floor(today.getMonth() / 3);
    const start = new Date(today.getFullYear(), quarter * 3, 1);
    const end = new Date();
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    console.log(start,end)
    const currentQuarterTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(currentQuarterTimestamp); // 在控制台输出本季度的时间数组
    setTime(currentQuarterTimestamp)
  };
  //上季度
  const getLastQuarter = () => {
    const today = new Date();
    const quarter = Math.floor(today.getMonth() / 3) - 1;
    const start = new Date(today.getFullYear(), quarter * 3, 1);
    const end = new Date(today.getFullYear(), quarter * 3 + 2, new Date(today.getFullYear(), quarter * 3 + 1, 0).getDate(), 23, 59, 59);
    console.log(start,end)
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    const lastQuarterTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(lastQuarterTimestamp); // 在控制台输出上季度的时间数组
    setTime(lastQuarterTimestamp)
  };
  // 本年
  const getCurrentYear = () => {
    const today = new Date();
    const start = new Date(today.getFullYear(), 0, 1);
    const end = new Date();
    console.log(start,end)
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    const currentYearTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(currentYearTimestamp); // 在控制台输出本年度的时间数组
    setTime(currentYearTimestamp)
  };
  // 上年
  const getLastYear = () => {
    const today = new Date();
    const start = new Date(today.getFullYear() - 1, 0, 1);
    const end = new Date(today.getFullYear() - 1, 11, 31, 23, 59, 59);
    setShowTime([showTimeFn(start),showTimeFn(end)])
     console.log('时间',showTime)
    console.log(start,end)
    const lastYearTimestamp = [Math.floor(start.getTime() / 1000), Math.floor(end.getTime() / 1000)];
    console.log(lastYearTimestamp); // 在控制台输出上年度的时间数组
    setTime(lastYearTimestamp)
  };

  // 中国标准时间转 年-月-日时间
  const showTimeFn=(time:any)=>{
      var date = new Date(time)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      const showTime=  y + '-' + m + '-' + d
      console.log('showTime',showTime)
      return  showTime
  }

  //选择点击时间
  const clickDate=(dates:any,dimension:string)=>{
    console.log(dates,dimension,selectedDate)
    setDimension(dimension)
    setSelectedDate(dates)
    switch(dates){
      case 'today':

        getToday()
        break;
        case 'yesterday':
          getYesterday()
          break;
          case 'thisWeek':
            getCurrentWeek()
          break;
          case 'lastWeek':
            getLastWeek()
          break;
          case 'thisMonth':
            getCurrentMonth()
          break;
          case 'lastMonth':
            getLastMonth()
          break;
          case 'thisQuarter':
            getCurrentQuarter()
          break;
          case 'lastQuarter':
            getLastQuarter()
          break;
          case 'thisYear':
            getCurrentYear()
          break;
          case 'lastYear':
            getLastYear()
          break;
          default:
            break;
    }
  }



  return (
    <div className="modalClass">
          <div className="modalshortcut">
              <div className="modalshortcutItem">
                  <div className="titleLeft">天</div>
                  <div className={`cursorClass ${selectedDate =='today' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('today','day')}>今天</div>
                  <div className={`cursorClass ${selectedDate =='yesterday' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('yesterday','day')}>昨天</div>
              </div>
              <div className="modalshortcutItem"> 
                <div  className="titleLeft">周</div>
                <div className={`cursorClass ${selectedDate =='thisWeek' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('thisWeek','week')}>本周</div>
                <div className={`cursorClass ${selectedDate =='lastWeek' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('lastWeek','week')}>上周</div>
           
              </div>
              <div className="modalshortcutItem"> 
                <div  className="titleLeft">月</div>
                <div className={`cursorClass ${selectedDate =='thisMonth' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('thisMonth','month')}>本月</div>
                <div className={`cursorClass ${selectedDate =='lastMonth' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('lastMonth','month')}>上月</div>
              </div>
              <div className="modalshortcutItem">  
                <div  className="titleLeft">季度</div>
                <div className={`cursorClass ${selectedDate =='thisQuarter' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('thisQuarter','quarter')}>本季度</div>
                <div className={`cursorClass ${selectedDate =='lastQuarter' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('lastQuarter','quarter')}>上一季度</div>
              </div>
              <div className="modalshortcutItem"> 
                <div  className="titleLeft">年度</div>
                <div className={`cursorClass ${selectedDate =='thisYear' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('thisYear','year')}>本年度</div>
                <div className={`cursorClass ${selectedDate =='lastYear' ? 'cursorClassSelect' : ''}`} onClick={()=>clickDate('lastYear','year')}>上一年度</div>
              </div>
          </div>
          <div  className="timeClass">
            <div className="title">
              自定义
            </div>
            <div>
            <RangePicker value={pickerValue} allowClear style={{ width: '100%' }} onChange={handleRange} />
            </div>
          </div>
          <div style={{textAlign:'right',marginTop:'20px'}}>   <Button type="primary"  onClick={handleOk}>确认</Button> </div>
    </div>
  );
};

export default DateModal;