реагировать муравей дизайн дата выбор времени выбор варианта даты проблема

Question

Я использую ant design 3 date time picker для моего проекта реакции, и я отключил, когда пользователь выбирает date/time из present/future и disable all the past dates, он работает хорошо, но у меня есть некоторый конфликт с этой моей функцией.

здесь конфликт

когда я выбираю дату и время в будущем после отображения снова, нажмите кнопку даты на нижний колонтитул, поэтому я снова выбираю сегодняшнюю дату, отображаю будущее время с сегодняшней датой, любое решение для отключения select date ссылка на кнопку

вы можете понять мой конфликт, пожалуйста, используйте блиц

вот мой код

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

Что я могу сделать, так это создать новую функцию для обработки изменения даты

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)}
.....

Вот обновленный stackblitz