-
Notifications
You must be signed in to change notification settings - Fork 4
/
App.tsx
97 lines (93 loc) · 2.37 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import * as React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import DateField, {
MonthDateYearField,
YearMonthDateField,
} from 'react-native-datefield';
const App = () => {
const [date, setDate] = React.useState<Date | null>(null);
return (
<View style={styles.container}>
<DateField onSubmit={(value) => console.log(value)} />
<DateField
styleInput={styles.underline}
onSubmit={(value) => console.log(value)}
maximumDate={new Date(2023, 3, 10)}
minimumDate={new Date(2021, 4, 21)}
handleErrors={() => console.log('ERROR')}
/>
<DateField
styleInput={styles.input}
onSubmit={(value) => console.log('DateField', value)}
/>
<DateField
hideDate
styleInput={[styles.input, styles.inputStart]}
containerStyle={styles.containerStyle}
onSubmit={(value) => console.log('DateField', value)}
/>
<MonthDateYearField
labelDate="Enter date"
labelMonth="Enter month"
labelYear="Enter year"
containerStyle={styles.inputBackground}
onSubmit={(value) => console.log('MonthDateYearField', value)}
/>
<View style={styles.spacer} />
<YearMonthDateField
value={date}
styleInput={styles.inputBorder}
styleInputYear={styles.inputYear}
onSubmit={(value) => setDate(value)}
/>
<Button title="Show value" onPress={() => console.log(date)} />
<Button title="Reset value" onPress={() => setDate(null)} />
</View>
);
};
const styles = StyleSheet.create({
container: {
padding: 20,
},
input: {
width: '30%',
borderRadius: 8,
backgroundColor: '#f4f4f4',
marginBottom: 20,
},
underline: {
width: '30%',
borderBottomColor: '#cacaca',
borderBottomWidth: 1,
marginBottom: 20,
},
containerStyle: {
justifyContent: 'flex-start',
},
inputStart: {
marginRight: 20,
},
inputBorder: {
width: '30%',
borderRadius: 8,
borderColor: '#cacaca',
borderWidth: 1,
marginBottom: 20,
},
inputBackground: {
borderRadius: 15,
backgroundColor: '#f4f4f4',
paddingHorizontal: 25,
marginBottom: 20,
},
spacer: {
borderTopColor: '#cacaca',
borderTopWidth: 1,
paddingTop: 20,
},
inputYear: {
width: '40%',
backgroundColor: 'red',
},
});
export default App;