feature
Deskripsi: try component: Date input
This commit is contained in:
165
components/DateInput/DateTimeIOS.tsx
Normal file
165
components/DateInput/DateTimeIOS.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
// DateTimeInput.tsx
|
||||
import DateTimePicker, {
|
||||
DateTimePickerEvent,
|
||||
} from "@react-native-community/datetimepicker";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Platform,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
StyleProp,
|
||||
ViewStyle,
|
||||
} from "react-native";
|
||||
import ButtonCustom from "../Button/ButtonCustom";
|
||||
import TextCustom from "../Text/TextCustom";
|
||||
import dayjs from "dayjs";
|
||||
import TextInputCustom from "../TextInput/TextInputCustom";
|
||||
import { GStyles } from "@/styles/global-styles";
|
||||
import ButtonCenteredOnly from "../Button/ButtonCenteredOnly";
|
||||
import Spacing from "../_ShareComponent/Spacing";
|
||||
import Grid from "../Grid/GridCustom";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import ClickableCustom from "../Clickable/ClickableCustom";
|
||||
import { AccentColor, MainColor } from "@/constants/color-palet";
|
||||
|
||||
interface DateTimeInputProps {
|
||||
// Main
|
||||
value?: DateTimePickerEvent;
|
||||
mode?: "date" | "time";
|
||||
onChange: (selectedDate: DateTimePickerEvent) => void;
|
||||
// Main
|
||||
label?: string;
|
||||
required?: boolean;
|
||||
disabled?: boolean;
|
||||
iconLeft?: React.ReactNode;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
borderRadius?: number;
|
||||
externalError?: string;
|
||||
internalError?: string;
|
||||
containerStyle?: StyleProp<ViewStyle>;
|
||||
}
|
||||
|
||||
const DateTimeInput: React.FC<DateTimeInputProps> = ({
|
||||
// Main
|
||||
value,
|
||||
mode,
|
||||
onChange,
|
||||
// Main
|
||||
label,
|
||||
required,
|
||||
disabled,
|
||||
iconLeft,
|
||||
style,
|
||||
borderRadius = 8,
|
||||
externalError,
|
||||
internalError,
|
||||
containerStyle,
|
||||
}) => {
|
||||
const [show, setShow] = useState(false);
|
||||
const [selectedDate, setSelectedDate] = useState<Date | undefined>(
|
||||
value as any
|
||||
);
|
||||
|
||||
const handleConfirm = (event: any, date?: Date) => {
|
||||
if (event.type === "set" && date !== undefined) {
|
||||
setSelectedDate(date);
|
||||
onChange(date as any);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePress = () => {
|
||||
setShow(!show);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ClickableCustom
|
||||
activeOpacity={0.8}
|
||||
style={[GStyles.inputContainerArea, containerStyle]}
|
||||
onPress={handlePress}
|
||||
>
|
||||
{label && (
|
||||
<Text style={GStyles.inputLabel}>
|
||||
{label}
|
||||
{required && <Text style={GStyles.inputRequired}> *</Text>}
|
||||
</Text>
|
||||
)}
|
||||
<View
|
||||
style={[
|
||||
style,
|
||||
{ borderRadius },
|
||||
externalError || internalError ? GStyles.inputErrorBorder : null,
|
||||
GStyles.inputContainerInput,
|
||||
disabled && GStyles.disabledBox,
|
||||
]}
|
||||
>
|
||||
<View style={GStyles.inputIcon}>
|
||||
<Ionicons
|
||||
name="calendar-outline"
|
||||
size={20}
|
||||
color={MainColor.placeholder}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<TextCustom color="gray">
|
||||
{selectedDate ? (
|
||||
<TextCustom color="black">
|
||||
{dayjs(selectedDate).format("DD-MM-YYYY HH:mm")}
|
||||
</TextCustom>
|
||||
) : (
|
||||
"Pilih tanggal"
|
||||
)}
|
||||
</TextCustom>
|
||||
</View>
|
||||
{externalError ||
|
||||
(internalError && (
|
||||
<Text style={GStyles.inputErrorMessage}>
|
||||
{externalError || internalError}
|
||||
</Text>
|
||||
))}
|
||||
</ClickableCustom>
|
||||
|
||||
{show && (
|
||||
<>
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
zIndex: 15,
|
||||
backgroundColor: "white",
|
||||
borderRadius: 8,
|
||||
padding: 10,
|
||||
// top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
borderColor: "#ccc",
|
||||
borderWidth: 1,
|
||||
}}
|
||||
>
|
||||
<View style={{ alignItems: "flex-end" }}>
|
||||
<Ionicons
|
||||
name="close"
|
||||
size={20}
|
||||
color="black"
|
||||
onPress={() => setShow(false)}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<DateTimePicker
|
||||
value={selectedDate || new Date()}
|
||||
mode={"datetime"}
|
||||
display="inline"
|
||||
onChange={handleConfirm}
|
||||
minimumDate={new Date(Date.now())} // 30 days from now
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DateTimeInput;
|
||||
143
components/DateInput/DateTimePickerCustom.tsx
Normal file
143
components/DateInput/DateTimePickerCustom.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
import React, { useState } from "react";
|
||||
import { Pressable, Text, View, StyleSheet } from "react-native";
|
||||
import DateTimePicker, {
|
||||
DateTimePickerEvent,
|
||||
} from "@react-native-community/datetimepicker";
|
||||
import { GStyles } from "@/styles/global-styles";
|
||||
import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import Grid from "../Grid/GridCustom";
|
||||
import TextCustom from "../Text/TextCustom";
|
||||
|
||||
type Props = {
|
||||
dateValue?: Date;
|
||||
timeValue?: Date;
|
||||
onChangeDate: (date: Date) => void;
|
||||
onChangeTime: (time: Date) => void;
|
||||
};
|
||||
|
||||
const DateTimePickerCustom: React.FC<Props> = ({
|
||||
dateValue,
|
||||
timeValue,
|
||||
onChangeDate,
|
||||
onChangeTime,
|
||||
}) => {
|
||||
const [showDate, setShowDate] = useState(false);
|
||||
const [showTime, setShowTime] = useState(false);
|
||||
|
||||
const toggleDatePicker = () => {
|
||||
setShowDate(!showDate);
|
||||
};
|
||||
|
||||
const toggleTimePicker = () => {
|
||||
setShowTime(!showTime);
|
||||
};
|
||||
|
||||
const handleConfirmDate = (
|
||||
event: DateTimePickerEvent,
|
||||
selectedDate?: Date
|
||||
) => {
|
||||
if (event.type === "set" && selectedDate !== undefined) {
|
||||
onChangeDate(selectedDate);
|
||||
}
|
||||
setShowDate(false);
|
||||
};
|
||||
|
||||
const handleConfirmTime = (
|
||||
event: DateTimePickerEvent,
|
||||
selectedTime?: Date
|
||||
) => {
|
||||
if (event.type === "set" && selectedTime !== undefined) {
|
||||
onChangeTime(selectedTime);
|
||||
}
|
||||
setShowTime(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <Pressable onPress={toggleDatePicker} style={[GStyles.inputContainerInput, {borderRadius: 8} ]}>
|
||||
<Text style={styles.buttonText}>
|
||||
{value ? value.toLocaleDateString() : "Pilih tanggal"}
|
||||
</Text>
|
||||
</Pressable> */}
|
||||
|
||||
<View
|
||||
style={{
|
||||
paddingBlock: 6,
|
||||
paddingInline: 12,
|
||||
borderRadius: 8,
|
||||
backgroundColor: MainColor.white,
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
containerStyle={{
|
||||
borderRadius: 8,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Grid.Col span={6} style={{}}>
|
||||
<Pressable onPress={toggleDatePicker}>
|
||||
<Text style={styles.buttonText}>
|
||||
{dateValue ? dateValue.toLocaleDateString() : "Pilih tanggal"}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={1} style={{ alignItems: "center" }}>
|
||||
<TextCustom>|</TextCustom>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={5} style={{}}>
|
||||
<Pressable onPress={toggleTimePicker}>
|
||||
<Text style={styles.buttonText}>
|
||||
{timeValue ? timeValue.toLocaleTimeString("id-ID", { minute: "2-digit", hour: "2-digit" }) : "Pilih waktu"}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</View>
|
||||
|
||||
{showDate && (
|
||||
<DateTimePicker
|
||||
testID="dateTimePicker"
|
||||
value={dateValue || new Date()}
|
||||
mode="date"
|
||||
is24Hour={true}
|
||||
display="default"
|
||||
onChange={handleConfirmDate}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showTime && (
|
||||
<DateTimePicker
|
||||
testID="dateTimePicker"
|
||||
value={timeValue || new Date()}
|
||||
mode="time"
|
||||
is24Hour={true}
|
||||
display="default"
|
||||
onChange={handleConfirmTime}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 20,
|
||||
backgroundColor: "#007AFF",
|
||||
borderRadius: 8,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginVertical: 10,
|
||||
},
|
||||
buttonText: {
|
||||
color: MainColor.black,
|
||||
fontSize: TEXT_SIZE_MEDIUM,
|
||||
// fontWeight: "bold",
|
||||
},
|
||||
});
|
||||
|
||||
export default DateTimePickerCustom;
|
||||
70
components/DateInput/DateTimeTry.tsx
Normal file
70
components/DateInput/DateTimeTry.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import React, { useState } from "react";
|
||||
import { Pressable, Text, StyleSheet } from "react-native";
|
||||
import DateTimePicker, { Event } from "@react-native-community/datetimepicker";
|
||||
|
||||
type Props = {
|
||||
value?: Date;
|
||||
mode?: "date" | "time" | "datetime";
|
||||
onChange: (date: Date) => void;
|
||||
};
|
||||
|
||||
const DateTimePickerTry: React.FC<Props> = ({
|
||||
value = new Date(),
|
||||
mode = "date",
|
||||
onChange,
|
||||
}) => {
|
||||
const [show, setShow] = useState(false);
|
||||
|
||||
const toggleDatePicker = () => {
|
||||
setShow(!show);
|
||||
};
|
||||
|
||||
const handleConfirm = (event: Event, selectedDate?: Date) => {
|
||||
if (event.type === "set" && selectedDate !== undefined) {
|
||||
onChange(selectedDate);
|
||||
}
|
||||
setShow(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Pressable onPress={toggleDatePicker} style={styles.button}>
|
||||
<Text style={styles.buttonText}>
|
||||
{value ? value.toLocaleDateString() : "Pilih tanggal"}
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
{show && (
|
||||
<DateTimePicker
|
||||
// style={styles.button}
|
||||
textColor="white"
|
||||
testID="dateTimePicker"
|
||||
value={value}
|
||||
mode={mode}
|
||||
is24Hour={true}
|
||||
display="default"
|
||||
onChange={handleConfirm as any}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 20,
|
||||
backgroundColor: "white",
|
||||
borderRadius: 8,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginVertical: 10,
|
||||
},
|
||||
buttonText: {
|
||||
color: "white",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
});
|
||||
|
||||
export default DateTimePickerTry;
|
||||
Reference in New Issue
Block a user