wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: inputdate

Browse Source 
Deskripsi:
- custom tampilan input datetime picker pada ios

No Issues
This commit is contained in:
amaliadwiy
2025-08-05 16:40:37 +08:00
parent 45d08e1df5
commit 1d555bf950
2 changed files with 45 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/inputDate.tsx
View File

@@ -1,11 +1,11 @@
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 { Platform, Pressable, View } from "react-native";
import Text from "./Text";
import ModalFloat from "./modalFloat";
type Props = {
label?: string;
@@ -58,14 +58,34 @@ export function InputDate({ label, value, placeholder, onChange, info, disable,
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
</View>
{
modal && (
<DateTimePicker
value={new Date()}
mode={mode}
display="default"
onChange={(event, date) => { onChangeDate(event.type, date) }}
onTouchCancel={() => setModal(false)}
/>
Platform.OS === 'ios' ? (
modal && (
<ModalFloat
isVisible={modal}
setVisible={setModal}
onSubmit={() => { }}
buttonHide
disableSubmit
title={mode == "date" ? "Pilih Tanggal" : mode == "time" ? "Pilih Jam" : "Pilih Tanggal & Jam"}>
<DateTimePicker
value={new Date()}
mode={mode}
display="spinner"
onChange={(event, date) => { onChangeDate(event.type, date) }}
onTouchCancel={() => setModal(false)}
/>
</ModalFloat>
)
) : (
modal && (
<DateTimePicker
value={new Date()}
mode={mode}
display="inline"
onChange={(event, date) => { onChangeDate(event.type, date) }}
onTouchCancel={() => setModal(false)}
/>
)
)
}
</>

25
components/modalFloat.tsx
View File

@@ -1,7 +1,7 @@
import Styles from '@/constants/Styles';
import { Pressable, View } from 'react-native';
import Text from './Text';
import Modal from 'react-native-modal';
import Text from './Text';
type Props = {
isVisible: boolean
@@ -10,9 +10,10 @@ type Props = {
children: React.ReactNode
onSubmit: () => void
disableSubmit?: boolean
buttonHide?: boolean
}
export default function ModalFloat({ isVisible, setVisible, title, children, onSubmit, disableSubmit }: Props) {
export default function ModalFloat({ isVisible, setVisible, title, children, onSubmit, disableSubmit, buttonHide }: Props) {
return (
<Modal
animationIn={"fadeIn"}
@@ -28,14 +29,18 @@ export default function ModalFloat({ isVisible, setVisible, title, children, onS
<View style={[Styles.mb10]}>
{children}
</View>
<View style={[Styles.rowItemsCenter, { justifyContent: 'flex-end' }]}>
<Pressable style={[Styles.ph15, Styles.pv05, Styles.round10, Styles.mr10]} onPress={() => { setVisible(false) }}>
<Text style={[Styles.textDefault]}>Batal</Text>
</Pressable>
<Pressable style={[Styles.ph15, Styles.pv05, Styles.round10]} onPress={onSubmit} disabled={disableSubmit}>
<Text style={[Styles.textDefault, disableSubmit && Styles.cGray]}>Simpan</Text>
</Pressable>
</View>
{
!buttonHide && (
<View style={[Styles.rowItemsCenter, { justifyContent: 'flex-end' }]}>
<Pressable style={[Styles.ph15, Styles.pv05, Styles.round10, Styles.mr10]} onPress={() => { setVisible(false) }}>
<Text style={[Styles.textDefault]}>Batal</Text>
</Pressable>
<Pressable style={[Styles.ph15, Styles.pv05, Styles.round10]} onPress={onSubmit} disabled={disableSubmit}>
<Text style={[Styles.textDefault, disableSubmit && Styles.cGray]}>Simpan</Text>
</Pressable>
</View>
)
}
</View>
</Modal>
)