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

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

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

        
    )
}

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(
            
                
                    
                        {this.props.title}
                    

                    {this.renderdateTimeBtnView()}
                    {this.renderDateTimePicker()}
                
            

        )
    },
    renderdateTimeBtnView(){
         return(
             this.showDateTimePicker()}
             >
                 
                     {this.state.Date}
                     
                     
                 
             
         )
    },
    renderDateTimePicker(){
        return(
            
        )
    },
    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上显示的效果

RN日期选择器react-native-modal-datetime-picker_第1张图片

你可能感兴趣的:(react-native)