React - 如何正确获取日期输入的当前值？

Question

我正在尝试在 React App 中比较两个日期，但似乎我很难获得日期输入的当前值。

我有两个日期输入，第二个的 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 result;
}
  
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;
    }
}

console.log 的打印在这里：

我在这里做错了什么，我该如何解决？

Answer 1

在setMinDate 中的d1 变量中，它是new Date(d1) 不支持的格式字符串。如果我没记错的话，event.target.depart 有 'dd/mm/yyyy' 格式，这意味着new Date() 无法根据w3s 日期格式输入（ISO、短、长）将您的字符串转换为日期。

你不能用这个函数转换那个字符串日期格式。

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