Browse Source

setting a time limit on datetimepicker

master
analuizaff 3 years ago
parent
commit
0380d099f5
  1. 44
      src/app/components/forms/FormDatePicker.js

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

@ -7,6 +7,7 @@ import {
View, View,
Platform, Platform,
TouchableOpacity, TouchableOpacity,
Alert,
} from "react-native"; } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons"; import { MaterialCommunityIcons } from "@expo/vector-icons";
import DateTimePicker from "@react-native-community/datetimepicker"; import DateTimePicker from "@react-native-community/datetimepicker";
@ -14,9 +15,10 @@ import DateTimePicker from "@react-native-community/datetimepicker";
import moment from "moment"; import moment from "moment";
import colors from "../../config/colors"; import colors from "../../config/colors";
import { dimensions } from "../../config/dimensions"; import { dimensions } from "../../config/dimensions";
import { showMessage } from "react-native-flash-message";
const FormDatePicker = (props) => { const FormDatePicker = (props) => {
const [disabled,setDisabled]=useState(props.disabled);
const [disabled, setDisabled] = useState(props.disabled);
const { textStyle, defaultDate } = props; const { textStyle, defaultDate } = props;
const [date, setDate] = useState(moment(defaultDate)); const [date, setDate] = useState(moment(defaultDate));
@ -25,6 +27,19 @@ const FormDatePicker = (props) => {
const [mode, setMode] = useState("date"); const [mode, setMode] = useState("date");
const [time, setTime] = useState(moment(defaultDate)); const [time, setTime] = useState(moment(defaultDate));
const validateTimeInput = (selectedDate) => {
if (!(moment().isSameOrAfter(selectedDate)) && new Date(moment()).getDay() == new Date(date).getDay()) {
Alert.alert(
"Horário inválido",
"Selecione um horário válido",
[
{ text: "OK", onPress: () => renderDatePicker() }
]
);
return false;
}
return true;
}
const onChange = (e, selectedDate) => { const onChange = (e, selectedDate) => {
setAuxDate(moment(selectedDate)); // variavel auxiliar para não alterar a data com a rolagem, apenas com o done setAuxDate(moment(selectedDate)); // variavel auxiliar para não alterar a data com a rolagem, apenas com o done
@ -32,17 +47,21 @@ const FormDatePicker = (props) => {
const androidOnChange = (e, selectedDate) => { const androidOnChange = (e, selectedDate) => {
setShow(false); setShow(false);
if (selectedDate) { if (selectedDate) {
if (mode == "date") { if (mode == "date") {
setDate(moment(selectedDate)); setDate(moment(selectedDate));
props.onDateChange(selectedDate); props.onDateChange(selectedDate);
setMode("time"); setMode("time");
setShow(true); // to show the picker again in time mode setShow(true); // to show the picker again in time mode
} else {
setTime(moment(selectedDate));
props.onTimeChange(selectedDate);
setShow(false);
setMode("date");
}
else {
if (validateTimeInput(selectedDate)) {
setTime(moment(selectedDate));
props.onTimeChange(selectedDate);
setShow(false);
setMode("date");
}
} }
} }
}; };
@ -61,11 +80,14 @@ const FormDatePicker = (props) => {
setShow(true); // to show the picker again in time mode setShow(true); // to show the picker again in time mode
} }
else { else {
setTime(moment(auxDate));
props.onTimeChange(auxDate);
setShow(false);
setMode("date");
if (validateTimeInput(auxDate)) {
setTime(moment(auxDate));
props.onTimeChange(auxDate);
setShow(false);
setMode("date");
}
} }
}; };
const renderDatePicker = () => { const renderDatePicker = () => {
@ -192,7 +214,7 @@ FormDatePicker.defaultProps = {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
btnCancel: { btnCancel: {
left: 0, left: 0,
},
},
btnDone: { btnDone: {
right: 0, right: 0,
}, },

Loading…
Cancel
Save