react模仿antd手写一个多选日期日历组件

业务需求

  1. 多选近三个月的日期。
  2. 不能选择当日之前的日期。

因为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(<
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值