RN日期选择器react-native-modal-datetime-picker

默认采用服务器上获取到的数据在界面显示 kWord readOnly es5的写法

if (this.props.resopnseJson != null) {
    console.log(this.props.resopnseJson.applyDate.kWord +';;;;;;')
    return (

        <DateTimeBtnCell
            title={'申请时间'}
            applyDate={this.props.resopnseJson.applyDate.kWord}
            handleDatePicked={this.handleDatePicked}
            readOnly={this.props.resopnseJson.applyDate.readOnly}
        />
    )
}

handleDatePicked(dateTime) {
    console.log( '回传日期' + dateTime);
    DeviceEventEmitter.emit('dateChange', dateTime);
}

调用DateTimeBtnCell组件

import React, {Component} from 'react';
import{
    StyleSheet,
    View,
    Text,
    Button,
    TouchableHighlight,
    Image,
    Dimensions,
    Platform,
} from 'react-native';
var {width, height}=Dimensions.get('window');
import DateTimePicker from 'react-native-modal-datetime-picker';
import moment from 'moment';
var DateTimeBtn=React.createClass({

    getDefaultProps(){
        return{
            title:'',//标题
            readOnly:'',//是否可以点击
            applyDate:'',//网络数据拉取回传Date
        }
    },
    getInitialState(){
        return{
            isDateTimePickerVisible:false,
            Date:this.props.applyDate,

        }
    },
    componentDidMount(){
        // alert('跳转进来了');
    },
    propTypes:{
        ...View.propTypes,
        handleDatePicked:React.PropTypes.func.isRequired,
    },
    render(){
        return(
            <View>
                <View style={styles.backViewStyle}>
                    <View style={{flexDirection:'row',alignItems:'center'}} >
                        <Text style={styles.titleTextStyle}>{this.props.title}</Text>
                    </View>

                    {this.renderdateTimeBtnView()}
                    {this.renderDateTimePicker()}
                </View>
            </View>

        )
    },
    renderdateTimeBtnView(){
         return(
             <TouchableHighlight
                 style={{backgroundColor:'white', height:40, width:width-24, marginLeft:12,}}
                 underlayColor='#4577e9'
                 onPress={() =>this.showDateTimePicker()}
             >
                 <View style={styles.touchBackViewStyle}>
                     <Text style={styles.btnText}>{this.state.Date}</Text>
                     <Image source={require('../../../imgs/ios/file_calendar_blue@2x.png')}
                            style={styles.dateImageStyle}
                     >
                     </Image>
                 </View>
             </TouchableHighlight>
         )
    },
    renderDateTimePicker(){
        return(
            <DateTimePicker
                titleIOS={'选择时间'}
                cancelTextIOS={'取消'}
                confirmTextIOS={'确定'}
                mode={'date'}
                isVisible={this.state.isDateTimePickerVisible}
                onConfirm={this.handleDatePicked}
                onCancel={this.hideDateTimePicker}/>
        )
    },
    showDateTimePicker(){
        console.warn(this.props.readOnly);
        //只读不显示
        if(this.props.readOnly=='true') {

        }
        else {
            console.warn('显示时间');
            this.setState({ isDateTimePickerVisible: true })
        }

    },
    hideDateTimePicker(){
        console.warn('安卓隐藏');
        this.setState({isDateTimePickerVisible: false})
    },
    handleDatePicked(date){
        this.hideDateTimePicker();
        var DateFormat =  moment(date).format("YYYY-MM-DD");
        this.setState({Date:DateFormat})
        this.props.handleDatePicked(DateFormat);
    },


});
var styles=StyleSheet.create({
    backViewStyle: {
        width: width,
        marginBottom:10,
    },
    titleTextStyle: {
        fontSize:Platform.OS=='ios'?11:13,
        color: '#97979f',
        paddingLeft: 15,
        marginBottom: 10,
    },
    touchBackViewStyle:{
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        height:40,
    },
    btnText:{
        fontSize:16,
        marginLeft:10,
        textAlign:'center',

    },
    dateImageStyle: {
        width: 25,
        height: 25,
        marginRight:10,
    },
})

module.exports=DateTimeBtn;

android上显示的效果