反應 ant 設計日期時間選擇器 select 日期選項問題

Question

我為我的反應項目使用ant 設計 3 日期時間選擇器，並且我禁用了當用戶 select present/future的date/time ，並disable all the past dates ，它的工作良好，但我有一些沖突我的 ZA7854C4254074D16 .

這里的沖突

when i select future date and time after display again select date button on the footer so im select again today date, display the future time with today date, any solution for disable select date button link

你能理解我的沖突，請使用堆棧閃電戰

這是我的代碼

interface AppProps { }
interface AppState {
  name: string; 
  date: Date;
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React',
      date: new Date()
    };
  }
//date disable
    disabledDate(current: any) {
        // Can not select days before today and today
        //return current && current < moment().endOf('day');
        return current && current < moment().startOf("day")
    }

    //time disable
    getDisabledHours() {
        var hours = [];
        for (let i = 0; i < moment().hour(); i++) {
            hours.push(i);
        }
        return hours;
    }

    //time disable
    getDisabledMinutes = (selectedHour: any) => {
        var minutes = [];
        if (selectedHour === moment().hour()) {
            for (var i = 0; i < moment().minute(); i++) {
                minutes.push(i);
            }
        }
        return minutes;
    }
  render() {
    return (
      <div>
        <DatePicker
   name="Date" disabledDate={this.disabledDate}
   onChange={d => this.setState({date: d})}
   style={{width: "100%"}}
   showTime={{ disabledMinutes: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledMinutes, 
   disabledHours: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledHours}}
   value={moment(this.state.date)}

  />
      </div>
    );
  }
}

Answer 1

我能做的是創建一個新的 function 來處理日期更改

setSelectedDate = (date: any) => {
  const now = moment();  //get current date time
  const isFuture = date.isAfter(now); //check selected date is a future date compared to current date and time
  this.setState({date: isFuture ? date: now.toDate()}); //if it's a future date then assign the slected date else select the current date and time
}

並將 onChange 道具更改為

<DatePicker
   name="Date" disabledDate={this.disabledDate}
   onChange={d => this.setSelectedDate(d)}
.....

這是更新的堆棧閃電戰