73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
import { ColorsStatus } from "@/constants/ColorsStatus";
|
|
import Styles from "@/constants/Styles";
|
|
import { stringToDate } from "@/lib/fun_stringToDate";
|
|
import DateTimePicker from "@react-native-community/datetimepicker";
|
|
import dayjs from "dayjs";
|
|
import { useState } from "react";
|
|
import { Pressable, View } from "react-native";
|
|
import Text from "./Text";
|
|
|
|
type Props = {
|
|
label?: string;
|
|
placeholder?: string;
|
|
onChange: (val: string) => void;
|
|
info?: string;
|
|
error?: boolean;
|
|
errorText?: string;
|
|
required?: boolean;
|
|
mode: 'date' | 'datetime' | 'time'
|
|
round?: boolean
|
|
width?: number
|
|
bg?: 'white' | 'transparent'
|
|
value?: string
|
|
disable?: boolean
|
|
};
|
|
|
|
|
|
export function InputDate({ label, value, placeholder, onChange, info, disable, error, errorText, required, mode, round, width, }: Props) {
|
|
const [modal, setModal] = useState(false);
|
|
|
|
const onChangeDate = ({ type }: { type: string }, selectedDate: any) => {
|
|
if (type === "set") {
|
|
if (mode == "date") {
|
|
onChange(dayjs(selectedDate).format("DD-MM-YYYY"))
|
|
} else if (mode == "time") {
|
|
onChange(dayjs(selectedDate).format("HH:mm"))
|
|
}
|
|
setModal(false)
|
|
} else {
|
|
setModal(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<View style={[Styles.mb10]}>
|
|
{
|
|
label != undefined && (
|
|
<Text style={[Styles.mb05, error && Styles.cError]}>
|
|
{label}
|
|
{required && (<Text style={Styles.cError}>*</Text>)}
|
|
</Text>
|
|
)
|
|
}
|
|
<Pressable style={[Styles.inputRoundForm, disable && ColorsStatus.gray, error && { borderColor: "red" }, { backgroundColor: 'white' }]} onPress={() => setModal(true)} disabled={disable}>
|
|
<Text style={!value && [Styles.cGray]}>{value ? value : placeholder}</Text>
|
|
</Pressable>
|
|
{error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
|
|
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
|
|
</View>
|
|
{
|
|
modal && (
|
|
<DateTimePicker
|
|
value={value ? stringToDate(value) : new Date()}
|
|
mode={mode}
|
|
display="default"
|
|
onChange={onChangeDate}
|
|
onTouchCancel={() => setModal(false)}
|
|
/>
|
|
)
|
|
}
|
|
</>
|
|
)
|
|
} |