Browse Source

Date picker at pluviometer sharing data screen

master
analuizaff 4 years ago
parent
commit
e490e6614d
  1. 131
      src/app/screens/PluviometerSharingDataScreen.js

131
src/app/screens/PluviometerSharingDataScreen.js

@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import { StyleSheet, Text, View, Image, Button, TouchableHighlight, Platform } from "react-native";
import * as Yup from "yup"; import * as Yup from "yup";
import { import {
@ -14,6 +14,12 @@ import DatePicker from "react-native-datepicker";
import useLocation from "../hooks/useLocation"; import useLocation from "../hooks/useLocation";
import FormImagePicker from "../components/forms/FormImagePicker"; import FormImagePicker from "../components/forms/FormImagePicker";
import { insertPluviometerData } from "../database/databaseLoader"; import { insertPluviometerData } from "../database/databaseLoader";
import RNDateTimePicker from '@react-native-community/datetimepicker';
import { TextInput, TouchableOpacity } from "react-native-gesture-handler";
import DateTimePicker from '@react-native-community/datetimepicker';
import { FontAwesome5 } from '@expo/vector-icons';
import moment from 'moment';
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
pluviometer: Yup.number().required().min(1).max(10000).label("pluviometer"), pluviometer: Yup.number().required().min(1).max(10000).label("pluviometer"),
@ -23,14 +29,47 @@ const validationSchema = Yup.object().shape({
function PluviometerSharingDataScreen(props) { function PluviometerSharingDataScreen(props) {
const location = useLocation(); const location = useLocation();
var day = new Date().getDate();
var month = new Date().getMonth() + 1;
var year = new Date().getFullYear();
/*-------------------------------------------DATETIMEPICKER------------------------------------------------*/
const { textStyle, defaultDate } = props;
const [date, setDate] = useState(moment(defaultDate))
const [show, setShow] = useState(false);
const onAndroidChange = (e, selectedDate) => {
setShow(false);
if (selectedDate) {
setDate(moment(selectedDate));
//props.onDateChange(selectedDate);
}
}
const onCancelPress = () => {
setDate(moment(defaultDate));
setShow(false);
}
const onDonePress = () => {
// props.onDateChange(date);
setShow(false);
}
var currentDate = day + "/" + month + "/" + year;
const renderDatePicker = () => {
return (
<DateTimePicker
timeZoneOffsetInMinutes={0}
value={new Date(date)}
mode="date"
maximumDate={new Date()}
onChange={onAndroidChange}
/>
)
}
const [date, setDate] = useState(currentDate);
/*---------------------------------------------------------------------------------------------------------*/
// var day = new Date().getDate();
// var month = new Date().getMonth() + 1;
// var year = new Date().getFullYear();
return ( return (
<Screen style={styles.container}> <Screen style={styles.container}>
<View style={{ alignSelf: "center" }}> <View style={{ alignSelf: "center" }}>
@ -55,15 +94,7 @@ function PluviometerSharingDataScreen(props) {
validationSchema={validationSchema} validationSchema={validationSchema}
> >
<View style={{ marginTop: 30 }}> <View style={{ marginTop: 30 }}>
<Text
style={{
fontSize: 16,
fontWeight: "bold",
textAlign: "left",
color: "#1976D2",
marginTop: 10,
}}
>
<Text style={styles.labelStyle}>
Quantidade de chuva: Quantidade de chuva:
</Text> </Text>
<FormField <FormField
@ -76,51 +107,25 @@ function PluviometerSharingDataScreen(props) {
</View> </View>
<View style={{ marginTop: 10, width: 220, borderRadius: 25 }}> <View style={{ marginTop: 10, width: 220, borderRadius: 25 }}>
<Text
style={{
fontSize: 16,
fontWeight: "bold",
textAlign: "left",
color: "#1976D2",
marginBottom: 5,
}}
>
<Text style={styles.labelStyle}>
Data da coleta: Data da coleta:
</Text> </Text>
<DatePicker
style={styles.datePickerStyle}
date={date}
mode="date" // The enum of date, datetime and time
placeholder="Selecione a data da coleta"
format="DD/MM/YYYY"
minDate="01/01/2020"
maxDate={currentDate}
confirmBtnText="Confirmar"
cancelBtnText="Cancelar"
customStyles={{
dateIcon: {
//display: 'none',
position: "absolute",
left: 0,
top: 4,
marginLeft: 0,
},
dateInput: {
marginLeft: 36,
borderRadius: 18,
},
}}
onDateChange={(date) => {
setDate(date);
}}
/>
<TouchableOpacity style={styles.datepickerStyle}
onPress={() => setShow(true)}>
<View style={styles.datePickerView}>
<Text style={{ fontSize: 16, marginLeft:15}}>
{date.format('DD/MM/YYYY')}
</Text>
<FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey"/>
{show && renderDatePicker()}
</View>
</TouchableOpacity>
</View> </View>
<FormImagePicker <FormImagePicker
backgroundColor="#1976D2" backgroundColor="#1976D2"
name="images" name="images"
styles={{ width: 50 }} styles={{ width: 50 }}
/> />
<SubmitButton title="Enviar" /> <SubmitButton title="Enviar" />
</Form> </Form>
</Screen> </Screen>
@ -137,8 +142,26 @@ const styles = StyleSheet.create({
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
}, },
datePickerStyle: {
width: 180,
datePickerView: {
width: 280,
flexDirection: "row",
justifyContent:"space-between",
paddingVertical:15,
},
datepickerStyle: {
borderRadius: 25,
width: 280,
backgroundColor: "#f8f4f4",
},
dateIcon: {
marginRight:15,
},
labelStyle:{
fontSize: 16,
fontWeight: "bold",
textAlign: "left",
color: "#1976D2",
marginBottom: 5,
}, },
}); });

Loading…
Cancel
Save