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.")
.max(10000)
.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(),
});
function PluviometerSharingDataScreen(props) {
const location = useLocation();
let dateTime = new Date().toString();
/*-------------------------------------------DATETIMEPICKER------------------------------------------------
//-------------------------------------------DATETIMEPICKER------------------------------------------------
const { textStyle, defaultDate } = props;
const [date, setDate] = useState(moment(defaultDate))
const [show, setShow] = useState(false);
const [dateTime, setDateTime] = useState(moment(defaultDate)) //gambi pra inserir no BD
//---------------ios------------------------
const onChange = (e, selectedDate) => {
setDate(moment(selectedDate));
dateTime = moment(selectedDate).format("DD/MM/YYYY").toString();
setDateTime(moment(selectedDate).format("DD/MM/YYYY").toString());
}
const onCancelPress = () => {
setDate(moment(defaultDate));
@ -71,8 +71,7 @@ function PluviometerSharingDataScreen(props) {
setShow(false);
if (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"
minimumDate={new Date(moment().subtract(1, 'month'))}
maximumDate={new Date(moment())}
display={Platform.OS === 'ios' ? 'spinner' : 'default'}
onChange={Platform.OS === 'ios' ? onChange : onAndroidChange}
/>
)
}
---------------------------------------------------------------------------------------------------------*/
// ---------------------------------------------------------------------------------------------------------*/
return (
<Screen style={styles.container}>
<View style={{ alignItems: "center" }}>
@ -104,7 +104,7 @@ function PluviometerSharingDataScreen(props) {
<Form
initialValues={{
pluviometer: "",
data: "",
//data: "",
images: [],
}}
onSubmit={(values) => {
@ -129,34 +129,15 @@ function PluviometerSharingDataScreen(props) {
/>
</View>
<View style={{ marginTop: 10, flex: 1, borderRadius: 25 }}>
<View style={{ marginTop: 10, flex: 1 }}>
<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}
onPress={() => setShow(true)}>
<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>
<FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
</View>
<FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
{Platform.OS !== 'ios' && show && renderDatePicker()}
{Platform.OS === 'ios' && show && (
<Modal
@ -190,7 +171,7 @@ function PluviometerSharingDataScreen(props) {
overflow: 'hidden',
}}>
<View style={{ marginTop: 20 }}>
{renderDatePicker()}
{ renderDatePicker() }
</View>
<TouchableHighlight
underlayColor={'transparent'}
@ -213,7 +194,6 @@ function PluviometerSharingDataScreen(props) {
)}
</View>
</TouchableOpacity>
*/}
</View>
<FormImagePicker
backgroundColor="#1976D2"
@ -240,15 +220,16 @@ const styles = StyleSheet.create({
alignItems: "center",
},
datePickerView: {
width: 280,
flexDirection: "row",
justifyContent: "space-between",
paddingVertical: 15,
flex: 1,
},
datepickerStyle: {
borderRadius: 25,
width: 280,
backgroundColor: "#f8f4f4",
flex: 0.9,
flexDirection: "row"
},
dateIcon: {
marginTop: 25,

Loading…
Cancel
Save