Browse Source

datepicker display for ios

master
analuizaff 4 years ago
parent
commit
be403f3d2a
  1. 49
      src/app/screens/PluviometerSharingDataScreen.js

49
src/app/screens/PluviometerSharingDataScreen.js

@ -40,23 +40,23 @@ const validationSchema = Yup.object().shape({
.min(0, "O valor deve ser maior ou igual a 0.") .min(0, "O valor deve ser maior ou igual a 0.")
.max(10000) .max(10000)
.label("pluviometer"), .label("pluviometer"),
data: Yup.string().required("Campo obrigatório. Por favor, selecione a data"),
//data: Yup.string().required("Campo obrigatório. Por favor, selecione a data"),
images: Yup.array(), images: Yup.array(),
}); });
function PluviometerSharingDataScreen(props) { function PluviometerSharingDataScreen(props) {
const location = useLocation(); const location = useLocation();
let dateTime = new Date().toString();
/*-------------------------------------------DATETIMEPICKER------------------------------------------------
//-------------------------------------------DATETIMEPICKER------------------------------------------------
const { textStyle, defaultDate } = props; const { textStyle, defaultDate } = props;
const [date, setDate] = useState(moment(defaultDate)) const [date, setDate] = useState(moment(defaultDate))
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const [dateTime, setDateTime] = useState(moment(defaultDate)) //gambi pra inserir no BD
//---------------ios------------------------ //---------------ios------------------------
const onChange = (e, selectedDate) => { const onChange = (e, selectedDate) => {
setDate(moment(selectedDate)); setDate(moment(selectedDate));
dateTime = moment(selectedDate).format("DD/MM/YYYY").toString();
setDateTime(moment(selectedDate).format("DD/MM/YYYY").toString());
} }
const onCancelPress = () => { const onCancelPress = () => {
setDate(moment(defaultDate)); setDate(moment(defaultDate));
@ -71,8 +71,7 @@ function PluviometerSharingDataScreen(props) {
setShow(false); setShow(false);
if (selectedDate) { if (selectedDate) {
setDate(moment(selectedDate)); setDate(moment(selectedDate));
dateTime = moment(selectedDate).format("DD/MM/YYYY").toString();
//props.onDateChange(selectedDate);
setDateTime(moment(selectedDate).format("DD/MM/YYYY").toString());
} }
} }
@ -84,11 +83,12 @@ function PluviometerSharingDataScreen(props) {
mode="date" mode="date"
minimumDate={new Date(moment().subtract(1, 'month'))} minimumDate={new Date(moment().subtract(1, 'month'))}
maximumDate={new Date(moment())} maximumDate={new Date(moment())}
display={Platform.OS === 'ios' ? 'spinner' : 'default'}
onChange={Platform.OS === 'ios' ? onChange : onAndroidChange} onChange={Platform.OS === 'ios' ? onChange : onAndroidChange}
/> />
) )
} }
---------------------------------------------------------------------------------------------------------*/
// ---------------------------------------------------------------------------------------------------------*/
return ( return (
<Screen style={styles.container}> <Screen style={styles.container}>
<View style={{ alignItems: "center" }}> <View style={{ alignItems: "center" }}>
@ -104,7 +104,7 @@ function PluviometerSharingDataScreen(props) {
<Form <Form
initialValues={{ initialValues={{
pluviometer: "", pluviometer: "",
data: "",
//data: "",
images: [], images: [],
}} }}
onSubmit={(values) => { onSubmit={(values) => {
@ -129,34 +129,15 @@ function PluviometerSharingDataScreen(props) {
/> />
</View> </View>
<View style={{ marginTop: 10, flex: 1, borderRadius: 25 }}>
<View style={{ marginTop: 10, flex: 1 }}>
<Text style={styles.labelStyle}>Data da coleta:</Text> <Text style={styles.labelStyle}>Data da coleta:</Text>
<View style={{ flex: 1, flexDirection: "row" }}>
<View style={{ flex: 1 }}>
<FormField
keyboardType="numbers-and-punctuation"
maxLength={10}
name="data"
placeholder="dd/mm/aaaa"
values={dateTime}
flex={1}
/>
</View>
<FontAwesome5
style={styles.dateIcon}
name="calendar-day"
size={24}
color="grey"
/>
</View>
{/*
<TouchableOpacity style={styles.datepickerStyle} <TouchableOpacity style={styles.datepickerStyle}
onPress={() => setShow(true)}> onPress={() => setShow(true)}>
<View style={styles.datePickerView}> <View style={styles.datePickerView}>
<View style={{ flexDirection: "row", justifyContent: "space-between", width: 280 }}>
<View style={{ flexDirection: "row", flex: 0.8}}>
<Text style={{ fontSize: 16, marginLeft: 15 }}>{date.format('DD/MM/YYYY')}</Text> <Text style={{ fontSize: 16, marginLeft: 15 }}>{date.format('DD/MM/YYYY')}</Text>
<FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
</View> </View>
<FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
{Platform.OS !== 'ios' && show && renderDatePicker()} {Platform.OS !== 'ios' && show && renderDatePicker()}
{Platform.OS === 'ios' && show && ( {Platform.OS === 'ios' && show && (
<Modal <Modal
@ -190,7 +171,7 @@ function PluviometerSharingDataScreen(props) {
overflow: 'hidden', overflow: 'hidden',
}}> }}>
<View style={{ marginTop: 20 }}> <View style={{ marginTop: 20 }}>
{renderDatePicker()}
{ renderDatePicker() }
</View> </View>
<TouchableHighlight <TouchableHighlight
underlayColor={'transparent'} underlayColor={'transparent'}
@ -213,7 +194,6 @@ function PluviometerSharingDataScreen(props) {
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
*/}
</View> </View>
<FormImagePicker <FormImagePicker
backgroundColor="#1976D2" backgroundColor="#1976D2"
@ -240,15 +220,16 @@ const styles = StyleSheet.create({
alignItems: "center", alignItems: "center",
}, },
datePickerView: { datePickerView: {
width: 280,
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between", justifyContent: "space-between",
paddingVertical: 15, paddingVertical: 15,
flex: 1,
}, },
datepickerStyle: { datepickerStyle: {
borderRadius: 25, borderRadius: 25,
width: 280,
backgroundColor: "#f8f4f4", backgroundColor: "#f8f4f4",
flex: 0.9,
flexDirection: "row"
}, },
dateIcon: { dateIcon: {
marginTop: 25, marginTop: 25,

Loading…
Cancel
Save