用DatePickerAndroid实现的日历页面

1.做一个有开始日期和结束日期的日历选择框，要求开始日期可以随便选择日期，结束日期的选择段必须在开始日期之后的31天内；

2.如果用户先选择结束日期，选开始日期时选定的日期大于结束日期，则结束日期自动清空；

用RN自带的DatePickerAndroid实现

开始日期按钮布局

<TouchableHighlight  style={styles.contentRow} onPress={this.selectStartTime.bind(this)} underlayColor="#C0C0C0">
         <View style={{flexDirection:'row',flex:1}}>
             <Image source={require('./images/icon/start-time.png')} style={styles.timeIcon}/>
             <Text style={{fontSize:15,marginLeft:8}}>开始日期</Text>
             <Text style={{position:'absolute', right:50}}>{this.state.startTime}</Text>
             <Image source={require('./images/icon/right.png')} style={styles.rightIcon}/>
          </View>
</TouchableHighlight>

结束日期按钮布局

<TouchableHighlight  style={styles.contentRow} onPress={this.selectEndTime.bind(this)} underlayColor="#C0C0C0">
         <View style={{flexDirection:'row',flex:1}}>
              <Image source={require('./images/icon/end-time.png')} style={styles.timeIcon}/>
              <Text style={{fontSize:15,marginLeft:8}}>结束日期</Text>
              <Text style={{position:'absolute',right:50}}>{this.state.endTime}</Text>
              <Image source={require('./images/icon/right.png')} style={styles.rightIcon}/>
          </View>
</TouchableHighlight>

style样式

 contentRow:{
        flex:1,
        borderBottomWidth:1,
        borderBottomColor:'#e9e9e9',
        alignItems:'center',
        flexDirection:'row',
        
    },
 timeIcon:{
        width:25,
        height:25,
    },
    rightIcon:{
        width:20,
        height:20,
        position:'absolute',
        right:0
    },

初始化状态

constructor(props){
        super(props);
        this.state={
            startTime:'',
            endTime:'',
            startTimeObjectA:new Date(),
            startTimeObjectB:new Date(),
            endTimeObject:new Date(),
            startTimeisSelected:false,
            endTimeisSelected:false
        }

    }

点击开始日期按钮出现日历函数，可以选择1900到2100任何时间的日期

async selectStartTime(){
        try {
            const {action, year, month, day} =await DatePickerAndroid.open();
            if (action !== DatePickerAndroid.dismissedAction) {
                var date = moment({year,month,day}).format('YYYY-MM-DD');  //为了使其显示特殊格式，用了moment.js,用法详情http://momentjs.cn/
                var dd=new Date(year,month,day);
                this.setState({startTime: date,startTimeisSelected:true,startTimeObjectA:dd,startTimeObjectB:dd})
                if(this.state.endTimeisSelected){        //若用户先选择结束时间便给出相应设置
                    if(this.state.startTimeObjectA>this.state.endTimeObject){
                        this.setState({endTime:''})
                    }
                }

            }
        } catch ({code, message}) {
            console.warn('Cannot open date picker', message);
        }
    }

                  

            

点击结束日期按钮出现日历函数，若后点击只会显示开始日期后的31天内的日期，若先点击，便可选择任何日期

async selectEndTime(){
        try {
            if(!this.state.startTimeisSelected) {    //先点击结束日期
                var {action, year, month, day} =await DatePickerAndroid.open();
            }
            else{   //后点击结束日期
             
                var minD=this.state.startTimeObjectA;
                minD.setDate(minD.getDate()+1);
                var maxD=this.state.startTimeObjectB;
                maxD.setDate(maxD.getDate()+31);
                var {action, year, month, day} =await DatePickerAndroid.open({
                    minDate:new Date(minD.getFullYear(),minD.getMonth()-1,minD.getDate()),//设置最大日期和最小日期范围，坑坑坑，最小日期月份要减一
                    maxDate:new Date(maxD.getFullYear(),maxD.getMonth(),maxD.getDate())
                })
            }
            if (action !== DatePickerAndroid.dismissedAction) {
                var date = moment({year,month,day}).format('YYYY-MM-DD');
                var dd=new Date(year,month,day);
                this.setState({endTime:date,endTimeisSelected:true,endTimeObject:dd})
                minD.setDate(minD.getDate()-1);  //Date对象变量间赋值相互影响，防止不停点击结束日期，日历会依次增大，回归原来
                maxD.setDate(maxD.getDate()-31);
            }
        } catch ({code, message}) {
            console.warn('Cannot open date picker', message);
        }
    }