64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
|
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
|
||
|
|
import DateTimePicker from '@react-native-community/datetimepicker';
|
||
|
|
|
||
|
|
export function CalendarDateRangePicker() {
|
||
|
|
const [dateRange, setDateRange] = useState({ startDate: new Date(), endDate: new Date() });
|
||
|
|
const [showStartPicker, setShowStartPicker] = useState(false);
|
||
|
|
const [showEndPicker, setShowEndPicker] = useState(false);
|
||
|
|
|
||
|
|
const onChangeStart = (event, selectedDate) => {
|
||
|
|
setShowStartPicker(false);
|
||
|
|
if (selectedDate) {
|
||
|
|
setDateRange(prev => ({ ...prev, startDate: selectedDate }));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const onChangeEnd = (event, selectedDate) => {
|
||
|
|
setShowEndPicker(false);
|
||
|
|
if (selectedDate) {
|
||
|
|
setDateRange(prev => ({ ...prev, endDate: selectedDate }));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
<TouchableOpacity onPress={() => setShowStartPicker(true)} style={styles.button}>
|
||
|
|
<Text>Start: {dateRange.startDate.toLocaleDateString()}</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<TouchableOpacity onPress={() => setShowEndPicker(true)} style={styles.button}>
|
||
|
|
<Text>End: {dateRange.endDate.toLocaleDateString()}</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
{showStartPicker && (
|
||
|
|
<DateTimePicker
|
||
|
|
value={dateRange.startDate}
|
||
|
|
mode="date"
|
||
|
|
display="default"
|
||
|
|
onChange={onChangeStart}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{showEndPicker && (
|
||
|
|
<DateTimePicker
|
||
|
|
value={dateRange.endDate}
|
||
|
|
mode="date"
|
||
|
|
display="default"
|
||
|
|
onChange={onChangeEnd}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
marginVertical: 10,
|
||
|
|
},
|
||
|
|
button: {
|
||
|
|
padding: 10,
|
||
|
|
backgroundColor: '#f0f0f0',
|
||
|
|
borderRadius: 5,
|
||
|
|
},
|
||
|
|
});
|