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
|
import React, { Component, useState } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, TextInput, Button, Alert, ScrollView} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
function MyDatePicker(props) {
const [visible, setVisible] = useState(false)
const [mode, setMode] = useState('')
const showPicker = () => {
setVisible(true)
}
const showDate = () => {
setMode('date')
showPicker()
}
const showTime = () => {
setMode('time')
showPicker()
}
const dateChange = (event, selectedDate) => {
const currentDate = selectedDate || props.date
setVisible(false)
props.setDate(currentDate)
}
return (
<View>
<Text>{props.label}</Text>
<Text onPress={showDate}>
{`${('0' + props.date.getDate()).slice(-2)}/${('0' + (props.date.getMonth() + 1)).slice(-2)}/${props.date.getFullYear()}`}
</Text>
<Text onPress={showTime}>
{`${('0' + props.date.getHours()).slice(-2)}:${('0' + props.date.getMinutes()).slice(-2)}`}
</Text>
{ visible &&
<DateTimePicker
value={date}
mode={mode}
onChange={dateChange}
/>
}
</View>);
}
const ChargeProg = () => {
const [date1, setDate1] = useState(new Date());
const [date2, setDate2] = useState(new Date());
return (
<View>
<View>
<Text style={styles.title_text}>Programmez votre charge</Text>
<View>
<MyDatePicker date={date1} onChange={setDate1} label="Début de charge :"/>
</View>
<View>
<MyDatePicker date={date2} onChange={setDate2} label="Fin de charge :"/>
</View>
</View>
<View>
<Button title="Envoyer" onPress={() =>
Alert.alert("debut : "+date1+" fin : "+date2)
}/>
</View>
</View>
);
};
const styles = StyleSheet.create (...)
export default ChargeProg; |
Partager