react 显示当前时间_React获取最近三个月的日期组件

import React, { memo } from 'react'

import dayjs from 'dayjs'

import { classnames } from 'classnames '

import './style.module.scss'

// 找到这个日期的月份的第一天的零时零分零秒

const firstDayTimeInMonth = (timestamp = new Date().getTime()) => {

const date = new Date(timestamp)

date.setDate(1)

date.setHours(0)

date.setMinutes(0)

date.setSeconds(0)

date.setMilliseconds(0)

return date.getTime()

}

export default function Calendar() {

const now = new Date()

const months = []

months.push(firstDayTimeInMonth(now))

now.setMonth(now.getMonth() + 1)

months.push(firstDayTimeInMonth(now))

now.setMonth(now.getMonth() + 1)

months.push(firstDayTimeInMonth(now))

return (

{months.map((month) => (

))}

)

}

function Month(props) {

const { startTimeInMonth } = props

const startDate = new Date(startTimeInMonth)

const currentDay = new Date(startTimeInMonth)

let days = []

while (startDate.getMonth() === currentDay.getMonth()) {

days.push(currentDay.getTime())

currentDay.setDate(currentDay.getDate() + 1)

}

days = new Array(startDate.getDay() ? startDate.getDay() - 1 : 6)

.fill(null)

.concat(days)

const lastDate = new Date(days[days.length - 1])

days = days.concat(

new Array(lastDate.getDay() ? 7 - lastDate.getDay() : 0).fill(null)

)

const weeks = []

for (let row = 0; row < days.length / 7; row++) {

const week = days.slice(row * 7, (row + 1) * 7)

weeks.push(week)

}

return (

{dayjs(startDate).format('YYYY年MM月')}

周一周二周三周四周五周六周日

{weeks.map((week) => (

))}

)

}

const Week = memo(function Week({ week }) {

return (

{week.map((day, index) => (

))}

)

}, [])

const Day = memo(function Day({ day }) {

const today = new Date()

today.setHours(0)

today.setMinutes(0)

today.setSeconds(0)

today.setMilliseconds(0)

const stringDay = day ? new Date(day).getDate() : ''

return (

className={classnames('calendar-day', {

day === today.getTime() : 'calendar-day--today',

day < today.getTime() : 'calendar-day--pass',

})}

>

{stringDay}

)

}, [])