CODEWITHSUNDEEP
javascriptreact-nativestyles
Aazam Heidari
Aazam Heidari

Reputation: 477

How can I change the style of selected date in react-native-calendar-stripe

I set Button to show calendar and when press this Button and select a date this shows in the calendar -strip located at the top. problem is that the style changes just for the pre-selected date and when I select the new date the style is not function.

this is my code:

 <CalendarStrip
                    scrollable
                    style={{ height: 70, paddingBottom: 10 }}
                    calendarColor={'#4caf50'}
                    selectedDate={new Date(date)}
                    calendarHeaderStyle={{ display: "none" }}
                    iconStyle={{ display: "none" }}
                    highlightDateNameStyle={{ color: 'black', position: "absolute", bottom: 
                     10, color: 'green', backgroundColor: "white" }}
                    highlightDateNumberStyle={{ color: 'green', padding: 10, borderRadius: 6, 
                     backgroundColor: "white" }}
                    dateNumberStyle={{ color: 'white', borderRadius: 6, }}
                    dateNameStyle={{ color: 'white', position: "absolute", bottom: 0.5 }}
                    iconContainer={{ flex: 0.1 }}
                />
              {show && (
                <DateTimePicker
                    testID="dateTimePicker"
                    value={new Date()}
                    mode={mode}
                    is24Hour={true}
                    display="default"
                    onChange={onChange}
                />
            )}

Upvotes: 2

Views: 1894

Answers (1)

Adil kasbaoui
Adil kasbaoui

Reputation: 663

1- In DateTimePicker you have onChange prop, so make onChange function set the selected value.

2- Now in CalendarStrip let the prop selectedDate take the value you have set in onChange

Upvotes: 1

Related Questions