102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Platform, View, Modal, Text, StyleSheet } from 'react-native';
|
|
import DateTimePicker from '@react-native-community/datetimepicker';
|
|
import { useColors } from './colors';
|
|
import { format } from 'date-fns';
|
|
import { ThemeButton } from './ThemeTypes';
|
|
|
|
|
|
type DatePickerTypes = {
|
|
date?: Date,
|
|
setDate?: (date: Date) => void,
|
|
}
|
|
const DatePicker = ({ date, setDate }: DatePickerTypes) => {
|
|
const colors = useColors();
|
|
const [tempDate, setTempDate] = useState(date);
|
|
const [showDatePicker, setShowDatePicker] = useState(false);
|
|
|
|
const handleCancel = () => {
|
|
setShowDatePicker(false);
|
|
};
|
|
|
|
const renderWebContent = () => (
|
|
<>
|
|
<Modal
|
|
visible={showDatePicker}
|
|
animationType="slide"
|
|
transparent={true}
|
|
onRequestClose={handleCancel}
|
|
>
|
|
<View style={styles.modalOverlay}>
|
|
<View style={[styles.modalContent, { backgroundColor: colors.backSecondary }]}>
|
|
<input
|
|
type="date"
|
|
value={format(date, 'yyyy-MM-dd')}
|
|
onChange={(e) => setTempDate(new Date(e.target.value))}
|
|
style={styles.dateInput}
|
|
/>
|
|
<View style={styles.buttonContainer}>
|
|
<ThemeButton onPress={handleCancel} color={colors.primary} ><Text>Abbrechen</Text></ThemeButton>
|
|
<ThemeButton onPress={() => setTempDate(new Date())} color={colors.primary} ><Text>Heute</Text></ThemeButton>
|
|
<ThemeButton onPress={() => {setShowDatePicker(false);setDate(tempDate);}} color={colors.primary} ><Text>Speichern</Text></ThemeButton>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
</>
|
|
);
|
|
|
|
const renderMobileContent = () => (
|
|
showDatePicker && <DateTimePicker style={{ backgroundColor: 'black' }}
|
|
value={tempDate}
|
|
mode="date"
|
|
is24Hour={true}
|
|
onChange={(event, selectedDate) => {
|
|
if (event.type == 'set') {
|
|
setShowDatePicker(false)
|
|
setTempDate(selectedDate);
|
|
setDate(selectedDate);
|
|
} else {
|
|
handleCancel();
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<ThemeButton onPress={() => {setTempDate(date);setShowDatePicker(true)}} ><Text>{format(date, 'dd.MM.yyyy')}</Text></ThemeButton>
|
|
{Platform.OS === 'web' ? renderWebContent() : renderMobileContent()}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DatePicker;
|
|
|
|
const styles = StyleSheet.create({
|
|
modalOverlay: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
},
|
|
modalContent: {
|
|
width: 300,
|
|
padding: 20,
|
|
borderRadius: 10,
|
|
},
|
|
dateInput: {
|
|
width: '100%',
|
|
padding: 10,
|
|
fontSize: 16,
|
|
marginVertical: 20,
|
|
borderColor: '#ccc',
|
|
borderWidth: 1,
|
|
borderRadius: 5,
|
|
},
|
|
buttonContainer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
},
|
|
});
|