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);