react-native-ui-datepicker

react-native-ui-datepicker copied to clipboard

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

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

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.

Please check the latest (v2.0.1) version

Same issue on android

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

The same here

react-native: 0.72.4
react-native-ui-datepicker: 2.0.3

The problem only occurs when the debugger is enabled. 🙌🏻

In my case, I just changed .at() for [] in file node_modules/react-native-ui-datepicker\src\components\Header.tsx. Now it's working.

before:

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

then:

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