RFDatePicker.js
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { TextInput, Text, View, Button } from 'react-native';
import styles from './styles';
import { connect } from 'react-redux';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import { UpdateStartDate} from '../../src/action/success';
import ButtonIconText from './../ButtonIconText';
import {format} from 'date-fns';
const wait = () => new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 3000);
});
class RFDatePicker extends Component {
constructor(props) {
super(props);
this.state = {
isDatePickerVisible: false
}
}
showDatePicker = () => {
this.setState({ isDatePickerVisible: true });
};
hideDatePicker = () => {
this.setState({ isDatePickerVisible: false });
};
handleConfirm = async (date) => {
this.props.UpdateStartDate(format(new Date(date),"yyyy-MM-dd"));
// alert(format(new Date(date),"yyyy-MM-dd"));
await wait();
this.hideDatePicker();
};
render() {
return (
<View style={{ flex: 1, width: "100%" }}>
<View style={{ flexDirection: "row" }}>
<View style={{ width: "20%", alignItems: "center", justifyContent: "center" }}>
<Text style={{ fontSize: 15 }}>{this.props.title}</Text>
</View>
<TextInput
onBlur={this.props.input.onBlur}
onChangeText={this.props.input.onChange}
onFocus={this.props.input.onFocus}
editable={!this.props.disabled}
selectTextOnFocus={!this.props.disabled}
value={this.props.successReducer.start_date}
placeholder={this.props.placeholder}
style={[
styles.rootInput,
{
width: "65%",
color: this.props.disabled ? 'gray' : 'black',
borderColor: !this.props.meta.valid && this.props.meta.touched ? 'red' : 'gray'
},
]}
/>
{!this.props.meta.valid && this.props.meta.touched && <Text style={styles.rootError}>{this.props.meta.error}</Text>}
<ButtonIconText paddingTop={5} h_size={30} size={30} title="" style={{ color: "#000", fontSize: 12 }} source={require('./../../assets/icon/add_calendar.png')} onPress={this.showDatePicker}></ButtonIconText>
<DateTimePickerModal
isVisible={this.state.isDatePickerVisible}
mode="date"
onConfirm={this.handleConfirm}
onCancel={this.hideDatePicker}
style={{ zIndex: 200 }}
/>
</View>
</View>
);
}
}
RFDatePicker.propTypes = {
input: PropTypes.shape({
onBlur: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
onFocus: PropTypes.func.isRequired,
value: PropTypes.string.isRequired,
}).isRequired,
meta: PropTypes.shape({
error: PropTypes.string,
touched: PropTypes.bool.isRequired,
valid: PropTypes.bool.isRequired,
}).isRequired,
disabled: PropTypes.bool,
}
RFBeginDatePicker.defaultProps = {
disabled: false,
};
const mapStateToProp = (state) => {
return {
successReducer: state.successReducer,
}
}
const mapDispatchToProp = {
UpdateStartDate
};
export default connect(mapStateToProp, mapDispatchToProp)(RFDatePicker);