Блог

Я пытаюсь сравнить две даты в приложении React, но, похоже, я изо всех сил пытаюсь получить текущее значение ввода даты.

У меня есть два ввода даты, и свойство min второго должно быть>= для первой выбранной даты.

Чтобы решить эту проблему, я написал следующий код:

Визуализация:

 <div className='flex-children'>
  <span className='flex-line'>
    <label for='depart'><i class="far fa-calendar-alt"></i> Depart: </label>
    <input type='date' id='depart' value={this.state.depart} min={today} onChange={this.pickDepart} />
  </span>
  <span className='flex-line'>
  <label for='return'> Return: </label>
  <input type='date' id='return' value={this.state.returning} min={minReturn} onChange={this.pickReturn} />
  </span>
</div>
 

Состояние и функции:

 constructor(props) {
        super(props);
        this.state = {
            selectedFrom: '4',
            depart: depart,
            returning: returing
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

      }

    handleChange(event) {    
        this.setState({
            selectedFrom: event.target.selectedFrom,
            depart: event.target.depart,
            returing: event.target.return
            });
    }

    handleSubmit(event) {
        event.preventDefault();
    }

    pickDepart = (event) => {
        this.setState({depart: event.target.depart});
        setMinDate(event.target.depart);
    };

    pickReturn = (event) => {
        this.setState({returning: event.target.return});
    };
 

И здесь все мои функции даты:

 function addDays(date, days) {
    var result = new Date(date);
    result.setDate(result.getDate()   days);
    return resu<
}
  
function getToday(days){
    var today = new Date();
    var today_us = addDays(today, days)
    var dd = String(today_us.getDate()).padStart(2, '0');
    var mm = String(today_us.getMonth()   1).padStart(2, '0'); //January is 0!
    var yyyy = today_us.getFullYear();
    return yyyy   '-'   mm   '-'   dd;
};

var minReturn = getToday(0);
var depart = getToday(0);
var returing = getToday(21);
const today = getToday(0);


function setMinDate(d1){
    d1 = new Date(d1);
    var d2 = new Date(today);
    console.log(d1);
    console.log(d2);
    if (d1.getTime() >= d2.getTime()){
        minReturn = d1;
    }else{
        minReturn = today;
    }
}
 

Распечатки консоли.журнал здесь:

Что я здесь делаю не так и как я могу это исправить?

В d1 переменной в setMinDate строке формата это не поддерживается new Date(d1) . Если я не ошибаюсь event.target.depart , у вас формат ‘дд / мм / гггг’, что означает new Date() , что вы не можете преобразовать вашу строку в дату на основе ввода формата даты w3s (ISO, short, long).

Вы не можете преобразовать этот строковый формат даты с помощью этой функции.

 const convertDateStringFormat = (dateString) => {
  // dd/mm/yyyy convert to yyyy-mm-dd
  const _splitedDate = dateString.split("/");
  const convertedDate = `${_splitedDate[2]}-${_splitedDate[1]}-${_splitedDate[0]}`;
  return convertedDate;

}
 

Чтобы предотвратить двусмысленность в одной и той же переменной, избегайте повторения именования переменной

 function setMinDate(d1){
    //d1 = new Date(d1); (You can replace d1 with another name)
    let _d1 = new Date(d1)
    ....
}