Browse Source

Fixing date picker and making it work to get only the date by omitting the time hook

master
GabrielTrettel 3 years ago
parent
commit
5da978b0b6
  1. 23
      src/app/components/DatePicker.js
  2. 23
      src/app/components/forms/FormDatePicker.js

23
src/app/components/DatePicker.js

@ -48,9 +48,11 @@ export default function DatePicker(props) {
if (selectedDate) {
if (mode == "date") {
setDate(moment(selectedDate));
props.onDateChange(date);
setMode("time");
setShow(true); // to show the picker again in time mode
props.onDateChange(moment(selectedDate));
if (props.onTimeChange) {
setMode("time");
setShow(true); // to show the picker again in time mode
}
} else {
if (validateTimeInput(selectedDate)) {
setTime(moment(selectedDate));
@ -74,8 +76,10 @@ export default function DatePicker(props) {
if (mode == "date") {
setDate(moment(auxDate)); //atualizar a data com a variável auxiliar
props.onDateChange(auxDate);
setMode("time");
setShow(true); // to show the picker again in time mode
if (props.onTimeChange) {
setMode("time");
setShow(true); // to show the picker again in time mode
}
} else {
if (validateTimeInput(auxDate)) {
setTime(moment(auxDate));
@ -96,7 +100,7 @@ export default function DatePicker(props) {
mode={mode}
is24Hour={true}
locale={"pt-br"}
minimumDate={new Date(moment().subtract(1, "month"))}
minimumDate={props.minimumDate}
maximumDate={new Date(moment())}
formatChosenDate={(selectedDate) => {
if (mode == "date") {
@ -112,7 +116,7 @@ export default function DatePicker(props) {
};
return (
<View>
<View flex={1}>
<TouchableOpacity disabled={disabled} onPress={() => setShow(true)}>
{props.children}
</TouchableOpacity>
@ -144,7 +148,6 @@ export default function DatePicker(props) {
borderTopColor: "#d3d3d3",
borderTopWidth: 1,
}}
// onPress={() => console.log("datepicker clicked")}
>
<View
style={{
@ -182,7 +185,9 @@ DatePicker.defaultProps = {
textStyle: {},
defaultDate: moment(),
onDateChange: () => {},
onTimeChange: () => {},
onTimeChange: undefined,
minimumDate: new Date(moment().subtract(1, "month")),
flex: 0,
};
const styles = StyleSheet.create({

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

@ -53,21 +53,32 @@ function PluvRegisterPicker(props) {
);
}
export default function FormDatePicker({ formTypeFace = "events", ...props }) {
export default function FormDatePicker({ formTypeFace = "events", onDateChange, onTimeChange, children, ...props }) {
const RenderFace = () => {
if (children)
return children
else if (formTypeFace == "events")
return EventsDatePicker(props)
else
return PluvRegisterPicker(props)
}
return (
<View flex={1}>
<DatePicker
textStyle={{
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={props.onDateChange}
onTimeChange={props.onTimeChange}
onDateChange={onDateChange}
onTimeChange={onTimeChange}
{...props}
>
{formTypeFace == "events"
? EventsDatePicker(props)
: PluvRegisterPicker(props)}
<RenderFace/>
</DatePicker>
</View>
);
}

Loading…
Cancel
Save