react如何制作日期选择
使用原生HTML日期选择器
React可以直接使用HTML5的<input type="date">实现简单的日期选择功能。这种方式无需额外依赖，适合基础需求。
import React, { useState } from 'react';
function DatePicker() {
const [selectedDate, setSelectedDate] = useState('');
return (
<div>
<label>选择日期：</label>
<input
type="date"
value={selectedDate}
onChange={(e) => setSelectedDate(e.target.value)}
/>
<p>已选择：{selectedDate}</p>
</div>
);
}
export default DatePicker;使用第三方库（如react-datepicker）
对于更复杂的日期选择需求（如范围选择、自定义样式），推荐使用react-datepicker库。需先安装依赖：
npm install react-datepicker基础示例：
import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
function CustomDatePicker() {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
dateFormat="yyyy-MM-dd"
placeholderText="选择日期"
/>
);
}
export default CustomDatePicker;自定义日期选择组件
若需完全自定义UI，可以结合状态管理和日历逻辑实现。以下示例展示一个简化的自定义日期选择器：
import React, { useState } from 'react';
function CustomDatePicker() {
const [date, setDate] = useState(new Date());
const [showCalendar, setShowCalendar] = useState(false);
const handleDateClick = (day) => {
setDate(new Date(date.setDate(day)));
setShowCalendar(false);
};
const renderCalendar = () => {
const daysInMonth = new Date(
date.getFullYear(),
date.getMonth() + 1,
0
).getDate();
return (
<div className="calendar">
{Array.from({ length: daysInMonth }, (_, i) => i + 1).map((day) => (
<button key={day} onClick={() => handleDateClick(day)}>
{day}
</button>
))}
</div>
);
};
return (
<div>
<input
type="text"
value={date.toLocaleDateString()}
onClick={() => setShowCalendar(!showCalendar)}
readOnly
/>
{showCalendar && renderCalendar()}
</div>
);
}
export default CustomDatePicker;日期范围选择
使用react-datepicker实现日期范围选择：
import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
function DateRangePicker() {
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
return (
<div>
<DatePicker
selectsStart
selected={startDate}
onChange={setStartDate}
startDate={startDate}
endDate={endDate}
placeholderText="开始日期"
/>
<DatePicker
selectsEnd
selected={endDate}
onChange={setEndDate}
startDate={startDate}
endDate={endDate}
minDate={startDate}
placeholderText="结束日期"
/>
</div>
);
}
export default DateRangePicker;注意事项
- 时区处理：日期对象默认使用本地时区，需注意后端数据交互时的时区转换。
- 移动端适配：第三方库通常对移动端友好，但需测试实际效果。
- 无障碍支持：确保组件支持键盘操作和屏幕阅读器，如
react-datepicker默认提供ARIA标签。
以上方法覆盖了从简单到复杂的日期选择场景，可根据项目需求选择合适方案。
