BugiDev / react-native-calendar-strip

Easy to use and visually stunning calendar component for React Native.
MIT License
953 stars 328 forks source link

When I click on one of the thee first days of my week, the previous week is displayed #135

Closed LudoLamerre closed 5 years ago

LudoLamerre commented 5 years ago

Hi,

When I click on one of the thee first days of my week, the previous week is displayed.

<CalendarStrip
            ... all props of styling...
            locale={MS.locale}
            markedDates={this.state.markedDates}
            onDateSelected={async value => {
                await this.setState({
                  selectedDate: moment(value).format("YYYY-MM-DD"),
                  selectedDateMoment: value
                })
            }
            }
            selectedDate={this.state.selectedDate}
            startingDate={this.state.selectedDateMoment}
/>

I tried many solutions but nothing work. Thank you in advance

peacechen commented 5 years ago

Hello LudoLame. It's tough to say exactly what's happening without setting breakpoints in the code. Some recommendations:

For best performance, leave all dates as Moment objects. There's no need to turn selectedDate into a string. If you need that in your app, use a separate state var such as selectedDateFormatted.

Try removing the selectedDate prop. CalendarStrip sets that internally when a date is selected. Changing the prop may conflict with that.

LudoLamerre commented 5 years ago

Ok I find the solution :

<CalendarStrip
            ... all props of styling...
            locale={MS.locale}
            markedDates={this.state.markedDates}
            onDateSelected={async value => {
                await this.setState({
                  selectedDate: moment(value).format("YYYY-MM-DD"),
                  selectedDateMoment: value
                })
            }
            }
            selectedDate={this.state.selectedDate}
            startingDate={moment(this.state.selectedDateMoment).startOf(
              "isoWeek"
            )}
            useIsoWeekday={false}
/>