upd: input datetime

Deskripsi:
- update tombol konfirmasi pada input date time ios
- dan konfigurasi pada android

No Issues
This commit is contained in:
2025-08-21 17:19:39 +08:00
parent 99c81f6f0d
commit a409bfef2f

View File

@@ -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) }}