在React JS中限制DatePicker只显示本年度的方法有多种。以下是一种常见的实现方式:
下面是一个示例代码:
import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
const App = () => {
const [selectedDate, setSelectedDate] = useState(null);
const handleDateChange = (date) => {
setSelectedDate(date);
};
const yearLimit = () => {
const currentYear = new Date().getFullYear();
const startDate = new Date(currentYear, 0, 1);
const endDate = new Date(currentYear, 11, 31);
return {
minDate: startDate,
maxDate: endDate,
};
};
return (
<div>
<DatePicker
selected={selectedDate}
onChange={handleDateChange}
{...yearLimit()}
/>
</div>
);
};
export default App;
在上面的代码中,我们使用了react-datepicker库来创建一个DatePicker组件。通过设置selected属性和onChange事件处理程序,我们可以将selectedDate与DatePicker组件进行绑定,并在选择日期时更新selectedDate的值。
通过调用yearLimit函数,我们可以获取当前年份,并将其用于设置日期限制。在这个例子中,我们将minDate设置为当前年份的第一天,将maxDate设置为当前年份的最后一天。
这样,DatePicker组件将只显示当前年份可选择的日期。
请注意,这只是一种实现方式,你可以根据自己的需求进行调整和修改。
领取专属 10元无门槛券
手把手带您无忧上云