我想在反應 js 中選擇開始日期選擇器之前禁用結束日期選擇器

Question

是否可以在用戶輸入開始日期之前禁用結束日期選擇器？ 下面我分享我的代碼。 請告訴我我做錯了什么？

const startDate = new Date();    
<Controller control={control} name="start_date" render={({ field }) => (
    <DatePicker placeholderText="MM/dd/yyyy" dateFormat="MM/dd/yyyy"
    onChange={(date) => field.onChange(date)}  minDate={moment().toDate()}
    selected={field.value}
    id="start_dates"
    required={true}
    autoComplete='off'
    onKeyDown={(e) => {
    e.preventDefault();
    }} />)}/>
    
    <Controller control={control} name="end_date"  render={({ field }) => (
    <DatePicker dateFormat="MM/dd/yyyy"
    onChange={(date) => field.onChange(date)}  
    disabled={startDate=== ""? true: false}
    minDate={new Date(startDate)}
    selected={field.value}
    
    onKeyDown={(e) => {
    e.preventDefault(); }} />)}/>

Answer 1

創建狀態變量dateStart 。

在startDate的onChange事件中設置其值，然后根據dateStart禁用endDate ，如下所示：

const [dateStart, setDateStart] = useState(null);

開始日期日期選擇器

<DatePicker placeholderText="MM/dd/yyyy" dateFormat="MM/dd/yyyy"
    onChange={(date) => field.onChange(date); setDateStart(date)}  
    minDate={moment().toDate()}
    selected={field.value}
    id="start_dates"
    required={true}
    autoComplete='off'
    onKeyDown={(e) => {
    e.preventDefault();
    }} />)}
 />

EndDate 日期選擇器

<DatePicker dateFormat="MM/dd/yyyy"
    onChange={(date) => field.onChange(date)}  
    disabled={dateStart ? false : true}
    minDate={new Date(startDate)}
    selected={field.value}
    
    onKeyDown={(e) => {
    e.preventDefault(); }} />)}
/>

工作示例