自己写一个含有周、月、年模式的日历组件

最新推荐文章于 2022-11-17 22:46:30 发布

灯光下的投影

最新推荐文章于 2022-11-17 22:46:30 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Ant Design Pro的一些坑文章标签： javascript css html reactjs

本文链接：https://blog.csdn.net/liuyuhua666/article/details/111933495

本文讲述了因项目需求，作者在antd日历组件无法满足周模式显示的情况下，决定自己编写一个包含周、月、年模式的日历组件。通过创建`Calendar.js`文件并编写对应的样式`calendar.css`，实现了用户所需的功能，并进行了测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写这样一个组件的初衷

项目用的是antd的组件，一开始用antd上面的日历组件本来没什么问题，感觉挺好用的，可是某一天需求人员说要求日历只展示一周或半个月，然后我就懵逼了，antd上面的日历组件根本就没有周模式的，只有月和年模式，再说，感觉根本没必要啊，但是用户强烈要求有这个功能，没办法，只能自己写一个了。

废话不多说，直接上代码：

首先创建Calendar.js文件

import React from 'react';
import {
   
   Select, Col, Row, Radio} from 'antd';
/**
*Calendar 日历组件
*@param currentDate {Date} 展示日历，默认当天
*@param onChange {function(date: Date)} 日期变化的回调
*@param dateCellRender{function(date: Date): ReactNode} 自定义渲染日期单元格，返回内容会被追加到单元格
*/
const {
   
    Option } = Select;
const {
   
    Group, Button } = Radio;

//周名称
const WEEK_NAMES = ['一', '二', '三', '四', '五', '六', '日'];
//月份
const MONTH_NAMES = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
// 日历行数
let LINES = [1, 2, 3, 4, 5, 6];

export default class Calendar extends React.Component {
   
   
	state = {
   
   
		year: 0,
		month: 0,
		day: 0.
		mode: 'month', // 模式：周、月、年
		yearRange: [] // 年份范围
	}
	// 更新日期
	componentWillMount(){
   
   
		this.setCurrentYearMonth(this.props.currentDate);
	}
	componentDidUpdate(prevProps){
   
   
		let prevDate = prevProps.currentDate;
		let prevDay = Calendar.getDate(prevDate);
		let prevMonth = Calendar.getMonth(prevDate);
		let prevYear = Calendar.getFullYear(prevDate);
		let currentDate = this.props.currentDate;
		let currentDay = Calendar.getDate(currentDate);
		let currentMonth = Calendar.getMonth(currentDate);
		let currentYear = Calendar.getFullYear(currentDate);
		// 如果日期发生了变化就更新日期
		if (prevDay !== currentDay || prevMonth !== currentMonth || prevYear !== currentYear) {
   
   
			this.setCurrentYearMonth(currentDate);
		}
	}
	//  设置当前组件的年月
	setCurrentYearMonth(date){
   
   
		let day = Calendar.getDate(date);
		let month = Calendar.getMonth(date);
		let year = Calendar.getFullYear(date);
		let yearRange = Calendar.getYearRange(year);
		Calendar.lineNumbers(year, month, day, this.state.mode);
		this.setState({
   
   
			day,
			month,
			year,
			yearRange
		})
	}
	// 获取当前日
	static getDate(date) {
   
   
		return date.getDate();
	}
	// 获取当前月份
	static getMonth(date) {
   
   
		return date.getMonth();
	}
	// 获取当前年份
	static getFullYear(date) {
   
   
		return date.getFullYear();
	}
	// 获取年份范围 以当前年份前后推10年
	static getYearRange(year) {
   
   
		let yearRange = [];
		let startYear = year - 10;
		let endYear = year + 10;
		for(let i = startYear; i <= endYear; i++) {
   
   
			yearRange.push(i);
		}
		return yearRange;
	}

	// 根据年份和月份获取对应月份的总天数
	static getCurrentMonthDays(year, month) {
   
   
		const curMonthDays = new Date(year, month + 1, 0).getDate();
		return curMonthDays;
	}

	// 这里获得每个月的第一天是周几
	static getWeeksByFirstDay(year, month) {
   
   
		let date = Calendar.getDateByYearMonth(year, month);
		return date.getDay();
	}

	// 获取当天是周几
	static getWeeksByDay(year, month, day) {
   
   
		let date = Calendar.getDateByYearMonth(year, month, day);
		return date