skratchdot / react-bootstrap-daterangepicker

A date/time picker for react (using bootstrap). This is a react wrapper around the bootstrap-daterangepicker project.
http://projects.skratchdot.com/react-bootstrap-daterangepicker/
Other
474 stars 203 forks source link

Updating `ranges` prop does not update the date ranger picker UI #215

Closed rehanumar closed 4 years ago

rehanumar commented 4 years ago

I am updating the ranges prop with latest props object from store but in UI initial props object is displayed. So my hypothesis is that updating the ranges props does not sync with UI. I have debugged this through the React Dev Tool and DateRangePicker component have latest props in the format mentioned in http://www.daterangepicker.com/#example4.

<DateRangePicker
                startDate={moment(startDate)}
                endDate={moment(endDate)}
                maxDate={moment()}
                ranges={dateRanges}
                autoApply={true}
                opens="left"
                onApply={this.onApplyHandler}
              >

where old value of dateRanges={'Activity1': [moment(StartDate), moment(EndDate)]} and new value of dateRanges={'Activity2': [moment(StartDate), moment(EndDate)]}

rehanumar commented 4 years ago

@skratchdot and others, following is the link to fix of this issue. https://github.com/skratchdot/react-bootstrap-daterangepicker/pull/216

vidhi6891 commented 4 years ago

Hello, is the above PR merged ? I am facing the same issue wherein the calendar is not re-re dering on a change in the ranges prop

skratchdot commented 4 years ago

Please see this comment on how to change props like "range":

https://github.com/skratchdot/react-bootstrap-daterangepicker/pull/216#issuecomment-663299357

The only props you should treat as "controlled props" are startDate and endDate. All others should be treated as "initial" values only. I will try to release a new version (v6) with a completely changed api to make this more clear (and some better examples)