Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calendar picker doesn't show dates changes #376

Open
crazydeveloper09 opened this issue Apr 20, 2024 · 7 comments
Open

Calendar picker doesn't show dates changes #376

crazydeveloper09 opened this issue Apr 20, 2024 · 7 comments

Comments

@crazydeveloper09
Copy link

I am using this library in my app and I have a weird problem. The date in the state updates onDateChange, but the calendar doesn't show it in the view. I need to go to next month, then back and it shows the last chosen date as active. All the code is on Snack

But for first look I am going to post the co here

`import React, { useState } from "react";
import { View, Text, StyleSheet } from "react-native";
import CalendarPicker from 'react-native-calendar-picker';

const CalendarScreen: React.FC = () => {
const [selectedStartDate, setSelectedStartDate] = useState(new Date());
const startDate = selectedStartDate ? selectedStartDate.toLocaleDateString() : '';

const onDateChange = (date: Date) => {
    setSelectedStartDate(date)
}

return (
    <View style={styles.container}>
        <CalendarPicker 
            startFromMonday={true}
            selectedDayColor="#97D7ED"
            todayBackgroundColor="#CBEBF6"
            months={['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień']} 
            weekdays={['Pon', 'Wt', 'Śro', 'Czw', 'Pt', 'Sob', 'Nd']}
            previousTitle="Poprzedni"
            nextTitle="Następny"
            onDateChange={onDateChange}
        />
        <Text>Wybrana data: {startDate}</Text>
    </View>
)

}

const styles = StyleSheet.create({
container: {
padding: 15,
justifyContent: 'center',
alignItems: 'center'
}
})

export default CalendarScreen;`

@olimpic245
Copy link

the same problem for 8.0.1/8.0.2 version.
7.1.4 has no this bug

@peacechen
Copy link
Collaborator

8.x replaced Moment with Date-fns. Those changes may have inadvertently broken existing behavior. Try using this as a controlled component, passing in the selectedStartDate prop:

  selectedStartDate={selectedStartDate}

Depending on how the selectedStartDate state variable is stored, you may need to convert it to a Date-fns instance. A JS Date should work but I haven't tested it.

@mihailiftodi-D3
Copy link

I'm currently facing the same issue. Setting selectedStartDate={selectedStartDate} did not solve the issue

@peacechen
Copy link
Collaborator

@tranjog Do you have any insight into this?

@tranjog
Copy link
Contributor

tranjog commented May 5, 2024

Sorry about the slow reply @peacechen and @crazydeveloper09 .

I think I got to the bottom of it. Please check my PR here: PR: 381

PS: You will need to add the selectedStartDate prop

@peacechen
Copy link
Collaborator

Thanks @tranjog for debugging and fixing this! PR is merged. Please publish at your convenience.

@tranjog
Copy link
Contributor

tranjog commented May 5, 2024

Thanks for merging @peacechen!
8.0.3 is now published and should hopefully fix your issues @crazydeveloper09 @mihailiftodi-D3 @olimpic245

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants