业务需求
- 多选近三个月的日期。
- 不能选择当日之前的日期。
因为antd的日期组件都是选择单个日期或者日期范围。不符合需求,所以自己就实现了一个。写的不好的地方大家请指教
效果展示
测试组件
<CheckCalendar
visible={
this.state.showCalendar}
onClose={
()=>{
this.setState({
showCalendar:false
})
}}
onConfirm={
(isCheck)=>{
console.log(isCheck)
this.setState({
showCalendar:false
})
}}
/>
CheckCalendar.jsx
import React, {
Component, Fragment } from "react";
import {
cloneDeep, chunk } from "lodash";
import PropTypes from 'prop-types';
import "animate.css";
import "./index.scss"
class CheckCalendar extends Component {
constructor(props) {
super(props)
this.state = {
dateTable: [],
isCheck: [],
}
this.calendar = React.createRef();
this.mask = React.createRef();
}
componentWillMount() {
this.initDateTable()
}
initDateTable() {
let temp = []
for (let i = 0; i < 2; i++) {
// 取近三个月内的日期
let obj = this.getDateTable(i);
temp.push(obj);
}
this.setState({
dateTable: temp
});
}
getDateTable(plus) {
let curDate = new Date() //现在时间
let curYear = curDate.getFullYear();
let curMonth = curDate.getMonth() + 1;
let curDay = curDate.getDate();
if (curMonth + plus > 12) {
curYear++
curMonth = curMonth + plus - 12
} else {
curMonth = curMonth + plus
}
let date = new Date(curYear, curMonth, 0);
let year = date.getFullYear(); // 当前年
let month = date.getMonth() + 1; // 当前月
// console.log(`${year}年${month}月.`);
let date2 = new Date(year, month, 0);
let days = date2.getDate(); // 当月有多少天
// console.log(`当月有${days}天.`);
date2.setDate(1);
let day = date2.getDay(); // 当月第一天是星期几
// console.log(`当月第一天是星期${day}.`);
let list = [];
for (let i = 0; i < days + day; i++) {
if (i < day) {
// 头部补零
list.push(<