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(
        
            
                {/**/}
                上个月
            
            
                {this.state.year + '年' + this.state.month + '月'}
            
            
                {/**/}
                下个月
            
        
    )
}

createDayBar = () =>{
    return(
        
            {this.createLab()}
        
    )
}

createLab = () => {
    var dateArray = ['一', '二', '三', '四', '五', '六', '七']
    var array = []
    for (var i = 1; i < 8; i++) {
        array.push(
            
                
                    {dateArray[i - 1]}
                
            
        )
    }
    return array
}
creatContent = () =>{
    return(
        
    )
}
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 (
        
            
                {item}
            
        
    )
}

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 this.setState({modalVisible:false})}
    >
        
            
                
                    {this.createHeaderBar()}
                    
                    {this.createDayBar()}
                    {this.creatContent()}


                

                {/*取消按钮*/}
                this.setState({modalVisible:false})}>
                    取消
                
            
        
    
}

}

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.   this.dateChanged(date)}
            />
   

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

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