[web] [Calendar] - can't select date lower or larger than current year

[Dammic]

🐛 Bug Report

Recently I've found out that our date pickers can't pick any date that is outside of the current year. We have a range select form, that looks like:

        <DatePicker
          date={value.startDate}
          onSelect={onStartDateSet}
          max={value.endDate}
        />
        <DatePicker
          date={value.endDate}
          onSelect={onEndDateSet}
          min={value.startDate}
        />

This allows us our dates not to be incorrect in the range (so start value can't be higher than the end value) When the value.startDate or value.endDate are not defined (passed as undefined), I can't select any date outside of the current year. If I specifically say the end date is ex. new Date(1698624000000) (2023 year), it works as expected for that specific input (but only on the end date).

So to make it work, I would have to set the min date to very low date by default, and end date to very high, ex. 2999, and I will do that as a workaround, but does it make sense to do so? I think if users want to have limited choice of dates, they would set 'min' and 'max' themselves.

To Reproduce

You can see the issue on the official documentation on web on chrome: https://akveo.github.io/react-native-ui-kitten/docs/components/calendar/overview#rangecalendar

Expected behavior

any date is selectable when min and max are not passed

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.0.0
@ui-kitten/components	5.0.0

Environment information

npx envinfo --preset react-native
npx: installed 1 in 0.815s

  System:
    OS: Linux 5.6 Linux Mint 19.3 (Tricia)
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.3/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm

I'm using react-native sdk-39.0.3 and "react-native-web": "0.14.3",

[artyorsh]

but does it make sense to do so

Yes, it does. Because extending the range also will affect the rendering performance and that's we've limited it by default.

[Dammic]

I see, I didn't know it has impact on performance. Thanks for the explanation, then that settles it for me.

Though this has one downside - right now, at the end of the year, you can't select any date from the next year by default (which is just a month ahead. I know this can be done with just setting it manually, but maybe the min/max selectable date should be 'current date' +- '1 year' by default?

Otherwise, it would be a good idea to add this information to the docs so it doesnt come back again.

[probablykabari]

+1 on this. Selecting a date just 12 days from now does not work. @artyorsh what is the performance impact if it is lazily rendering the cells? Happy to work on a PR.

[artyorsh]

@RipTheJacker thanks for chipping into it. It's really nice that you're able to work on this, but I'm not sure I can review this in the nearest time. Will setting min and max properties help you?

[probablykabari]

@artyorsh Yep that will work for now. But I still think there can be a better solution. Really the whole thing (DateService, upgrading date-fns ~2, etc) is something I've wanted to look into for a while anyway :)

[artyorsh]

Me too. Will work on it as soon as we start working on the library. I already have some refactored code running in the project I'm currently working on (including date-fns v2), so I would say it's not so complex to patch ;)