|
1 | 1 | import React from 'react';
|
2 | 2 | ///import * as React from 'react';
|
3 |
| -import {View, Pressable, ScrollView, StyleSheet, Text, TextInput, Platform, Button } from 'react-native'; |
| 3 | +import { View, Pressable, ScrollView, StyleSheet, Text, TextInput, Platform, Button } from 'react-native'; |
4 | 4 | import LinearGradient from 'react-native-linear-gradient'
|
5 |
| -import DateTimePicker from 'datetimepicker'; |
| 5 | +import DateTimePicker from '@react-native-community/datetimepickerdatetimepicker'; |
6 | 6 | //import {HMLog } from '../Log';
|
7 | 7 |
|
8 | 8 |
|
@@ -46,176 +46,177 @@ function DateTimePickerDemo() {
|
46 | 46 | <View>
|
47 | 47 | <Text style={styles.footer_left}>style修改width</Text>
|
48 | 48 | <TextInput
|
49 |
| - style={{height: 40, borderColor: 'gray', borderWidth: 1, width: 100 }} |
| 49 | + style={{ height: 40, borderColor: 'gray', borderWidth: 1, width: 100 }} |
50 | 50 | placeholderTextColor='150'
|
51 | 51 | onChangeText={(text) => {
|
52 | 52 | setWidthCs(JSON.parse(text))
|
53 | 53 | }}
|
54 | 54 | ></TextInput>
|
55 | 55 | <Text style={styles.footer_left}>修改textColor</Text>
|
56 | 56 | <TextInput
|
57 |
| - style={{height: 40, borderColor: 'gray', borderWidth: 1, width: 100 }} |
| 57 | + style={{ height: 40, borderColor: 'gray', borderWidth: 1, width: 100 }} |
58 | 58 | onChangeText={(text) => {
|
59 | 59 | setTextColorCs(text)
|
60 | 60 | }}
|
61 | 61 | ></TextInput>
|
62 | 62 | <Text style={styles.footer_left}>修改display</Text>
|
63 | 63 | <TextInput
|
64 |
| - style={{height: 40, borderColor: 'gray', borderWidth: 1, width: 100 }} |
| 64 | + style={{ height: 40, borderColor: 'gray', borderWidth: 1, width: 100 }} |
65 | 65 | placeholder='compact'
|
66 | 66 | onChangeText={(text) => {
|
67 | 67 | setCompactCs(text)
|
68 | 68 | }}
|
69 | 69 | ></TextInput>
|
70 | 70 | </View>
|
71 | 71 | <Text style={styles.footer_left}>修改value</Text>
|
72 |
| - <Button title='改value为2030,7,16'onPress={()=>{ |
73 |
| - setValueCs(new Date(2030,7,16)) |
| 72 | + <Button title='改value为2030,7,16' onPress={() => { |
| 73 | + setValueCs(new Date(2030, 7, 16)) |
74 | 74 | }}
|
75 | 75 | ></Button>
|
76 | 76 | <TextInput value={"设置后的value: " + valueCs}></TextInput>
|
77 |
| - <View style={{minHeight:65}}> |
78 |
| - <DateTimePicker |
79 |
| - mode = 'date' |
80 |
| - display = {compactCs} |
81 |
| - value = {new Date(1701658653897)} |
82 |
| - disabled = {isDisabled} |
83 |
| - style = {{width:widthCs,opacity:1,height:65,marginTop:0}} |
84 |
| - //onChange={onTimeChange} |
85 |
| - textColor={textColorCs} |
86 |
| - minimumDate={new Date(1999,0,2)} |
87 |
| - maximumDate={new Date(2023,0,25)} |
88 |
| - /> |
| 77 | + <View style={{ minHeight: 65 }}> |
| 78 | + <DateTimePicker |
| 79 | + mode='date' |
| 80 | + display={compactCs} |
| 81 | + value={new Date(1701658653897)} |
| 82 | + disabled={isDisabled} |
| 83 | + style={{ width: widthCs, opacity: 1, height: 65, marginTop: 0 }} |
| 84 | + //onChange={onTimeChange} |
| 85 | + textColor={textColorCs} |
| 86 | + minimumDate={new Date(1999, 0, 2)} |
| 87 | + maximumDate={new Date(2023, 0, 25)} |
| 88 | + /> |
89 | 89 | </View>
|
90 | 90 |
|
91 | 91 | <Text style={styles.footer_right}>mode="date" display="spinner"</Text>
|
92 | 92 | <Text style={styles.footer_left}>修改minimumDate</Text>
|
93 |
| - <TextInput |
94 |
| - style={{height:40,borderColor:'gray',borderWidth:1,width:100}} |
| 93 | + <TextInput |
| 94 | + style={{ height: 40, borderColor: 'gray', borderWidth: 1, width: 100 }} |
95 | 95 | placeholder='1900,1,3'
|
96 | 96 | onChangeText={(text) => {
|
97 | 97 | setMinimumDateCs(text)
|
98 | 98 | }}
|
99 | 99 | ></TextInput>
|
100 | 100 | <Text style={styles.footer_left}>修改maximumDate</Text>
|
101 |
| - <TextInput |
102 |
| - style={{height:40,borderColor:'gray',borderWidth:1,width:100}} |
| 101 | + <TextInput |
| 102 | + style={{ height: 40, borderColor: 'gray', borderWidth: 1, width: 100 }} |
103 | 103 | placeholder='2023,12,3'
|
104 |
| - onChangeText = {(text) => { |
| 104 | + onChangeText={(text) => { |
105 | 105 | setMaximumDateCs(text)
|
106 | 106 | }}
|
107 | 107 | ></TextInput>
|
108 |
| - <TextInput value = {JSON.stringify(maximumDateCs)}></TextInput> |
109 |
| - <View style = {{minHeight:minHeightCs}}> |
| 108 | + <TextInput value={JSON.stringify(maximumDateCs)}></TextInput> |
| 109 | + <View style={{ minHeight: minHeightCs }}> |
110 | 110 | <DateTimePicker
|
111 |
| - style = {{flex:1}} |
112 |
| - value = {valueCs} |
113 |
| - mode = "date" |
114 |
| - display = "spinner" |
115 |
| - disabled = {isDisabled} |
116 |
| - textColor = {textColorCs} |
| 111 | + style={{ flex: 1 }} |
| 112 | + value={valueCs} |
| 113 | + mode="date" |
| 114 | + display="spinner" |
| 115 | + disabled={isDisabled} |
| 116 | + textColor={textColorCs} |
117 | 117 | //onChange = {onTimeChange}
|
118 |
| - minimumDate = {dateChange(minimumDateCs)} |
119 |
| - maximumDate = {dateChange(maximumDateCs)} |
| 118 | + minimumDate={dateChange(minimumDateCs)} |
| 119 | + maximumDate={dateChange(maximumDateCs)} |
120 | 120 | />
|
121 | 121 | </View>
|
122 |
| - <Text style = {styles.footer_left}>验证字段:</Text> |
123 |
| - <Text style = {styles.footer_right}>mode="time"</Text> |
124 |
| - <Button title='is24Hour' onPress={()=> { |
125 |
| - is24HourCs? setIs24HourCs(false) : setIs24HourCs(true) |
| 122 | + <Text style={styles.footer_left}>验证字段:</Text> |
| 123 | + <Text style={styles.footer_right}>mode="time"</Text> |
| 124 | + <Button title='is24Hour' onPress={() => { |
| 125 | + is24HourCs ? setIs24HourCs(false) : setIs24HourCs(true) |
126 | 126 | }}></Button>
|
127 |
| - <DateTimePicker |
128 |
| - mode = "time" |
129 |
| - is24Hour = {is24HourCs} |
130 |
| - value = {new Date()} |
131 |
| - textColor = {textColorCs} |
132 |
| - style = {{width:140,opacity:1,height:45,marginTOP:0}} |
133 |
| - //onChange = {onTimeChange} |
134 |
| - /> |
135 |
| - </ScrollView> |
136 |
| -)} |
| 127 | + <DateTimePicker |
| 128 | + mode="time" |
| 129 | + is24Hour={is24HourCs} |
| 130 | + value={new Date()} |
| 131 | + textColor={textColorCs} |
| 132 | + style={{ width: 140, opacity: 1, height: 45, marginTOP: 0 }} |
| 133 | + //onChange = {onTimeChange} |
| 134 | + /> |
| 135 | + </ScrollView> |
| 136 | + ) |
| 137 | +} |
137 | 138 |
|
138 | 139 | const styles = StyleSheet.create({
|
139 |
| - gradient:{ |
| 140 | + gradient: { |
140 | 141 | width: 60,
|
141 | 142 | height: 60,
|
142 | 143 | padding: 10,
|
143 | 144 | },
|
144 |
| - prop_out_text:{ |
| 145 | + prop_out_text: { |
145 | 146 | height: 40,
|
146 | 147 | textAlign: 'left',
|
147 | 148 | color: '#000000',
|
148 | 149 | },
|
149 |
| - prop_input:{ |
| 150 | + prop_input: { |
150 | 151 | width: 120,
|
151 | 152 | height: 40,
|
152 | 153 | borderWidth: 1,
|
153 | 154 | color: "black",
|
154 | 155 | },
|
155 |
| - footer_row:{ |
| 156 | + footer_row: { |
156 | 157 | flexDirection: "row",
|
157 | 158 | height: 40,
|
158 | 159 | padding: 0,
|
159 | 160 | marginTop: 10,
|
160 | 161 | },
|
161 |
| - footer_label:{ |
| 162 | + footer_label: { |
162 | 163 | color: '#000',
|
163 | 164 | height: 30,
|
164 | 165 | fontSize: 20,
|
165 | 166 | paddingRight: 12,
|
166 | 167 | textAlign: 'left',
|
167 | 168 | },
|
168 |
| - top_title_center:{ |
| 169 | + top_title_center: { |
169 | 170 | color: '#000',
|
170 | 171 | height: 40,
|
171 | 172 | fontSize: 25,
|
172 | 173 | fontWeight: '600',
|
173 | 174 | paddingRight: 12,
|
174 | 175 | textAlign: 'center',
|
175 | 176 | },
|
176 |
| - footer_center:{ |
| 177 | + footer_center: { |
177 | 178 | color: '#000',
|
178 | 179 | fontSize: 12,
|
179 | 180 | width: '100%',
|
180 | 181 | fontWeight: '600',
|
181 | 182 | paddingRight: 12,
|
182 | 183 | textAlign: 'center',
|
183 | 184 | },
|
184 |
| - footer_left:{ |
| 185 | + footer_left: { |
185 | 186 | fontSize: 12,
|
186 |
| - height:40, |
| 187 | + height: 40, |
187 | 188 | paddingRight: 12,
|
188 | 189 | marginTop: 10,
|
189 | 190 | textAlign: 'left',
|
190 | 191 | },
|
191 |
| - footer_right:{ |
192 |
| - height:40, |
| 192 | + footer_right: { |
| 193 | + height: 40, |
193 | 194 | fontSize: 12,
|
194 | 195 | fontWeight: '600',
|
195 | 196 | paddingRight: 12,
|
196 | 197 | textAlign: 'right',
|
197 | 198 | },
|
198 |
| - container:{ |
| 199 | + container: { |
199 | 200 | width: '100%',
|
200 | 201 | height: '100%',
|
201 | 202 | },
|
202 |
| - innerText:{ |
| 203 | + innerText: { |
203 | 204 | width: 50,
|
204 | 205 | height: 50,
|
205 | 206 | fontWeight: 'bold',
|
206 | 207 | },
|
207 |
| - button:{ |
| 208 | + button: { |
208 | 209 | borderRadius: 5,
|
209 | 210 | margin: 4,
|
210 | 211 | paddingHorizontal: 15,
|
211 | 212 | },
|
212 |
| - buttonText:{ |
| 213 | + buttonText: { |
213 | 214 | color: '#ffffff',
|
214 | 215 | fontFamily: 'normal',
|
215 | 216 | fontSize: 18,
|
216 | 217 | margin: 10,
|
217 | 218 | },
|
218 |
| - buttonContainer:{ |
| 219 | + buttonContainer: { |
219 | 220 | flexDirection: 'row',
|
220 | 221 | flexWrap: 'wrap',
|
221 | 222 | justifyContent: 'space-between',
|
|
0 commit comments