react-native-datepicker

1. react-native时间控件

使用react-native-datepicker

npm install react-native-datepicker –save

<DatePicker

                    mode='datetime'  //使用类型 date datetime time

                    date={this.state.pickDate}  赋值

                    format='YYYY-MM-DD HH:mm:ss' //格式化

                    showIcon={false} //是否显示图标

                    iconSource={require('./google_calendar.png')} //图标路径

                    onDateChange={(date)=>this.showDate(date)}/> //change哈数

                <DatePicker

                    date={this.state.pick1Date}

                    format='YYYY-MM-DD'

                    showIcon={false}

                    confirmBtnText="确认"

                    cancelBtnText="取消"

                    onDateChange={(date)=>this.showDate1(date)}/>

 

import React, {Component} from 'react';

import {

    AppRegistry,

    StyleSheet,

    Text,

    View,

    PanResponder

} from 'react-native';

import DatePicker from 'react-native-datepicker';

 

export default class datepicker extends Component {

 

    constructor(props) {

        super(props);

 

        this.state = {

            date: '',

            time: '20:00',

            datetime: '2016-05-05 20:00',

            datetime1: '2016-05-05 20:00'

        };

    }

 

    componentWillMount() {

        this._panResponder = PanResponder.create({

            onStartShouldSetPanResponder: (e) => {console.log('onStartShouldSetPanResponder'); return true;},

            onMoveShouldSetPanResponder: (e) => {console.log('onMoveShouldSetPanResponder'); return true;},

            onPanResponderGrant: (e) => console.log('onPanResponderGrant'),

            onPanResponderMove: (e) => console.log('onPanResponderMove'),

            onPanResponderRelease: (e) => console.log('onPanResponderRelease'),

            onPanResponderTerminate: (e) => console.log('onPanResponderTerminate')

        });

    }

 

    render() {

        return (

            <View style={styles.container}>

                <Text style={styles.welcome}>

                    Welcome to react-native-datepicker example!

                </Text>

                <DatePicker

                    style={{width: 200}}

                    date={this.state.date}

                    mode="date"

                    placeholder="placeholder"

                    format="YYYY-MM-DD"

                    minDate="2016-05-01"

                    maxDate="2016-06-01"

                    confirmBtnText="Confirm"

                    cancelBtnText="Cancel"

                    iconSource={require('./google_calendar.png')}

                    onDateChange={(date) => {this.setState({date: date});}}

                />

                <Text style={styles.instructions}>date: {this.state.date}</Text>

                <DatePicker

                    style={{width: 200}}

                    date={this.state.time}

                    mode="time"

                    format="HH:mm"

                    confirmBtnText="Confirm"

                    cancelBtnText="Cancel"

                    minuteInterval={10}

                    onDateChange={(time) => {this.setState({time: time});}}

                />

                <Text style={styles.instructions}>time: {this.state.time}</Text>

                <DatePicker

                    style={{width: 200}}

                    date={this.state.datetime}

                    mode="datetime"

                    format="YYYY-MM-DD HH:mm"

                    confirmBtnText="Confirm"

                    cancelBtnText="Cancel"

                    showIcon={false}

                    onDateChange={(datetime) => {this.setState({datetime: datetime});}}

                />

                <Text style={styles.instructions}>datetime: {this.state.datetime}</Text>

                <DatePicker

                    style={{width: 200}}

                    date={this.state.datetime1}

                    mode="datetime"

                    format="YYYY-MM-DD HH:mm"

                    confirmBtnText="Confirm"

                    cancelBtnText="Cancel"

                    customStyles={{

                        dateIcon: {

                            position: 'absolute',

                            left: 0,

                            top: 4,

                            marginLeft: 0

                        },

                        dateInput: {

                            marginLeft: 36

                        }

                    }}

                    minuteInterval={10}

                    onDateChange={(datetime) => {this.setState({datetime1: datetime});}}

                />

                <Text style={styles.instructions}>datetime: {this.state.datetime1}</Text>

            </View>

        );

    }

}

 

const styles = StyleSheet.create({

    container: {

        flex: 1,

        justifyContent: 'center',

        alignItems: 'center',

        backgroundColor: '#F5FCFF'

    },

    welcome: {

        fontSize: 20,

        textAlign: 'center',

        margin: 10

    },

    instructions: {

        textAlign: 'center',

        color: '#333333',

        marginBottom: 5

    }

});