react如何制作日期选择
使用原生HTML5日期输入
React中可以简单地使用HTML5的<input type="date">元素实现基础日期选择功能。这种方式无需额外依赖库，适合简单场景。
function DatePicker() {
const [date, setDate] = useState('');
return (
<input
type="date"
value={date}
onChange={(e) => setDate(e.target.value)}
/>
);
}浏览器原生日期选择器的样式和功能在不同设备上可能表现不一致，且自定义选项有限。
使用Material-UI日期选择器
Material-UI提供现成的日期选择组件，支持丰富的自定义选项和响应式设计。需要安装@material-ui/pickers和相关依赖。
import { KeyboardDatePicker } from '@material-ui/pickers';
function MaterialDatePicker() {
const [selectedDate, setSelectedDate] = useState(new Date());
return (
<KeyboardDatePicker
label="选择日期"
value={selectedDate}
onChange={date => setSelectedDate(date)}
format="yyyy/MM/dd"
/>
);
}此组件提供键盘输入支持、日期格式化和Material Design风格的UI。
使用react-datepicker库
react-datepicker是专为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"
minDate={new Date()}
filterDate={date => date.getDay() !== 6 && date.getDay() !== 0}
/>
);
}该库支持禁用特定日期、自定义日期范围、内联显示等高级功能，CSS样式可完全覆盖。
实现自定义日期选择组件
如需完全控制日期选择行为，可以手动实现组件：
function CustomDatePicker() {
const [showCalendar, setShowCalendar] = useState(false);
const [date, setDate] = useState(new Date());
const handleDateClick = (day) => {
const newDate = new Date(date);
newDate.setDate(day);
setDate(newDate);
setShowCalendar(false);
};
return (
<div className="date-picker">
<input
value={date.toLocaleDateString()}
onClick={() => setShowCalendar(!showCalendar)}
/>
{showCalendar && (
<div className="calendar">
{Array.from({ length: 31 }, (_, i) => i + 1).map(day => (
<button key={day} onClick={() => handleDateClick(day)}>
{day}
</button>
))}
</div>
)}
</div>
);
}这种方法需要手动处理月份切换、年份选择和日期验证等逻辑，适合特殊定制需求。
