Naxulanth / react-native-daterange-picker

A React Native component for picking date ranges or single dates.
MIT License
134 stars 90 forks source link

Next month button doesn't work. #15

Open longman0512 opened 3 years ago

johnny-minty commented 3 years ago

@longman0512 You need to ensure you handle the onChange event properly and set/update the 'displayedDate' prop correctly

aldiinugroho commented 2 years ago

maybe dates.displayedDate will be undefined, therefore we need to give certain conditions.

try this maybe it help:

const setDates = (dates) => {
        if (dates.startDate != undefined) {
            setStartDate(dates.startDate)
        }

        if (dates.displayedDate != undefined) {
            setDisplayedDate(dates.displayedDate)
        }

        if (dates.endDate != undefined) {
            setEndDate(dates.endDate)
        }
    };
fcamargo10 commented 2 years ago

maybe dates.displayedDate will be undefined, therefore we need to give certain conditions.

try this maybe it help:

const setDates = (dates) => {
        if (dates.startDate != undefined) {
            setStartDate(dates.startDate)
        }

        if (dates.displayedDate != undefined) {
            setDisplayedDate(dates.displayedDate)
        }

        if (dates.endDate != undefined) {
            setEndDate(dates.endDate)
        }
    };

Work's fine.

shoaibshebi commented 2 years ago

Set Like that

👇👇😊

const [dateObj, setDateObj] = useState({
    startDate: null,
    endDate: null,
    displayedDate: moment(),
  });

<DateRangePicker
            onChange={dates => {
              console.log('dates ------------------', dates);
              setDateObj({
                startDate:
                  'startDate' in dates
                    ? moment(dates.startDate)
                    : dateObj?.startDate,
                endDate:
                  'endDate' in dates ? moment(dates.endDate) : dateObj?.endDate,
                displayedDate:
                  'displayedDate' in dates
                    ? moment(dates.displayedDate)
                    : dateObj?.displayedDate,
              });
            }}
            endDate={dateObj?.endDate}
            startDate={dateObj?.startDate}
            displayedDate={dateObj?.displayedDate}
            range={true}
>