upd: input datetime
Deskripsi: - update tombol konfirmasi pada input date time ios - dan konfigurasi pada android No Issues
This commit is contained in:
@@ -1,8 +1,9 @@
|
|||||||
import { ColorsStatus } from "@/constants/ColorsStatus";
|
import { ColorsStatus } from "@/constants/ColorsStatus";
|
||||||
import Styles from "@/constants/Styles";
|
import Styles from "@/constants/Styles";
|
||||||
|
import { stringToDate, stringToDateTime } from "@/lib/fun_stringToDate";
|
||||||
import DateTimePicker from "@react-native-community/datetimepicker";
|
import DateTimePicker from "@react-native-community/datetimepicker";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import { useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { Platform, Pressable, View } from "react-native";
|
import { Platform, Pressable, View } from "react-native";
|
||||||
import Text from "./Text";
|
import Text from "./Text";
|
||||||
import ModalFloat from "./modalFloat";
|
import ModalFloat from "./modalFloat";
|
||||||
@@ -26,20 +27,50 @@ type Props = {
|
|||||||
|
|
||||||
export function InputDate({ label, value, placeholder, onChange, info, disable, error, errorText, required, mode, round, width, }: Props) {
|
export function InputDate({ label, value, placeholder, onChange, info, disable, error, errorText, required, mode, round, width, }: Props) {
|
||||||
const [modal, setModal] = useState(false);
|
const [modal, setModal] = useState(false);
|
||||||
|
const [valueFix, setValueFix] = useState(new Date())
|
||||||
|
const [valueFirst, setValueFirst] = useState("")
|
||||||
|
|
||||||
const onChangeDate = (type: string, selectedDate: any) => {
|
const onChangeDate = (type: string, selectedDate: any) => {
|
||||||
if (type === "set") {
|
if (type === "set") {
|
||||||
|
let formatted = ""
|
||||||
if (mode == "date") {
|
if (mode == "date") {
|
||||||
onChange(dayjs(selectedDate).format("DD-MM-YYYY"))
|
formatted = dayjs(selectedDate).format("DD-MM-YYYY")
|
||||||
} else if (mode == "time") {
|
} else if (mode == "time") {
|
||||||
onChange(dayjs(selectedDate).format("HH:mm"))
|
formatted = dayjs(selectedDate).format("HH:mm")
|
||||||
|
}
|
||||||
|
|
||||||
|
setValueFirst(formatted)
|
||||||
|
|
||||||
|
if (Platform.OS == "android") {
|
||||||
|
onChange(formatted)
|
||||||
|
setModal(false)
|
||||||
}
|
}
|
||||||
setModal(false)
|
|
||||||
} else {
|
|
||||||
setModal(false);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function onSetValue() {
|
||||||
|
onChange(valueFirst)
|
||||||
|
setModal(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeValue() {
|
||||||
|
if (value) {
|
||||||
|
let valDate = new Date()
|
||||||
|
if (mode == "date") {
|
||||||
|
valDate = stringToDate(value)
|
||||||
|
} else if (mode == "time") {
|
||||||
|
valDate = stringToDateTime("", value)
|
||||||
|
}
|
||||||
|
setValueFix(valDate)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (modal) changeValue()
|
||||||
|
}, [value, modal])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<View style={[Styles.mb10]}>
|
<View style={[Styles.mb10]}>
|
||||||
@@ -63,23 +94,24 @@ export function InputDate({ label, value, placeholder, onChange, info, disable,
|
|||||||
<ModalFloat
|
<ModalFloat
|
||||||
isVisible={modal}
|
isVisible={modal}
|
||||||
setVisible={setModal}
|
setVisible={setModal}
|
||||||
onSubmit={() => { }}
|
onSubmit={() => { onSetValue() }}
|
||||||
buttonHide
|
|
||||||
disableSubmit
|
|
||||||
title={mode == "date" ? "Pilih Tanggal" : mode == "time" ? "Pilih Jam" : "Pilih Tanggal & Jam"}>
|
title={mode == "date" ? "Pilih Tanggal" : mode == "time" ? "Pilih Jam" : "Pilih Tanggal & Jam"}>
|
||||||
<DateTimePicker
|
<DateTimePicker
|
||||||
value={new Date()}
|
value={valueFix}
|
||||||
mode={mode}
|
mode={mode}
|
||||||
display="spinner"
|
display="spinner"
|
||||||
onChange={(event, date) => { onChangeDate(event.type, date) }}
|
onChange={(event, date) => {
|
||||||
|
onChangeDate(event.type, date)
|
||||||
|
}}
|
||||||
onTouchCancel={() => setModal(false)}
|
onTouchCancel={() => setModal(false)}
|
||||||
|
|
||||||
/>
|
/>
|
||||||
</ModalFloat>
|
</ModalFloat>
|
||||||
)
|
)
|
||||||
) : (
|
) : (
|
||||||
modal && (
|
modal && (
|
||||||
<DateTimePicker
|
<DateTimePicker
|
||||||
value={new Date()}
|
value={valueFix}
|
||||||
mode={mode}
|
mode={mode}
|
||||||
display="inline"
|
display="inline"
|
||||||
onChange={(event, date) => { onChangeDate(event.type, date) }}
|
onChange={(event, date) => { onChangeDate(event.type, date) }}
|
||||||
|
|||||||
Reference in New Issue
Block a user