从react日期范围选择器中删除输入范围的方法取决于具体使用的日期范围选择器库。以下是一种常见的解决方案:
react-dates
或react-datepicker
。selectedRange
。selectedRange
作为startDate
和endDate
的值传递给日期范围选择器。selectedRange
的值重置为null
或其他适当的初始值。以下是一个示例代码:
import React, { useState } from 'react';
import { DateRangePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';
const MyComponent = () => {
const [selectedRange, setSelectedRange] = useState(null);
const handleDeleteRange = () => {
setSelectedRange(null);
};
return (
<div>
<DateRangePicker
startDate={selectedRange ? selectedRange.startDate : null}
endDate={selectedRange ? selectedRange.endDate : null}
onDatesChange={({ startDate, endDate }) =>
setSelectedRange({ startDate, endDate })
}
focusedInput={focusedInput}
onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
/>
<button onClick={handleDeleteRange}>删除日期范围</button>
</div>
);
};
export default MyComponent;
请注意,上述代码中的react-dates
仅作为示例日期范围选择器库之一。你可以根据自己的需求选择适合的日期范围选择器库,并按照相应的文档和示例进行操作。
领取专属 10元无门槛券
手把手带您无忧上云