forked from cemaden-educacao/WPD-MobileApp
GabrielTrettel
4 years ago
2 changed files with 137 additions and 152 deletions
@ -1,151 +1,152 @@ |
|||
import React, { useState } from "react"; |
|||
import { |
|||
Modal, |
|||
StyleSheet, |
|||
Text, |
|||
TouchableHighlight, |
|||
View, |
|||
Platform, |
|||
TouchableOpacity, |
|||
} from "react-native"; |
|||
import React, { useState } from 'react'; 7 |
|||
import { Modal, StyleSheet, Text, TouchableHighlight, View, Platform, TouchableOpacity } from 'react-native'; |
|||
import DateTimePicker from "@react-native-community/datetimepicker"; |
|||
|
|||
import moment from "moment"; |
|||
import colors from "../../config/colors"; |
|||
import colors from '../../config/colors'; |
|||
|
|||
const FormDatePicker = (props) => { |
|||
const { textStyle, defaultDate } = props; |
|||
const [date, setDate] = useState(moment(defaultDate)); |
|||
const [show, setShow] = useState(false); |
|||
|
|||
const onChange = (e, selectedDate) => { |
|||
setDate(moment(selectedDate)); |
|||
}; |
|||
|
|||
const androidOnChange = (e, selectedDate) => { |
|||
setShow(false); |
|||
if (selectedDate) { |
|||
setDate(moment(selectedDate)); |
|||
props.onDateChange(selectedDate); |
|||
// console.log(moment(selectedDate).format("DD-MM-YYYY"));
|
|||
// console.log(date.format("DD-MM-YYYY"));
|
|||
|
|||
const { textStyle, defaultDate } = props; |
|||
const [date, setDate] = useState(moment(defaultDate)); |
|||
const [show, setShow] = useState(false); |
|||
const [auxDate, setAuxDate] = useState(moment()); |
|||
|
|||
const onChange = (e, selectedDate) => { |
|||
setAuxDate(moment(selectedDate)); // variavel auxiliar para não alterar a data com a rolagem, apenas com o done
|
|||
} |
|||
|
|||
const androidOnChange = (e, selectedDate) => { |
|||
setShow(false); |
|||
if (selectedDate) { |
|||
setDate(moment(selectedDate)); |
|||
props.onDateChange(selectedDate); |
|||
} |
|||
} |
|||
|
|||
const onCancelPress = () => { |
|||
//setDate(moment(defaultDate));
|
|||
setShow(false); |
|||
//console.log(moment(defaultDate).format("DD-MM-YYYY"))
|
|||
} |
|||
|
|||
const onDonePress = () => { |
|||
setDate(moment(auxDate)); //atualizar a data com a variável auxiliar
|
|||
props.onDateChange(auxDate); |
|||
setShow(false); |
|||
//console.log("done");
|
|||
//console.log(date.format("DD-MM-YYYY"));
|
|||
|
|||
} |
|||
}; |
|||
|
|||
const onCancelPress = () => { |
|||
setDate(moment(defaultDate)); |
|||
setShow(false); |
|||
//console.log(moment(defaultDate).format("DD-MM-YYYY"))
|
|||
}; |
|||
|
|||
const onDonePress = () => { |
|||
props.onDateChange(date); |
|||
setShow(false); |
|||
//console.log("done");
|
|||
//console.log(date.format("DD-MM-YYYY"));
|
|||
}; |
|||
|
|||
const renderDatePicker = () => { |
|||
|
|||
const renderDatePicker = () => { |
|||
return ( |
|||
<DateTimePicker |
|||
timeZoneOffsetInMinutes={0} |
|||
value={new Date(date)} |
|||
mode="date" |
|||
minimumDate={new Date(moment().subtract(1, 'month'))} |
|||
maximumDate={new Date(moment())} |
|||
formatChosenDate={selectedDate => {return moment(selectedDate).format('DD/MM/YYYY');}} //formatar a data do selected date
|
|||
display={Platform.OS === 'ios' ? 'spinner' : 'default'} |
|||
onChange={Platform.OS === 'ios' ? onChange : androidOnChange} |
|||
/> |
|||
) |
|||
} |
|||
|
|||
return ( |
|||
<DateTimePicker |
|||
timeZoneOffsetInMinutes={0} |
|||
value={new Date(date)} |
|||
mode="date" |
|||
minimumDate={new Date(moment().subtract(1, "month"))} |
|||
maximumDate={new Date(moment())} |
|||
display={Platform.OS === "ios" ? "spinner" : "default"} |
|||
onChange={Platform.OS === "ios" ? onChange : androidOnChange} |
|||
/> |
|||
); |
|||
}; |
|||
|
|||
return ( |
|||
<TouchableOpacity onPress={() => setShow(true)}> |
|||
<Text> {date.format("DD-MM-YYYY")}</Text> |
|||
{Platform.OS !== "ios" && show && renderDatePicker()} |
|||
|
|||
{Platform.OS === "ios" && show && ( |
|||
<Modal |
|||
transparent={true} |
|||
animationType="slide" |
|||
visible={show} |
|||
supportedOrientations={["portrait"]} |
|||
onRequestClose={() => setShow(false)} |
|||
> |
|||
<View style={{ flex: 1 }}> |
|||
<TouchableHighlight |
|||
style={{ |
|||
flex: 1, |
|||
alignItems: "flex-end", |
|||
flexDirection: "row", |
|||
}} |
|||
activeOpacity={1} |
|||
visible={show} |
|||
onPress={() => setShow(false)} |
|||
> |
|||
<TouchableHighlight |
|||
underlayColor={"#ffffff"} |
|||
style={{ |
|||
flex: 1, |
|||
borderTopColor: "#d3d3d3", |
|||
borderTopWidth: 1, |
|||
}} |
|||
onPress={() => console.log("datepicker clicked")} |
|||
> |
|||
<View |
|||
style={{ |
|||
backgroundColor: "#ffffff", |
|||
height: 256, |
|||
overflow: "hidden", |
|||
}} |
|||
<TouchableOpacity |
|||
onPress={() => setShow(true)}> |
|||
<Text> {date.format("DD/MM/YYYY")}</Text> |
|||
{Platform.OS !== 'ios' && show && renderDatePicker()} |
|||
|
|||
{Platform.OS === 'ios' && show && ( |
|||
<Modal |
|||
transparent={true} |
|||
animationType="slide" |
|||
visible={show} |
|||
supportedOrientations={['portrait']} |
|||
onRequestClose={() => setShow(false)} |
|||
> |
|||
<View style={{ marginTop: 20 }}>{renderDatePicker()}</View> |
|||
<TouchableHighlight |
|||
underlayColor={"transparent"} |
|||
onPress={() => onCancelPress()} |
|||
style={[styles.btnText, styles.btnCancel]} |
|||
> |
|||
<Text style={{ color: colors.primary }}>Cancel</Text> |
|||
</TouchableHighlight> |
|||
<TouchableHighlight |
|||
underlayColor={"transparent"} |
|||
onPress={() => onDonePress()} |
|||
style={[styles.btnText, styles.btnDone]} |
|||
> |
|||
<Text style={{ color: colors.primary }}>Done</Text> |
|||
</TouchableHighlight> |
|||
</View> |
|||
</TouchableHighlight> |
|||
</TouchableHighlight> |
|||
</View> |
|||
</Modal> |
|||
)} |
|||
</TouchableOpacity> |
|||
); |
|||
<View style={{ flex: 1 }}> |
|||
<TouchableHighlight |
|||
style={{ |
|||
flex: 1, |
|||
alignItems: "flex-end", |
|||
flexDirection: "row", |
|||
}} |
|||
activeOpacity={1} |
|||
visible={show} |
|||
onPress={() => setShow(false)}> |
|||
<TouchableHighlight |
|||
underlayColor={'#ffffff'} |
|||
style={{ |
|||
flex: 1, |
|||
borderTopColor: '#d3d3d3', |
|||
borderTopWidth: 1, |
|||
}} |
|||
onPress={() => console.log("datepicker clicked")} |
|||
> |
|||
<View style={{ |
|||
backgroundColor: '#ffffff', |
|||
height: 256, |
|||
overflow: 'hidden', |
|||
}}> |
|||
<View style={{ marginTop: 20 }}> |
|||
{ renderDatePicker() } |
|||
</View> |
|||
<TouchableHighlight |
|||
underlayColor={"transparent"} |
|||
onPress={() => onCancelPress()} |
|||
style={[styles.btnText, styles.btnCancel]} |
|||
> |
|||
<Text style={{ color: colors.primary }}> |
|||
Cancelar |
|||
</Text> |
|||
</TouchableHighlight> |
|||
<TouchableHighlight |
|||
underlayColor={"transparent"} |
|||
onPress={() => onDonePress()} |
|||
style={[styles.btnText, styles.btnDone]} |
|||
> |
|||
<Text style={{ color: colors.primary }}> |
|||
Confirmar |
|||
</Text> |
|||
</TouchableHighlight> |
|||
|
|||
</View> |
|||
|
|||
</TouchableHighlight> |
|||
</TouchableHighlight> |
|||
</View> |
|||
</Modal> |
|||
)} |
|||
</TouchableOpacity> |
|||
); |
|||
}; |
|||
|
|||
FormDatePicker.defaultProps = { |
|||
textStyle: {}, |
|||
defaultDate: moment(), |
|||
onDateChange: () => {}, |
|||
}; |
|||
textStyle: {}, |
|||
defaultDate: moment(), |
|||
onDateChange: () => { }, |
|||
} |
|||
|
|||
const styles = StyleSheet.create({ |
|||
btnCancel: { |
|||
left: 0, |
|||
}, |
|||
btnDone: { |
|||
right: 0, |
|||
}, |
|||
btnText: { |
|||
position: "absolute", |
|||
top: 0, |
|||
height: 42, |
|||
paddingHorizontal: 20, |
|||
flexDirection: "row", |
|||
alignItems: "center", |
|||
justifyContent: "center", |
|||
}, |
|||
btnCancel: { |
|||
left: 0, |
|||
}, |
|||
btnDone: { |
|||
right: 0, |
|||
}, |
|||
btnText: { |
|||
position: "absolute", |
|||
top: 0, |
|||
height: 42, |
|||
paddingHorizontal: 20, |
|||
flexDirection: "row", |
|||
alignItems: "center", |
|||
justifyContent: "center", |
|||
}, |
|||
}); |
|||
|
|||
export default FormDatePicker; |
|||
export default FormDatePicker; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue