React - How to correctly get the current value of a date input?

user_5611722 0
Viewed 222

I am trying to compare two dates in React App but it seems I am struggling to get the current value of a date input.

I have two date inputs and the min property of the second one must be >= to the first one selected date.

enter image description here

To solve it, I have written the following code:

Render:

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

State and functions:

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

And here all my date functions:

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

The prints of the console.log are here:

enter image description here

What am I doing wrong here and how could I fix it?

reactjs datetime javascript
1 Answers

In d1 variable in setMinDate it's format string it's not support on the new Date(d1). If i'm not wrong the event.target.depart have 'dd/mm/yyyy' format, which means new Date() can't convert your string to Date based on w3s Date format input (ISO, short, long).

You cant convert that string date format with this function.

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;

}

To prevent ambiguity on same variable avoid repeating naming variable

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