1- ## react-native-paper-dates (WIP, no offical release yet)
2-
3- Demo: (https://twitter.com/RichardLindhout/status/1294636692540985344 )
1+ ## react-native-paper-dates
42
3+ - Smooth and fast cross platform date picker
4+ - Tested on Android, iOS and the web platform!
55- Uses the native Date.Intl API's which work out of the box on the web / iOS
66- Simple API
7- - Endless scrolling on both web (with react-window) / and VirtualizedList on other platforms
7+ - Typesafe
8+ - Endless scrolling
89- Performant
910
11+ ## Getting started
12+
13+ Yarn
14+ ```
15+ yarn add react-native-paper-dates
16+ ```
17+
18+ npm
19+ ```
20+ npm install react-native-paper-dates --save
21+ ```
22+
23+ ### Web
24+ If you use react-native-web and want to use this library you'll need to install react-window.
25+ Yarn
26+ ```
27+ yarn add react-window
28+ ```
29+
30+ npm
31+ ```
32+ npm install react-window --save
33+ ```
34+
1035## Usage
1136
12- ### Single date
37+ ### Date Picker
1338
1439``` tsx
1540import * as React from ' react'
@@ -31,24 +56,24 @@ function SingleDatePage() {
3156
3257 return (
3358 <>
34- <DatePickerModal
35- mode = " single"
36- visible = { visible }
37- onDismiss = { onDismiss }
38- date = { date }
39- onConfirm = { onChange }
40- saveLabel = { ' Save' } // optional
41- label = { ' Select period' } // optional
42- />
43- <Button onPress = { ()=> setVisible (true )} >
44- Pick date
45- </Button >
59+ <DatePickerModal
60+ mode = " single"
61+ visible = { visible }
62+ onDismiss = { onDismiss }
63+ date = { date }
64+ onConfirm = { onChange }
65+ saveLabel = { ' Save' } // optional
66+ label = { ' Select period' } // optional
67+ />
68+ <Button onPress = { ()=> setVisible (true )} >
69+ Pick date
70+ </Button >
4671 </>
4772 )
4873}
4974```
5075
51- ### Start / end
76+ ### Range picker
5277``` tsx
5378import * as React from ' react'
5479import { Button } from ' react-native-paper'
@@ -68,21 +93,21 @@ export default function RangeDatePage() {
6893
6994 return (
7095 <>
71- <DatePickerModal
72- mode = " range"
73- visible = { visible }
74- onDismiss = { onDismiss }
75- startDate = { undefined }
76- endDate = { undefined }
77- onConfirm = { onChange }
78- saveLabel = { ' Save' } // optional
79- label = { ' Select period' } // optional
80- startLabel = { ' From' } // optional
81- endLabel = { ' To' } // optional
82- />
83- <Button onPress = { ()=> setVisible (true )} >
84- Pick range
85- </Button >
96+ <DatePickerModal
97+ mode = " range"
98+ visible = { visible }
99+ onDismiss = { onDismiss }
100+ startDate = { undefined }
101+ endDate = { undefined }
102+ onConfirm = { onChange }
103+ saveLabel = { ' Save' } // optional
104+ label = { ' Select period' } // optional
105+ startLabel = { ' From' } // optional
106+ endLabel = { ' To' } // optional
107+ />
108+ <Button onPress = { ()=> setVisible (true )} >
109+ Pick range
110+ </Button >
86111 </>
87112 )
88113}
@@ -91,17 +116,10 @@ export default function RangeDatePage() {
91116
92117
93118## Roadmap
119+ Things on our roadmap are labeled with enhancement.
120+ https://github.com/web-ridge/react-native-paper-dates/issues
94121
95- - Follow all things in spec (https://material.io/components/date-pickers#mobile-pickers )
96- - TimePicker component
97- - Selecting year in single input
98- - Optional locale overriding (date formatting)
99- - Optional timezone overriding
100- - Option to start day of week on monday (or read this from timezone/locale)
101- - Direct input with modal suffix
102- - Mobile input picker
103-
104- ### Android Caveats
122+ ## Android Caveats
105123
106124You will need to add a polyfill for the Intl API on Android if:
107125
0 commit comments