Dingdong_app/components/Datepicker.js

import React from "react";
import PropTypes from "prop-types";
import {
    StyleSheet,
    TouchableOpacity,
    LayoutAnimation,
    Platform,
    UIManager,
    View,
} from "react-native";
import {
    CheckBox,
    Layout,
    Modal,
    Button,
    Card,
    Text,
    MenuItem,
    Icon,
    SelectItem,
} from "@ui-kitten/components";
import { Datepicker, BottomModal } from "beeshell";
import moment from "moment";
import * as TimeUtil from "../Utils/TimeUtil";

const ForwardIcon = props => <Icon {...props} name='arrow-ios-forward' />;

export default function MyDatepicker(props) {
    const { value, chooseDate } = props || {};

    const [dateValue, chooseValue] = React.useState();

    const [bottomModal, setBottomModal] = React.useState();

    return (
        <>
            <SelectItem
                appearance='form'
                style={{ flex: 1, height: 32 }}
                accessoryRight={ForwardIcon}
                title={value || " "}
                onPress={() => {
                    bottomModal.open();
                }}
            />
            <BottomModal
                title=''
                cancelable={true}
                ref={c => setBottomModal(c)}
                rightCallback={() => {
                    chooseDate(dateValue);
                }}
            >
                <View
                    style={{
                        height: 200,
                        marginBottom: 50,
                        minHeight: 200,
                    }}
                >
                    <Datepicker
                        proportion={[1, 1, 1]}
                        startYear={TimeUtil.getNowYear()}
                        numberOfYears={10}
                        date={TimeUtil.getDateStr()}
                        onChange={date => {
                            chooseValue(date);
                        }}
                    />
                </View>
            </BottomModal>
        </>
    );
}