search

callstack / react-native-paper

Material Design for React Native (Android & iOS)
https://reactnativepaper.com
MIT License
12.76k stars 2.08k forks source link

Date and Time Picker component [WIP] #2118

Closed RichardLindhout closed 3 years ago

RichardLindhout commented 4 years ago

Is your feature request related to a problem? Please describe. A lot of people requested the date / time picker components https://github.com/callstack/react-native-paper/issues/1489#issuecomment-559662408

Describe the solution you'd like A date picker component which follows the specifications described here

Describe alternatives you've considered There are no good quality libraries (as far as I know) who implement the Material Design spec with good integration on React Native (web)

Additional context I'm working on a Date Picker component for React Native Paper. I'll publish this first as a separate package but I want to know if this could be integrated in React Native Paper is quality is good enough or maybe a section in the docs.

It uses VirtualizedList under the hood (to support endless scrolling, with the same strategy as this StackOverflow answer https://stackoverflow.com/questions/20584129/viewpager-in-android-to-switch-between-days-endlessly/23410686#23410686)

[WIP] Mobile layout (vertical for ranges) ezgif-7-f1e08465f79d

[WIP] Desktop layout ezgif-7-a49b7927e6ff (1)

github-actions[bot] commented 4 years ago

Couldn't find version numbers for the following packages in the issue:

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

RichardLindhout commented 4 years ago

Progress modal picker short-progress-react-native-date-picker

RichardLindhout commented 4 years ago

Added input masking: https://twitter.com/RichardLindhout/status/1294636692540985344

RichardLindhout commented 4 years ago

First version is released: https://github.com/web-ridge/react-native-paper-dates

raajnadar commented 4 years ago

Nice work @RichardLindhout

Trancever commented 4 years ago

Nice @RichardLindhout !

RichardLindhout commented 4 years ago

Schermafbeelding 2020-08-24 om 21 19 33

Started working on time component

RichardLindhout commented 4 years ago

ezgif-3-0bb4982423c4

I'm slowly working on it in my spare time, here is some progress.

RichardLindhout commented 4 years ago

Progress can be followed on the development branch: https://github.com/web-ridge/react-native-paper-dates

RichardLindhout commented 3 years ago

ezgif-6-0965298a1591

Slowly implementing all features :-)

RichardLindhout commented 3 years ago

Added minutes ezgif-2-340a10b79548

RichardLindhout commented 3 years ago

0.2.1 released with dark mode and time picker!

https://github.com/web-ridge/react-native-paper-dates ezgif-4-0904a1b67ad7 Better frame rate: https://www.youtube.com/watch?v=SHhQU2doTug

RichardLindhout commented 3 years ago

Will do a PR for the react-native-paper website mentioning this library

RichardLindhout commented 3 years ago

Demo website is up: https://www.reactnativepaperdates.com/