react-native 自定义简单日历组件

react-native 自定义简单日历组件

先yarn add moment 只依赖这个日期处理插件

import { Component } from "react";

/**
 * 日历组件
 */
var React = require('react');
var ReactNative = require('react-native');

var {
    StyleSheet,
    View,
    Text,
    ListView,
    TouchableOpacity,
    Dimensions
} = ReactNative;

import moment from 'moment';
import lodash from 'lodash';
import PropTypes from 'prop-types';


const width = Dimensions.get('window').width
const height = Dimensions.get('window').height

class DateInfo extends Component {
    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        this.state = {
            dataSource: ds.cloneWithRows(['row 1', 'row 2']),
            tmpDataSources: [],
            myMonth: moment(new Date()).format('YYYY年MM月'),
        }
    }
    render() {
        return (
            
                
                    
                        上一月 
                    
                    
                        {this.state.myMonth}
                    
                    
                        下一月
                    
                
                
                    一
                    二
                    三
                    四
                    五
                    六
                    日
                
                
                    
                            
                                {
                                    rowData.isSelected ?
                                         this.myClickDate(rowId)}
                                            style={[styles.littleRow, { backgroundColor: this.props.activeBgColor }]}>
                                            {rowData.id}
                                        
                                        :
                                         this.myClickDate(rowId)}
                                            style={[styles.littleRow]}>
                                            {rowData.id}
                                        
                                }
                            
                        }
                    />
                
            
        )
    }
    componentDidMount() {
        this.monthDay(moment(new Date()).format('YYYY-MM-DD'))
    }
    monthDay = (date) => {
        var daysArr = [];
        var currentWeekday = moment(date).date(1).weekday(); // 获取当月1日为星期几
        var currentMonthDays = moment(date).daysInMonth(); // 获取当月天数
        if (currentWeekday == 0) { //如果是0的话就是周日
            currentWeekday = 7;
        }
        for (var i = 1; i < currentWeekday; i++) {
            daysArr.push({ id: '' })
        }
        var YYMM = moment(date, 'YYYY-MM-DD').format('YYYYMM')
        var nowDate = moment(new Date()).format('YYYYMMDD');
        for (var i = 1; i <= currentMonthDays; i++) {
            var myDate = moment(YYMM + i, 'YYYYMMD').format('YYYYMMDD')
            console.log(moment(nowDate).diff(myDate, 'days') == 0, moment(new Date).date())
            if (moment(new Date).date() === moment(myDate, 'YYYYMMDD').date()) { // 当天
                // 选中当日 暂时写false
                daysArr.push({ id: i, isSelected: false })
            } else {
                daysArr.push({ id: i })
            }
        }
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(daysArr),
            tmpDataSources: daysArr
        })
        console.log(daysArr)
    }
    left = () => {
        this.setState({
            myMonth: moment(this.state.myMonth, 'YYYY年MM月').subtract('month', 1).format('YYYY年MM月')
        })
        this.monthDay(moment(this.state.myMonth, 'YYYY年MM月').subtract('month', 1).format('YYYY-MM-DD'))
    }
    right = () => {
        this.setState({
            myMonth: moment(this.state.myMonth, 'YYYY年MM月').add('month', 1).format('YYYY年MM月')
        })
        this.monthDay(moment(this.state.myMonth, 'YYYY年MM月').add('month', 1).format('YYYY-MM-DD'))
    }
    myClickDate = (index) => {
        let { tmpDataSources } = this.state;
        tmpDataSources.forEach((item) => {
            item.isSelected = false;
        })
        tmpDataSources[index].isSelected = true;
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(lodash.cloneDeep(tmpDataSources)),
            tmpDataSources
        })
        console.log(tmpDataSources, moment(new Date()).day())

        this.props.callback(tmpDataSources[index]);


    }

}
const styles = StyleSheet.create({
    line: {
        flex: 1,
        textAlign: 'center',
        color: '#ff8c87'
    },
    row: {
        width: width * 0.9 / 7,
        height: width * 0.9 / 7,
        alignItems: 'center',
        justifyContent: 'center',
    },
    littleRow: {
        width: width * 0.1,
        height: width * 0.1,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: width * 0.2,

    },
    leftIcon: {
        height: 34,
        width: width * 0.3,
        alignItems: 'center', justifyContent: 'center',
    }
})
DateInfo.defaultProps = {
    bgColor: '#478bfd',
    headTextColor: '#fff',
    textColor: '#fff',
    activeBgColor: '#fff',
    activeTextColor: '#478bfd'
}
DateInfo.PropTypes = {
    bgColor: PropTypes.string.isRequired,
    headTextColor: PropTypes.string.isRequired,
    textColor: PropTypes.string.isRequired,
    activeBgColor: PropTypes.string.isRequired,
    callback: PropTypes.func.isRequired
}

export default DateInfo