62 lines
2.3 KiB
JavaScript
62 lines
2.3 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { View, TouchableOpacity } from 'react-native';
|
|
import Text from '../../components/Text';
|
|
import DateTimePicker from "react-native-modal-datetime-picker";
|
|
import Icon from 'src/components/Icon'
|
|
import { Appearance } from 'react-native-appearance';
|
|
import { t } from '../../utils/i18n'
|
|
|
|
const colorScheme = Appearance.getColorScheme();
|
|
|
|
export default class CustomDatePicker extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
isDateTimePickerVisible: false,
|
|
select_date: new Date(),
|
|
maxDate: this.props.maxDate == null && undefined,
|
|
minDate: this.props.minDate == null && undefined,
|
|
isDarkModeEnabled: colorScheme === 'dark'
|
|
};
|
|
}
|
|
|
|
showDateTimePicker = () => {
|
|
this.setState({ isDateTimePickerVisible: true });
|
|
};
|
|
|
|
hideDateTimePicker = () => {
|
|
this.setState({ isDateTimePickerVisible: false });
|
|
};
|
|
|
|
handleDatePicked = date => {
|
|
// console.log("A date has been picked: ", date);
|
|
this.hideDateTimePicker();
|
|
this.setState({select_date:date})
|
|
return this.props.handleDate(date)
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<View style={{flex:1}}>
|
|
<TouchableOpacity style={{height:48,backgroundColor:'#FFFFFF40',borderRadius:24,flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingHorizontal:10}}
|
|
onPress={this.showDateTimePicker}>
|
|
<Text style={{color:'white'}}>{this.props.titleText}</Text>
|
|
<View style={{flexDirection:'row',alignItems:'center'}}>
|
|
<Text style={{color:this.props.dateText == null || this.props.dateText == undefined ? '#FFFFFF40' : 'white'}}>{this.props.dateText == null || this.props.dateText == undefined ? t('select_date') : this.props.dateText}</Text>
|
|
<Icon name={'ic_calendar_alt'} size={16} style={{ marginLeft:7,}} color={'white'} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
<DateTimePicker
|
|
date={this.state.select_date}
|
|
isVisible={this.state.isDateTimePickerVisible}
|
|
onConfirm={this.handleDatePicked}
|
|
onCancel={this.hideDateTimePicker}
|
|
maximumDate={this.props.maxDate}
|
|
minimumDate={this.props.minDate}
|
|
isDarkModeEnabled={this.state.isDarkModeEnabled}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
}
|