farhoudshapouran / react-native-ui-datepicker

Customizable React Native 📅 DatePicker component for Android, iOS, and Web. It includes single, range and multiple modes and supports different locales.
https://farhoudshapouran.github.io/react-native-ui-datepicker/
MIT License
272 stars 28 forks source link

Crash when trying to change years #59

Open agrifriend opened 5 months ago

agrifriend commented 5 months ago

Bug Description I tried to implement this library on my React-Native app, but when I try to change the calendar's year by pressing the year on the calendar's header, the app immediatly crashed with the message:

TypeError: years.at is not a function. (In 'years.at(0)', 'years.at' is undefined)

Steps to Reproduce I used the lib in a pretty straight-forward way, nothing special and no particular manipulations, in "single" mode:

  1. Press the year on the top part of the calender
  2. Crash

Code

<DateTimePicker
    date={currentValue ? currentValue : new Date()}
    mode="single"
    onChange={({date}) => {onChangeValue(parseDateObject(date))}}
    maxDate={new Date()}
    dayContainerStyle={{backgroundColor: colors.white, borderRadius: wp(2)}}
    headerContainerStyle={{borderBottomColor: colors.lighterGray2, borderBottomWidth: 1}}
    headerTextStyle={{fontSize: 20, backgroundColor: colors.white, borderRadius: wp(1), padding: wp(1)}}
  />

Screenshots

Additional Information expo: 47.0.12, react: 18.1.0, react-native: 0.70.5, react-native-ui-datepicker: 2.0.0

agrifriend commented 5 months ago

Ok, tried to manage to avoid it by making a slight tweak to the source code.

I changed file react-native-ui-datepicker\src\components\Header.tsx at line 110 from this:

<View style={[styles.textContainer, theme?.headerTextContainerStyle]}>
  <Text style={[styles.text, theme?.headerTextStyle]}>
    {calendarView === CalendarViews.year
      ? `${years.at(0)} - ${years.at(-1)}`
      : dayjs(currentDate).format('YYYY')}
  </Text>
</View>

To this:

<View style={[styles.textContainer, theme?.headerTextContainerStyle]}>
  <Text style={[styles.text, theme?.headerTextStyle]}>
    { dayjs(currentDate).format('YYYY') }
  </Text>
</View>

I'm not creating a pull req for that because I assume the line I removed is supposed to do something

farhoudshapouran commented 4 months ago

Maybe you don't need to use parseDateObject in your onChange method, you can use the date passed from the onChange method to update your date value.

Or if you can provide your parseDateObject details so I can test it.

farhoudshapouran commented 4 months ago

Please check the latest (v2.0.1) version

cagataykapuagasi commented 3 months ago

Same issue on android

react-native: 0.71.6
react-native-ui-datepicker: 2.0.2