DatePickerIOS的使用

上一篇介绍了DatePickerAndroid的使用方法，本篇介绍在ios上面使用日历的方法，做出和上篇一样的日历效果。

在ios上，要和组件Modal相结合，做出的效果和原生差不多。

Modal控件效果如下代码所示：

 <Modal
                    animationType={"fade"}
                    transparent={true}
                    visible={this.state.modalvisible}
                    onRequestClose={() =>{}}
                >
                    <View style={styles.mContainer}>
                        <View style={styles.modal}>
                            <View style={styles.modalTitle}>
                                <TouchableOpacity onPress={this.closeModal.bind(this)} style={{position:'absolute',left:20,width:40,height:15}}>
                                    <Text style={{fontSize:15,alignSelf:'center'}}>取消</Text>
                                </TouchableOpacity>
                                <Text style={{fontSize:17}}>选择开始日期</Text>
                                <TouchableOpacity style={{position:'absolute',right:20,width:40,height:15}} onPress={this.setDate.bind(this)}>
                                    <Text style={{fontSize:15,alignSelf:'center'}}>确认</Text>
                                </TouchableOpacity>
                            </View>
                            <DatePickerIOS
                                date={this.state.date}
                                onDateChange={(date)=>this.setState({date})}
                                mode='date'
                                minimumDate={this.state.minimumDate}
                                maximumDate={this.state.maximumDate}

                            />
                        </View>
                    </View>
                </Modal>

开始日期框

<TouchableHighlight style={styles.contentRow} onPress={this.selectStartTime.bind(this)}
                        underlayColor="#DEDEDE">
                        <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: 20}}>{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="#DEDEDE">
                        <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:20}}>{this.state.endTime}</Text>
                            <Image source={require('./images/icon/right.png')} style={styles.rightIcon}/>
                        </View>
                    </TouchableHighlight>

点击开始日期函数

 selectStartTime(){
        if(Platform.OS === 'ios'){
            this.setState({modalvisible:true,setflag:1, startTimeisSelected:true,startTimeObjectA:this.state.date});
            if((this.state.endTimeisSelected) && (this.state.setflag==2)){
                var item=this.state.date;
                item.setDate(item.getDate()-1);//在这里应该减去一天，相应date的值也减少一天，这一步很重要，防止结束日期设置最大值无响应
                this.setState({maximumDate:new Date(item.getFullYear(),item.getMonth(),item.getDate()),minimumDate:new Date(1900,0,1)})
            }
        }
}

点击结束日期函数

 selectEndTime(){
        if(Platform.OS === 'ios') {
            this.setState({modalvisible: true, setflag: 2, endTimeisSelected: true});
            if ((this.state.startTimeisSelected) &&(this.state.setflag==1)) {
                var item = this.state.date;
                item.setDate(item.getDate()+1);//这里应该加上一天，防止开始日期设置最小值无响应
                this.setState({minimumDate: new Date(item.getFullYear(),item.getMonth(),item.getDate())});
                this.setState({maximumDate:new Date(item.getFullYear(),item.getMonth(),item.getDate()+30)});
            }
        }
}

只用一个Modal，但是要根据开始日期和结束日期的需求设置相应的this.state.date
效果如下所示：