Skip to content

Commit 6c18ff7

Browse files
Update README.md
1 parent ec2a4bc commit 6c18ff7

File tree

1 file changed

+61
-43
lines changed

1 file changed

+61
-43
lines changed

README.md

Lines changed: 61 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,40 @@
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
1540
import * 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
5378
import * as React from 'react'
5479
import { 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

106124
You will need to add a polyfill for the Intl API on Android if:
107125

0 commit comments

Comments
 (0)