Browse Source

date-time picker layout uptated

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

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

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

1
src/app/config/colors.js

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

2
src/app/screens/PluviometerSharingDataScreen.js

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

Loading…
Cancel
Save