react native WeekCalender 周日历 上一周 下一周

WeekCalender 可以上一周下一周

有网友用就简单改改发上来好了

image.png

import React, { Component, Fragment } from 'react'
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Dimensions
} from 'react-native'

import moment from 'moment'

const weekTitle = ['日', '一', '二', '三', '四', '五', '六']

class WeekCalender extends Component {

    constructor(props) {
        super(props)
        this.state = {
            date: new Date()
        }
    }

    _onPress(date) {
        this.setState({
            date
        })
    }

    lastWeek = () => {
        this.setState({
            date: new Date(this.state.date).getTime() - 7 * 24 * 60 * 60 * 1000
        })
    }

    nextWeek = () => {
        this.setState({
            date: new Date(this.state.date).getTime() + 7 * 24 * 60 * 60 * 1000
        })
    }

    render() {
        let days = [] // 存放节点
        let date = new Date(this.state.date)
        let num = 7 - date.getDay() // 今天 分割点
        for (let i = 7 - num; i > 0; i--) { // 今天以前的日期
            let nowDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - i)
            let fmtNow = moment(nowDate).format('YYYY-MM-DD');
            let node = {nowDate.getDate()}
            if (fmtNow === moment(date).format('YYYY-MM-DD')) {
                node = {nowDate.getDate()}
            }
            days.push(node)
        }
        for (let i = 0; i < num; i++) { // 今天以后的日期 含今天
            let nowDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + i)
            let fmtNow = moment(nowDate).format('YYYY-MM-DD');
            let node = {nowDate.getDate()}
            if (fmtNow === moment(date).format('YYYY-MM-DD')) {
                node = {nowDate.getDate()}
            }
            days.push(node)
        }

        return (
            
                
                    上一周
                    下一周
                
                
                    
                        {
                            weekTitle.map((item) => (
                                
                                    {item}
                                
                            ))
                        }
                    
                    
                        {days}
                    
                
            
        )
    }

}
const styles = StyleSheet.create({
    weekTitleContainer: {
        height: 27,
        flexDirection: 'row',
        justifyContent: 'space-around'
    },
    fs: {
        fontSize: 13,
    },
    curr: {
        borderRadius: 24,
        backgroundColor: '#316DE6',
        width: 24,
        height: 24,
        textAlign: 'center',
        lineHeight: 24,
    },
    st: {
        width: 24,
        height: 24,
        textAlign: 'center',
        lineHeight: 24,
    },
    space: {
        flex: 1,
        paddingTop: 10,
        paddingHorizontal: 30,
        paddingBottom: 10
    }
})

export default WeekCalender