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
效果如下所示：