React ant design date time picker time not update on the top

Question

Я использую свой проект реакции для ant design 3 выбора даты и времени , я хочу знать, как показать, когда выбирается дата смородины со временем

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

1-й выберите дату в будущем и выберите время 8 утра или 7 утра, затем снова нажмите «Выбрать дату» и выберите сегодняшнюю дату, когда я нажимаю в первый раз будущее дата и 7 или 8 утра. это время отображается с сегодняшней датой, потому что я отключил прошлое время с сегодняшней датой, это проблема, вы можете проверить

, кто знает решение?

стек блиц здесь

описание изображения здесь

здесь часть кода

   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;
    }



    //set date
    setDate(d:any){
        console.log("date object is: ", d);
        console.log("date  is: ", d.date());
        console.log("month is: ", d.month()+1);
        console.log("year is: ", d.year());
        console.log("Time :",moment(this.state.date).format("h:mm:ss A"))
        this.setState({date: d})


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

    }

  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}}
 placeholder="Select Date & Time"
   
  />
      </div>
    );
  }
}

Answer 1

Здесь вы go, вы можете сделать что-то вроде этого

1. Установите value

2. onChange проверьте, дата в будущем или меньше текущего времени, в зависимости от этого вы можете установить дату

// this will display the selected date
value={moment(this.state.date)}

onChange={d => {
    // checking if selected date is greater than current time
    // if then pass as it is, else pass the current time
    const date = moment() < moment(d) ? d : moment();

    // based on that we'll set the date
    this.setState({date})
}}

РАБОЧИЙ ДЕМО

Answer 2

Следующий css, кажется, работает для меня

.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn { display: none; }

EDIT : следующий блок скрипта в индексе. html может сделать это за вас ...

• Когда вы переключаетесь между кнопками «выбрать дату» и «выбрать время», в DOM добавляется один дополнительный div; поэтому мы ищем этот дополнительный div при каждом клике (вы также можете добавить прослушиватель событий для нажатия клавиш, если хотите), и если мы его найдем, мы знаем, что кнопка должна отображаться - иначе, если мы получим null, мы скрываем кнопку ;
• Я не знаю, как вы будете переключаться, если кнопка исчезнет, ​​поэтому вы можете изменить цвет границ (в моем stackblitz), чтобы увидеть, как концепция работает

актуально код для <script>:

<script>
    window.addEventListener("click", checkClass);

function checkClass(){
    var allBtns = document.querySelector('.ant-calendar-time .ant-calendar-time-picker');
    var relevantObj = document.querySelector('.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn');
  if (allBtns === null) {
    relevantObj.style.display = "none";
  } else {
    relevantObj.style.display = "block";
  }
}

</script>

обновлен stackblitz здесь

Answer 3

Вы можете настроить таргетинг на элемент, набрав css и добавив display: none; свойство к нему.

.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn {
    display: none
}