CODEWITHSUNDEEP
javascriptreactjsantddaterangepicker
Maryem Samet
Maryem Samet

Reputation: 143

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 .

Upvotes: 3

Views: 6795

Answers (2)

Rohan N
Rohan N

Reputation: 1

 {
      title: "Data",
      dataIndex: "timings",
      render: (record) => {
        return (
          <div>
            <p>
              {moment(record[0]).format("DD-MM-YYYY")} to{" "}
              {moment(record[1]).format("DD-MM-YYYY")}
            </p>
          </div>
        );
      },
    },

worked for me.

Upvotes: 0

Anas
Anas

Reputation: 5727

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

Upvotes: 6

Related Questions