Browse Source

date-time picker layout uptated

master
analuizaff 4 years ago
parent
commit
41a59bba6e
  1. 28
      src/app/components/forms/FormDatePicker.js
  2. 1
      src/app/config/colors.js
  3. 2
      src/app/screens/PluviometerSharingDataScreen.js

28
src/app/components/forms/FormDatePicker.js

@ -8,7 +8,7 @@ import {
Platform, Platform,
TouchableOpacity, TouchableOpacity,
} from "react-native"; } from "react-native";
import { FontAwesome5 } from "@expo/vector-icons";
import { MaterialCommunityIcons } from '@expo/vector-icons'
import DateTimePicker from "@react-native-community/datetimepicker"; import DateTimePicker from "@react-native-community/datetimepicker";
import moment from "moment"; import moment from "moment";
@ -71,10 +71,10 @@ const FormDatePicker = (props) => {
minimumDate={new Date(moment().subtract(1, "month"))} minimumDate={new Date(moment().subtract(1, "month"))}
maximumDate={new Date(moment())} maximumDate={new Date(moment())}
formatChosenDate={(selectedDate) => { formatChosenDate={(selectedDate) => {
if(mode == "date"){
if (mode == "date") {
return moment(selectedDate).format("DD/MM/YYYY"); return moment(selectedDate).format("DD/MM/YYYY");
} }
else{
else {
return moment(selectedDate).format("HH:mm"); return moment(selectedDate).format("HH:mm");
} }
}} //formatar a data e hora do selected date }} //formatar a data e hora do selected date
@ -94,13 +94,15 @@ const FormDatePicker = (props) => {
justifyContent: "space-between", justifyContent: "space-between",
}} }}
> >
<View style={styles.dateIcon}>
<MaterialCommunityIcons name="calendar-today" size={30} color="white" alignItems="center"/>
</View>
<View style={styles.dateInput}> <View style={styles.dateInput}>
<Text style={{ fontSize: dimensions.text.default }}> <Text style={{ fontSize: dimensions.text.default }}>
{" "} {" "}
{date.format("DD/MM/YYYY")} {"\n"} {time.format("HH:mm")} {date.format("DD/MM/YYYY")} {"\n"} {time.format("HH:mm")}
</Text> </Text>
</View> </View>
<FontAwesome5 name="calendar-day" size={30} color="grey" />
</View> </View>
{Platform.OS !== "ios" && show && renderDatePicker()} {Platform.OS !== "ios" && show && renderDatePicker()}
@ -167,8 +169,8 @@ const FormDatePicker = (props) => {
FormDatePicker.defaultProps = { FormDatePicker.defaultProps = {
textStyle: {}, textStyle: {},
defaultDate: moment(), defaultDate: moment(),
onDateChange: () => {},
onTimeChange: () => {},
onDateChange: () => { },
onTimeChange: () => { },
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -188,12 +190,20 @@ const styles = StyleSheet.create({
justifyContent: "center", justifyContent: "center",
}, },
dateInput: { dateInput: {
flex: 0.97,
backgroundColor: colors.light,
flex: 0.91,
backgroundColor: colors.white,
borderRadius: 25, borderRadius: 25,
padding: 18,
padding: 10,
marginVertical: 10, marginVertical: 10,
}, },
dateIcon:{
backgroundColor: colors.cerulean,
padding: 10,
width: 20,
alignItems: "center",
borderRadius: 5,
flex: 0.09,
}
}); });
export default FormDatePicker; export default FormDatePicker;

1
src/app/config/colors.js

@ -10,4 +10,5 @@ export default {
lightGray: "#d3d3d3", lightGray: "#d3d3d3",
gray: "gray", gray: "gray",
lightestGray: "#F0F0F0", lightestGray: "#F0F0F0",
cerulean: "#006493",
}; };

2
src/app/screens/PluviometerSharingDataScreen.js

@ -83,7 +83,7 @@ function PluviometerSharingDataScreen(props) {
</View> </View>
<View style={{ marginTop: 10, flex: 1 }}> <View style={{ marginTop: 10, flex: 1 }}>
<Text style={styles.labelStyle}>Data da coleta:</Text>
{/*<Text style={styles.labelStyle}>Data da coleta:</Text>*/}
<FormDatePicker <FormDatePicker
textStyle={{ textStyle={{
padding: 15, padding: 15,

Loading…
Cancel
Save