我在材質 UI 中有 2 個日期選擇器-
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 日期選擇器中的所有先前日期禁用到 11-Oct-2021。迄今為止 - 日期選擇器應僅顯示 2021 年 10 月 11 日以后的日期。
我試過的 -
minDate = {initialDateFrom}在To Date日期選擇器中
value.minDate = initialDateFrom 在 handleFromDateChange
但這沒有幫助。
uj5u.com熱心網友回復：
你可以試試這個方法，我又創建了一個狀態來處理 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338325.html
標籤：javascript 查询 反应 材质-ui
下一篇：如何正確瞄準彈出視窗？