React-native 日历控件即拿即用

日历控件。先上图吧

image.png

======================js文件==========================

import React from 'react';

import {
View,
StyleSheet,
Text,
Modal,
TouchableOpacity,
Dimensions,
Image,
FlatList,
} from 'react-native'
import LogUtil from "../../support/utils/LogUtil";
const {width,height} =Dimensions.get('window')
// import DatePicker from 'rt-datepicker';
import moment from 'moment';

var toYear = (moment(new Date()).format('YYYY'))
var toMonth = (moment(new Date()).format('MM'))

export default class RNCalendar_CL extends React.Component {

constructor(props){
    super(props)
    this.state = {
        modalVisible:false,
        selectedDate:'',
        dayData: [],
        month: toMonth,
        year: toYear,
        color:[],
    }
}

showModal(){
    LogUtil.log('calender:'+this.props.defaultDate);
    this.setState({modalVisible:true})
}

cancelModal(){
    this.setState({modalVisible:false})
}

dateChanged(date){
    this.setState({modalVisible:false});
    this.props.dateChanged(date);
}

// ==============================日历相关======================================

componentDidMount() {
    var dayCount = this.getDaysOfMonth(toYear, toMonth)
    var dayIn = this.getFirstDay(toYear, toMonth)
    var temp = []
    var color = []
    for (var i = 1; i < dayIn; i++) {
        temp.push(' ')
        color.push(0)
    }
    for (var i = 1; i <= dayCount; i++) {
        temp.push(i)
        color.push(0)
    }
    this.setState({
        dayData: temp,
        color:color,
    })

}



createHeaderBar = () =>{
    return(
        <View style={{
            height: 50,
            width: width,
            backgroundColor: '#FFFFFF',
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center'
        }}>
            <TouchableOpacity
                activeOpacity={1}
                style={{marginLeft: 10}}
                onPress={this.clickPrevious}>
                {/*<Image*/}
                {/*style={{*/}
                {/*height: 30,*/}
                {/*width: 30*/}
                {/*}}*/}
                {/*source={require('../../../resource/images/waitTransferOwner/add.png')}*/}
                {/*resizeMode={'contain'}/>*/}
                <Text style={{fontSize:14,
                    color:'#9EA3AD',
                }}>上个月</Text>
            </TouchableOpacity>
            <Text style={{
                fontSize: 16,
                color:'#243047'
            }}>
                {this.state.year + '年' + this.state.month + '月'}
            </Text>
            <TouchableOpacity
                activeOpacity={1}
                style={{marginRight: 10}}
                onPress={this.clickNext}>
                {/*<Image*/}
                {/*style={{*/}
                {/*height: 30,*/}
                {/*width: 30*/}
                {/*}}*/}
                {/*source={require('../../../resource/images/waitTransferOwner/add.png')}*/}
                {/*resizeMode={'contain'}/>*/}
                <Text style={{fontSize:14,
                    color:'#9EA3AD',
                }}>下个月</Text>
            </TouchableOpacity>
        </View>
    )
}

createDayBar = () =>{
    return(
        <View style={{
            height: 40,
            width: width,
            alignItems: 'center',
            flexDirection: 'row',
        }}>
            {this.createLab()}
        </View>
    )
}

createLab = () => {
    var dateArray = ['一', '二', '三', '四', '五', '六', '七']
    var array = []
    for (var i = 1; i < 8; i++) {
        array.push(
            <View
                key={I}
                style={{
                    width: width / 7,
                    height: 40,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: '#FFFFFF'
                }}>
                <Text style={{
                    color: '#243047',
                    fontSize: 16
                }}>
                    {dateArray[i - 1]}
                </Text>
            </View>
        )
    }
    return array
}
creatContent = () =>{
    return(
        <FlatList
            data={this.state.dayData}
            numColumns={7}
            horizontal={false}
            extraData={this.state}
            renderItem={this.renderItem}
            keyExtractor={this.keyExtractor}/>
    )
}
clickItem = (item, index) => {
    if (item == ' ') {
        return
    }
    var temp = this.state.color
    if (temp[index] == 1) {
        temp[index] = 0
    }
    else if (temp[index] == 0) {
        temp[index] = 1
    }
    this.setState({
        selectedDate:(toYear+'-'+toMonth+'-'+item),
        color:temp
    },()=>{
        LogUtil.log('我选择的日期是'+this.state.selectedDate);
        this.dateChanged(this.state.selectedDate)
    })

}



renderItem = ({item,index}) => {
    return (
        <TouchableOpacity
            activeOpacity={1}
            onPress={this.clickItem.bind(this, item, index)}>
            <View
                style={{
                    width: width / 7,
                    height: 40,
                    justifyContent: 'center',
                    alignItems: 'center',
                    borderRadius: 5,  //圆角5
                    borderWidth: 1,
                    borderColor:'white',
                    backgroundColor:(toYear+'-'+toMonth+'-'+item)===this.state.selectedDate ? '#3576F0' : 'white',

                }}>
                <Text
                    style={{color: (toYear+'-'+toMonth+'-'+item)===this.state.selectedDate ? 'white' : '#243047'}}>{item}</Text>
            </View>
        </TouchableOpacity>
    )
}

keyExtractor = (item, index) => 'Zdate' + index

getDaysOfMonth = (year, month) => {
    var day = new Date(year, month, 0)
    var dayCount = day.getDate()
    return dayCount
}

getFirstDay = (year, month) => {
    var day = new Date(year, month - 1)
    var dayCount = day.getDay()
    if (dayCount == 0) {
        dayCount = 7
    }
    return dayCount
}
clickNext = () => {
    toMonth++
    if (toMonth > 12) {
        toMonth = 1
        toYear++
    }
    this.setState({
        month: toMonth,
        year: toYear
    })

    var dayCount = this.getDaysOfMonth(toYear, toMonth)
    var dayIn = this.getFirstDay(toYear, toMonth)
    var temp = []
    var color = []
    for (var i = 1; i < dayIn; i++) {
        temp.push(' ')
        color.push(0)
    }
    for (var i = 1; i <= dayCount; i++) {
        temp.push(i)
        color.push(0)
    }
    this.setState({
        dayData: temp,
        color:color,
    })
}

clickPrevious = () => {
    toMonth--
    if (toMonth < 1) {
        toMonth = 12
        toYear--
    }
    this.setState({
        month: toMonth,
        year: toYear
    })
    var dayCount = this.getDaysOfMonth(toYear, toMonth)
    var dayIn = this.getFirstDay(toYear, toMonth)
    var temp = []
    for (var i = 1; i < dayIn; i++) {
        temp.push(' ')
    }
    for (var i = 1; i <= dayCount; i++) {
        temp.push(i)
    }
    this.setState({
        dayData: temp
    })
}

// ==============================日历相关======================================

render(){
    return <Modal animationType="fade"  //slide
                                visible={this.state.modalVisible}
                                transparent={true}
                                onRequestClose={()=>this.setState({modalVisible:false})}
    >
        <View style={styles.modalStyle}>
            <View style={styles.subView}>
                <View style={styles.canlendarStyle}>
                    {this.createHeaderBar()}
                    <View style={{
                        width: '100%',
                        height: 0.5,
                        alignSelf: 'center',
                        borderBottomWidth: 1,
                        borderBottomColor: '#dddddd',
                    }}/>
                    {this.createDayBar()}
                    {this.creatContent()}


                </View>

                {/*取消按钮*/}
                <TouchableOpacity
                    style={[styles.actionItem,this.props.itemStyle,{borderTopWidth:0,height:50,marginBottom:-5}]}
                    onPress={()=>this.setState({modalVisible:false})}>
                    <Text style={styles.actionItemTitle}>取消</Text>
                </TouchableOpacity>
            </View>
        </View>
    </Modal>
}

}

const styles = StyleSheet.create({
modalStyle:{
justifyContent:'flex-end',
alignItems:'center',
flex:1,
backgroundColor:'rgba(0,0,0,0.2)'
},
subView:{
justifyContent:'flex-end',
flexDirection: 'column',
alignItems:'center',
alignSelf:'stretch',
width:width,
backgroundColor:'#fff'

},
canlendarStyle:{
    width:width,
    height:320,
    alignItems:'center',
    justifyContent:'center',
    borderTopColor:'#cccccc',
    borderTopWidth:0.5,
    backgroundColor: 'white',
},
actionItemTitle:{
    fontSize:18,
    color:'blue',
    textAlign:'center',
},

})

======================js文件==========================
用的时候 都在同一个界面

1. import RNCalendar_CL from "../../RNCalendar_CL";

2.  <RNCalendar_CL
                ref="RNCalendar_CL"
                dateChanged={(date) => this.dateChanged(date)}
            />
   

3. 写一个按钮 呼出日历 ：
   this.refs.RNCalendar_CL.showModal();

4.当点击确定的时候：
//从日历选择日期结果回调
dateChanged = (date) => {
};
嗯 就酱