How can I trigger a method when end date is changed

Question

I'm using Airbnb react-dates. I've added it to my project and it's working fine, the component looks like this:

<DateRangePicker
    startDate={this.state.startDate} // momentPropTypes.momentObj or null,
    startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
    endDate={this.state.endDate} // momentPropTypes.momentObj or null,
    endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
    onDatesChange={this.onDatesChange} // PropTypes.func.isRequired,
    focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
    onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
    daySize={50}
    noBorder={true}
    isOutsideRange={() => false}
  />

I just added it to my project, and as you can see there is my method onDatesChange and everything is fine, but I'm wondering how can I trigger some method when END_DATE is selected.

For example, I would like to filter something when the end date is touched...

`onFocusChange={focusedInput => this.setState({ focusedInput })}` — this is not what you want? — sergdenisov, Jun 29 '19 at 16:24
@SergeyDenisov What's this? I just want to trigger my method when end date is changed .. hmm ? I started with react 2 days ago so little bit I'm confused here :D Thx for help — Roxy'Pro, Jun 29 '19 at 16:26
It's a prop of ``. You need an end date to be touched (focused) or changed? — sergdenisov, Jun 29 '19 at 16:30
@SergeyDenisov I want to trigger a method when end date is touched or changed — Roxy'Pro, Jun 29 '19 at 16:30

Dennis Vash · Answer 1 · 2019-06-29T16:56:39.890

2

You need to add callback in onDatesChange property:

<DateRangePicker
  {...dateRangePickerProps}
  onDatesChange={({ endDate }) => {
    console.log("End Date change callback"); // Your callback
  }}
/>;

edited Jun 29 '19 at 16:56

answered Jun 29 '19 at 16:34

Dennis Vash

50,196
9
100
118

Thx for helpm appreciate that! :) – Roxy'Pro Jul 03 '19 at 20:19

sergdenisov · Accepted Answer · 2019-07-04T13:44:14.677

You need to use onFocusChange and onDatesChange props of <DateRangePicker>, and also componentDidUpdate() React lifecycle method:

CodeSandbox

import React, { Component } from "react";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { DateRangePicker } from "react-dates";
import { START_DATE, END_DATE } from "react-dates/constants";

export default class Dates extends Component {
  state = {
    startDate: null,
    endDate: null,
    focusedInput: null
  };

  onDatesChange = ({ startDate, endDate }) =>
    this.setState({ startDate, endDate });

  onFocusChange = focusedInput => this.setState({ focusedInput });

  componentDidUpdate(prevProps, prevState) {
    if (
      prevState.focusedInput !== this.state.focusedInput &&
      this.state.focusedInput === END_DATE
    ) {
      alert("End date is focused!"); // your code here
    }

    if (prevState.endDate !== this.state.endDate) {
      alert("End date is changed!"); // your code here
    }
  }

  render() {
    const { startDate, endDate, focusedInput } = this.state;

    return (
      <DateRangePicker
        startDate={startDate}
        startDateId={START_DATE}
        endDate={endDate}
        endDateId={END_DATE}
        onDatesChange={this.onDatesChange}
        focusedInput={focusedInput}
        onFocusChange={this.onFocusChange}
      />
    );
  }
}

Yes it helped, thanks! I modified code but you got the point! :) Thanks a lot, soon I'll post another question so you might probably help me, I'll leave a link here soon, thanks again! :) — Roxy'Pro, Jul 03 '19 at 13:11
https://stackoverflow.com/questions/56871089/how-to-prevent-user-from-selecting-date-above-end-date-airbnb-daterange-picker/56872468#56872468 — Roxy'Pro, Jul 03 '19 at 15:14

How can I trigger a method when end date is changed

2 Answers2