javascriptreactjsantddaterangepicker

How To Get startDate and endDate from RangePicker from ANTD.DESIGN


i'm working ing a react js project and I'm using antd.design Library to show a RangePicker what i'm trying to solve is how can i get the start date and the end date from this RangePicker when user select a period that's my code :

            handleChangeDebut =range => {
    const valueOfInput1 = moment(range.startDate).format();
    const valueOfInput2 = moment(range.endDate).format();
    console.log('start date',valueOfInput1); 
    console.log("end date",valueOfInput2);
  }

      <DatePicker.RangePicker
                  style={{ width: "100%" }}
                  getPopupContainer={trigger => trigger.parentNode}
                  onChange={this.handleChangeDebut}
                />

the issue is on my handleChange function , i always get the date of the current day is there any attributes in antd design that give us the startDate and the EndDate Selected ?

Thank you for your precious help .


Solution

  • From the documentation, this is the signature of the onChange function function(dates: moment, moment, dateStrings: string, string), It looks like start and end date are passed as an array in the first param:

    handleChangeDebut = (range) => {
        const valueOfInput1 = range[0].format();
        const valueOfInput2 = range[1].format();
    
        console.log('start date',valueOfInput1); 
        console.log("end date",valueOfInput2);
    }