React Js - Material UI -根据之前的选择更改最小日期
React Js - Material UI -根据之前的选择更改最小日期
提问于 2021-10-27 09:10:44
我在material UI中有两个日期选择器-
From Date -
<KeyboardDatePicker
value={initialDateFrom}
disableFuture={true}
onChange={handleFromDateChange}
>
</KeyboardDatePicker>
To Date -
<KeyboardDatePicker
value={initialDateTo}
disableFuture={true}
onChange={handleToDateChange}
>
</KeyboardDatePicker>
const [initialDateFrom , setInitialDateFrom]= useState<any>(null);
const [initialDateTo , setInitialDateTo]= useState<any>(null);
const handleFromDateChange =(event:any , value :any)=>{
setInitialDateFrom(value)
}
const handleToDateChange =(event:any , value :any)=>{
setInitialDateTo(value)
}我想要实现的是-
如果我选择11-Oct-2021作为From date，我想禁用to Date date选取器中到11-Oct-2021的所有先前日期。至日期选取器应仅显示2021年10月11日的未来日期。
我试过的-
To Date数据选择器中的minDate = {initialDateFrom}
handleFromDateChange中的value.minDate = initialDateFrom
但这并没有起到作用。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-27 09:31:22
您可以尝试这种方法，我已经创建了另一个状态来处理minDate
const [initialDateFrom , setInitialDateFrom]= useState<any>(null);
const [minDate, setMinDate] = useState<any>(null);
const [initialDateTo , setInitialDateTo]= useState<any>(new Date());
const handleFromDateChange =(event:any , value :any)=>{
setInitialDateFrom(new Date(value));
setMinDate(new Date(value))
}
const handleToDateChange =(event:any , value :any)=>{
setInitialDateTo(value)
}
<KeyboardDatePicker
value={initialDateFrom}
disableFuture={true}
onChange={handleFromDateChange}
>
</KeyboardDatePicker>
<KeyboardDatePicker
value={initialDateTo}
minDate={minDate}
onChange={handleToDateChange}
>
</KeyboardDatePicker>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69735834
复制相关文章
相似问题
腾讯云开发者
