import React, { useState } from 'react'; import TimeRangePicker from '../index'; import moment from 'moment'; const Demo = () => { const [dateValue, setDateValue] = useState(null); const [timeValue, setTimeValue] = useState(null); const [data, setData] = useState({ startDate: '', endDate: '' }); const [time, setTime] = useState({ startTime: '', endTime: '' }); const onDateChange = (key, data = []) => { let start = '', end = ''; switch (key) { case 'all': break; case 'yesterday': start = moment().subtract(1, 'days').format(startFormat); end = moment().subtract(1, 'days').format(endFormat); break; case 'today': start = moment().format(startFormat); end = moment().format(endFormat); break; case 'thisWeek': start = moment().startOf('week').format(startFormat); end = moment().endOf('week').format(endFormat); break; case 'lastWeek': start = moment().startOf('week').subtract(1, 'week').format(startFormat); end = moment().endOf('week').subtract(1, 'week').format(endFormat); break; case 'thisMonth': start = moment().startOf('month').format(startFormat); end = moment().endOf('month').format(endFormat); break; case 'lastMonth': start = moment() .month(moment().month() - 1) .startOf('month') .format(startFormat); end = moment() .month(moment().month() - 1) .endOf('month') .format(endFormat); break; case 'thisYear': start = moment().startOf('year').format(startFormat); end = moment().endOf('year').format(endFormat); break; case 'lastYear': start = moment() .year(moment().year() - 1) .startOf('year') .format(startFormat); end = moment() .year(moment().year() - 1) .endOf('year') .format(endFormat); break; case 'customer': if (data && data.length > 0) { start = moment(data[0]).format(startFormat); end = moment(data[1]).format(endFormat); } break; } setDateValue(key); setData({ startDate: start, endDate: end }); }; const onTimeChange = (key, data = []) => { let start = '', end = ''; switch (key) { case 'oneHour': start = moment().subtract(1, 'hour').format(timeFormat); end = moment().format(timeFormat); break; case 'fourHour': start = moment().subtract(4, 'hour').format(timeFormat); end = moment().format(timeFormat); break; case 'twelveHours': start = moment().subtract(12, 'hour').format(timeFormat); end = moment().format(timeFormat); break; case 'roundClock': start = moment().subtract(24, 'hour').format(timeFormat); end = moment().format(timeFormat); break; case 'yesterday': start = moment().subtract(1, 'days').format(startFormat); end = moment().subtract(1, 'days').format(endFormat); break; case 'customer': if (data && data.length > 0) { start = moment(data[0]).format(timeFormat); end = moment(data[1]).format(timeFormat); } break; } setTimeValue(key); setTime({ startTime: start, endTime: end }); }; return ( <> <h3>horizontal</h3> <TimeRangePicker value={dateValue} onChange={onDateChange} defaultValue={dateList[0].key} dataSource={dateList} layout={'horizontal'} /> <br /> <h3>vertical</h3> <TimeRangePicker value={dateValue} onChange={onDateChange} defaultValue={dateList[0].key} dataSource={dateList} layout={'vertical'} /> <br /> <div> startDate:{data.startDate} <br /> endDate:{data.endDate} </div> <br /> <TimeRangePicker value={timeValue} onChange={onTimeChange} dataSource={timeList} timeProps={{ showTime: true }} /> <br /> <div> startTime:{time.startTime} <br /> endTime:{time.endTime} </div> </> ); }; export default Demo; const startFormat = 'YYYY-MM-DD 00:00:00'; const endFormat = 'YYYY-MM-DD 23:59:59'; const timeFormat = 'YYYY-MM-DD hh:mm:ss'; const dateList = [ { key: 'all', name: '全部', }, { key: 'yesterday', name: '昨天', }, { key: 'today', name: '今天', }, { key: 'thisWeek', name: '本周', }, { key: 'lastWeek', name: '上周', }, { key: 'thisMonth', name: '本月', }, { key: 'lastMonth', name: '上月', }, { key: 'thisYear', name: '今年', }, { key: 'lastYear', name: '去年', }, { key: 'customer', name: '自定义', }, ]; const timeList = [ { key: 'oneHour', name: '近1小时', }, { key: 'fourHour', name: '近4小时', }, { key: 'twelveHours', name: '近12小时', }, { key: 'roundClock', name: '近24小时', }, { key: 'yesterday', name: '昨天', }, { key: 'customer', name: '自定义', }, ];