react-native-pickdate

A simple way to pick date through native date-picker and time-picker inside a modal.

usage

import pickDate from 'react-native-pickdate';

export default class App extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            curSel: '未选择'
        };
    }

    createUpdate(type){
        let formatStr;
        switch (type){
            case 'date':formatStr = 'YYYY-MM-dd';break;
            case 'time':formatStr = 'hh:mm';break;
            case 'datetime':formatStr = 'YYYY-MM-dd hh:mm';break;
        }
        let self = this;
        return (date)=>{
            console.log('date',date);
            let curSel = format(date,formatStr);
            self.setState({curSel});
        }
    }

    render() {
        let {curSel} = this.state;
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    onPress={()=>pickDate(this.createUpdate('date'))}>
                    <View style={styles.button}>
                        <Text>Pick date</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={()=>pickDate(this.createUpdate('time'),pickDate.TYPE.TIME)}>
                    <View style={styles.button}>
                        <Text>Pick time</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={()=>pickDate(this.createUpdate('datetime'),pickDate.TYPE.DATETIME)}>
                    <View style={styles.button}>
                        <Text>Pick datetime</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={()=>pickDate({
                            onConfirm:this.createUpdate('datetime'),
                            type:pickDate.TYPE.DATETIME,
                            is24Hour:false,
                            date:new Date('2000-10-10')
                        })}>
                    <View style={styles.button}>
                        <Text>Pick datetime by options</Text>
                    </View>
                </TouchableOpacity>
                <Text style={styles.text}>{curSel}</Text>
            </View>
        );
    }
}

screenshot

Install

npm install --save react-native-pickdate or yarn add react-native-pickdate.

Available options

Name	Type	Default	Description
cancelText	string	'Cancel'	The text on the cancel button on iOS
confirmText	string	'Confirm'	The text on the confirm button on iOS
titleText	string	'Pick a date'/'Pick a time'	The title text on iOS
onConfirm	func		confirm handler
onCancel	func		cancel handler
is24Hour	bool	true	If false, the picker shows an AM/PM chooser on Android
date	Date	new Date()	default show date
type	string	pickDate.TYPE.DATE	date / time /datetime

Thanks

react-native-root-siblings

react-native-modal-datetime-picker