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 (
            <View style={{ paddingHorizontal: width * 0.05, backgroundColor: this.props.bgColor ? this.props.bgColor : "#ff5754", paddingBottom: 10 }}>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingBottom: 12 }}>
                    <TouchableOpacity onPress={this.left} style={styles.leftIcon}>
                        <Text style={{ color: this.props.dayColor ? this.props.dayColor : "#fff", fontSize: 16 }}>上一月 </Text>
                    </TouchableOpacity>
                    <View style={{ width: width * 0.4, height: 34, alignItems: 'center', justifyContent: 'center' }}>
                        <Text style={{ fontSize: 16, color: this.props.dayColor ? this.props.dayColor : "#fff" }}>{this.state.myMonth}</Text>
                    </View>
                    <TouchableOpacity onPress={this.right} style={styles.leftIcon}>
                        <Text style={{ color: this.props.dayColor ? this.props.dayColor : "#fff", fontSize: 16 }}>下一月</Text>
                    </TouchableOpacity>
                </View>
                <View style={{ flexDirection: 'row', paddingBottom: 10 }}>
                    <Text style={[styles.line, { color: this.props.headTextColor }]}>一</Text>
                    <Text style={[styles.line, { color: this.props.headTextColor }]}>二</Text>
                    <Text style={[styles.line, { color: this.props.headTextColor }]}>三</Text>
                    <Text style={[styles.line, { color: this.props.headTextColor }]}>四</Text>
                    <Text style={[styles.line, { color: this.props.headTextColor }]}>五</Text>
                    <Text style={[styles.line, { color: this.props.headTextColor }]}>六</Text>
                    <Text style={[styles.line, { color: this.props.headTextColor }]}>日</Text>
                </View>
                <View style={{ color: this.props.bgColor, width: width }}>
                    <ListView dataSource={this.state.dataSource}
                        pageSize={7}
                        contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap', width: width }}
                        renderRow={(rowData, sectionId, rowId) =>
                            <View style={styles.row}>
                                {
                                    rowData.isSelected ?
                                        <TouchableOpacity
                                            onPress={() => this.myClickDate(rowId)}
                                            style={[styles.littleRow, { backgroundColor: this.props.activeBgColor }]}>
                                            <Text style={{ color: this.props.activeTextColor }}>{rowData.id}</Text>
                                        </TouchableOpacity>
                                        :
                                        <TouchableOpacity
                                            onPress={() => this.myClickDate(rowId)}
                                            style={[styles.littleRow]}>
                                            <Text style={{ color: this.props.textColor }}>{rowData.id}</Text>
                                        </TouchableOpacity>
                                }
                            </View>
                        }
                    />
                </View>
            </View>
        )
    }
    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