146 lines
4.2 KiB
JavaScript
146 lines
4.2 KiB
JavaScript
import { useState, useEffect } from 'react'
|
|
|
|
const TimeRangePicker = ({
|
|
value = '1m',
|
|
onChange,
|
|
className = ''
|
|
}) => {
|
|
const [timeRange, setTimeRange] = useState(value)
|
|
const [startDate, setStartDate] = useState('')
|
|
const [endDate, setEndDate] = useState('')
|
|
const [showDropdown, setShowDropdown] = useState(false)
|
|
|
|
// 计算日期范围
|
|
const calculateDateRange = (range) => {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
|
|
if (range === '1m') {
|
|
start.setMonth(start.getMonth() - 1)
|
|
} else if (range === '3m') {
|
|
start.setMonth(start.getMonth() - 3)
|
|
} else if (range === '1y') {
|
|
start.setFullYear(start.getFullYear() - 1)
|
|
}
|
|
|
|
const formatDate = (date) => {
|
|
return date.toISOString().split('T')[0]
|
|
}
|
|
|
|
return {
|
|
start: formatDate(start),
|
|
end: formatDate(end)
|
|
}
|
|
}
|
|
|
|
// 初始化时设置日期范围
|
|
useEffect(() => {
|
|
const range = calculateDateRange(value)
|
|
setStartDate(range.start)
|
|
setEndDate(range.end)
|
|
}, [value])
|
|
|
|
// 处理时间范围变化
|
|
const handleTimeRangeChange = (range) => {
|
|
const dateRange = calculateDateRange(range)
|
|
setStartDate(dateRange.start)
|
|
setEndDate(dateRange.end)
|
|
setTimeRange(range)
|
|
if (onChange) {
|
|
onChange(range, dateRange.start, dateRange.end)
|
|
}
|
|
setShowDropdown(false)
|
|
}
|
|
|
|
// 处理自定义日期范围
|
|
const handleCustomRangeApply = () => {
|
|
if (startDate && endDate) {
|
|
setTimeRange('custom')
|
|
if (onChange) {
|
|
onChange('custom', startDate, endDate)
|
|
}
|
|
setShowDropdown(false)
|
|
}
|
|
}
|
|
|
|
// 处理开始日期变化
|
|
const handleStartDateChange = (e) => {
|
|
setStartDate(e.target.value)
|
|
}
|
|
|
|
// 处理结束日期变化
|
|
const handleEndDateChange = (e) => {
|
|
setEndDate(e.target.value)
|
|
}
|
|
|
|
return (
|
|
<div className={`time-range-picker ${className}`}>
|
|
<button
|
|
className="time-range-btn"
|
|
onClick={() => setShowDropdown(!showDropdown)}
|
|
>
|
|
{timeRange === '1m' && '近一个月'}
|
|
{timeRange === '3m' && '近三个月'}
|
|
{timeRange === '1y' && '近一年'}
|
|
{timeRange === 'custom' && startDate && endDate && `${startDate} 至 ${endDate}`}
|
|
{timeRange === 'custom' && (!startDate || !endDate) && '自定义'}
|
|
<span className="dropdown-arrow">▼</span>
|
|
</button>
|
|
{showDropdown && (
|
|
<div className="time-range-dropdown">
|
|
<div className="dropdown-section">
|
|
<h4 className="dropdown-title">自定义范围</h4>
|
|
<div className="custom-date-range">
|
|
<input
|
|
type="date"
|
|
value={startDate}
|
|
onChange={handleStartDateChange}
|
|
max={endDate || new Date().toISOString().split('T')[0]}
|
|
/>
|
|
<span>至</span>
|
|
<input
|
|
type="date"
|
|
value={endDate}
|
|
onChange={handleEndDateChange}
|
|
min={startDate}
|
|
max={new Date().toISOString().split('T')[0]}
|
|
/>
|
|
<button
|
|
className="apply-btn"
|
|
onClick={handleCustomRangeApply}
|
|
>
|
|
确定
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="dropdown-section">
|
|
<h4 className="dropdown-title">快捷选项</h4>
|
|
<ul className="dropdown-options">
|
|
<li
|
|
className={`dropdown-option ${timeRange === '1m' ? 'active' : ''}`}
|
|
onClick={() => handleTimeRangeChange('1m')}
|
|
>
|
|
近一个月
|
|
</li>
|
|
<li
|
|
className={`dropdown-option ${timeRange === '3m' ? 'active' : ''}`}
|
|
onClick={() => handleTimeRangeChange('3m')}
|
|
>
|
|
近三个月
|
|
</li>
|
|
<li
|
|
className={`dropdown-option ${timeRange === '1y' ? 'active' : ''}`}
|
|
onClick={() => handleTimeRangeChange('1y')}
|
|
>
|
|
近一年
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TimeRangePicker
|