React 前端日历组件

自定义日历组件

import React, { useEffect, useState, useRef } from 'react';
import { DatePicker, DatePickerProps, Tabs, Radio, Select, Col, Row, Image } from 'antd';
import styles from './style.less';

const PLTable: React.FC<any> = (props) => {

  const user = getUserInfo();
  const [nowMonth, setNowMonth] = useState(Number);
  const [nowYear, setNowYear] = useState(Number);
  const [monthBtn, setMonthBtn] = useState(Number);
  const [yearBtn, setYearBtn] = useState(Number);
  const [isHide, setIsHide] = useState(true);
  const [isDataHide, setIsDataHide] = useState(false);


  // Get the current date and determine which type the current month is.
  const nowDate = async () => {
    const month = new Date().getMonth()   1
    const year = new Date().getFullYear()
    setNowYear(year)
    setYearBtn(year)
    switch (month) {
      case (1 || 2 || 3):
        setMonthBtn(1)
        setNowMonth(1)
        break;
      case (4 || 5 || 6):
        setMonthBtn(2)
        setNowMonth(2)
        break;
      case (7 || 8 || 9):
        setMonthBtn(3)
        setNowMonth(3)
        break;
      default:
        setMonthBtn(4)
        setNowMonth(4)
    }
  };

  useEffect(() => {
    nowDate();

    // 判断点击日历内部还是外部，外部关闭日历弹窗
    document.addEventListener("click", (e) => {
      const inputEl = document.querySelector('.test-content');
      const clickEl = e.target as HTMLElement;
      if (!inputEl || !clickEl) return;
      if (inputEl.contains(clickEl)) {
        console.log('children')
        setIsDataHide(true)
        return;
      } else {
        console.log('parent')
        setIsDataHide(false)
        return;
      }
    });
  }, [])

  // 封装后的阻止冒泡功能
  const stopPropagation = (e) => {
    e.nativeEvent.stopImmediatePropagation();
  }

  const dataClick = async (e) => {
    stopPropagation(e);
    setIsDataHide(!isDataHide)
  };

  // 处理top tab切换日期
  const switchDateInterval = (type: any) => {
    if (type == 'add') {
      if (yearBtn < nowYear) {
        // 其他年份，判断是否切换年份，是4切换
        if (monthBtn === 4) {
          const year = yearBtn   1
          setYearBtn(year)
          setMonthBtn(1)
        } else {
          // 其他年分不是4，正常执行
          const num = Number(monthBtn)   1
          setMonthBtn(num)
          setIsHide(false)
        }
      } else {
        // 当前年份
        const num = Number(monthBtn)   1
        setMonthBtn(num)
        if (num >= nowMonth) {
          setIsHide(true)
        } else {
          setIsHide(false)
        }
      }
    } else {
      // 不是当前年份，判断是否是1，是1切换
      if (monthBtn === 1) {
        const year = yearBtn - 1
        setYearBtn(year)
        setMonthBtn(4)
      } else {
        // 不是1，正常执行
        const num = monthBtn - 1
        setMonthBtn(num)
        if (num >= nowMonth) {
          setIsHide(true)
        } else {
          setIsHide(false)
        }
      }
    }
  };

  const switchBtn = (type: any) => {
    setMonthBtn(type)
  };

  const calendar = async (type: any) => {
    if (type == 'add') {
      if (yearBtn<nowYear) {
        const year = yearBtn   1
        setYearBtn(year)
      }
    } else {
      const year = yearBtn - 1
      setYearBtn(year)
    }
  }

  return (
    <div className={styles.plTabMain}>
      <div className={styles.title}>
        <div className={styles.update}>Last Sync:{'11-20-2022 12:00 a.m. CT'}</div>
        <div className={styles.titleCenter}>
          <img
            alt='left'
            src={`/icons/leftIcon_pro.svg`}
            className={styles.scoreIcon}
            onClick={() => {
              switchDateInterval('subtract');
            }}
          />
          {monthBtn == 1 && `Jan – Mar ${yearBtn}`}
          {monthBtn == 2 && `Apr – Jun ${yearBtn}`}
          {monthBtn == 3 && `Jul – Sep ${yearBtn}`}
          {monthBtn == 4 && `Oct – Dec ${yearBtn}`}
          <img
            alt='right'
            src={`/icons/rightIcon_pro.svg`}
            className={styles.scoreIcon}
            onClick={() => {
              switchDateInterval('add');
            }}
            style={{ display: isHide ? 'none' : '' }}
          />
        </div>
        <div className={styles.datetime}>
          <div className={styles.inputName} onClick={dataClick}>
            <span>
              {monthBtn == 1 && `Jan – Mar ${yearBtn}`}
              {monthBtn == 2 && `Apr – Jun ${yearBtn}`}
              {monthBtn == 3 && `Jul – Sep ${yearBtn}`}
              {monthBtn == 4 && `Oct – Dec ${yearBtn}`}
            </span>
            <img className={styles.headerArrowIcon} src={`/svgs/iuessDown.svg`} />
          </div>

          <div className={`${styles.post} test-content`} style={{ display: `${isDataHide ? 'block' : 'none'}` }}>
            <div className={styles.postTitle}>
              <img src={`/svgs/finaLeft.svg`} onClick={() => {
              calendar('subtract');
            }} alt="" />
              <span>{yearBtn}</span>
              <img src={`/svgs/finaRight.svg`} onClick={() => {
              calendar('add');
            }} alt="" className={`${yearBtn>=nowYear? styles.nopoint:''}`} />
            </div>
            <div className={styles.connect}>
              <div className={`${styles.btn} ${monthBtn == 1 && styles.clickNow}`} onClick={()=>switchBtn(1)}>
                <span>Jan</span><span>Feb</span><span>Mar</span>
              </div>
              <div className={`${styles.btn} ${monthBtn == 2 && styles.clickNow}`} onClick={()=>switchBtn(2)}>
                <span>Apr</span><span>May</span><span>Jun</span>
              </div>
              <div className={`${styles.btn} ${monthBtn == 3 && styles.clickNow}`} onClick={()=>switchBtn(3)}>
                <span>Jul</span><span>Aug</span><span>Sep</span>
              </div>
              <div className={`${styles.btn} ${monthBtn == 4 && styles.clickNow}`} onClick={()=>switchBtn(4)}>
                <span>Oct</span><span>Nov</span><span>Dec</span>
              </div>
            </div>
          </div>
        </div>
      </div>
  
    </div>
  );
};
export default PLTable;

css 样式

@import '~antd/es/style/themes/default.less';

  // P&L table
  .plTabMain{
    .overTit{
      margin-bottom: 8px;
      margin-top: 56px;
      color: #0D2B56;
      font-size: 24px;
      font-family: 'Futura-PT-Demi';
    }
    .overTit2{
      margin-bottom: 24px;
      color: #0D2B56;
      font-size: 21px;
      font-family: 'Futura-PT-Demi';
    }
    .title{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      .update{
        font-size: 14px;
        line-height: 20px;
        color: #848688;
      }
      .titleCenter {
        font-size: 18px;
        color: #0D2B56;
        font-family: 'Futura-PT-Demi';
        line-height: 24px;
        display: flex;
        .scoreIcon {
          width: 10px;
          height: 22px;
          margin: 0 39px;
          cursor: pointer;
        }
        .guideMonth {
          vertical-align: middle;
          font-style: normal;
          font-weight: 500;
          font-size: 18px;
          line-height: 24px;
          color: #0D2B56;
          font-family: 'Futura-PT-Demi';
        }
      }
      .datetime{
        position: relative;

        .inputName{
          width: 170px;
          height: 40px;
          padding: 8px 16px;
          color: #4E5153;
          border: 1px solid #D6D8DC;
          border-radius: 4px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          background: #fff;
          cursor: pointer;
          .headerArrowIcon{
            width: 12px;
            vertical-align: baseline;
          }
        }
        .post{
          display: none;
          position: absolute;
          width: 268px;
          height: 264px;
          border-radius: 4px;
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
          background: #fff;
          z-index: 9999;
          // cursor: pointer;
          .postTitle{
            width: 100%;
            height: 40px;
            padding: 10px 24px;
            border-bottom: 1px solid #ECEEF1;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            img{
              cursor: pointer;
            }
            .nopoint{
              cursor: not-allowed !important;
            }
          }
          .connect{
            height: calc(100% - 40px);
            padding: 23px 24px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            .btn{
              width: 100%;
              height: 28px;
              padding: 4px 16px;
              font-size: 14px;
              color: #4E5153;
              border: 1px solid #E1990F;
              border-radius: 4px;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              cursor: pointer;
            }
            .clickNow{
              background: #EFB041 !important;
              border: 1px solid #EFB041 !important;
              color: #fff !important;
            }
          }
        }
      }
    }

    .tableCenter{
      padding: 24px;
      background: #fff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      .itemFirst{
        background: #F9F9F9;
        border-top: 1px solid #D6D8DC !important;
        border-width: 1px;
        border-bottom: none !important;
      }
      .itemFirst2{
        background: #ECEEF1;
        border-bottom: 1px solid #D6D8DC !important;
        border-width: 1px;
        border-top: none !important;
      }
      .itemFirst3{
        border-top: 1px solid #eee !important;
      }
      .itemFirst4{
        border-bottom: 1px solid #D6D8DC;
      }
    }
    
  }

  .topCenter{
    display: flex;
    flex-direction: row;
    .leftScore{
      width: 604px;
      height: 608px;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
      margin-right: 24px;
      border-radius: 4px;
      background: #fff;
      padding: 24px;
    }
    .riList{
      display: flex;
      flex-direction: column;
      .topGrowth{
        width: 604px;
        height: 292px;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
        margin-bottom: 24px;
        border-radius: 4px;
        background: #fff;
        padding: 24px;
        box-sizing: border-box;
      }
      .btmCash{
        width: 604px;
        height: 292px;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        background: #fff;
        padding: 24px;
        box-sizing: border-box;
      }
      .ribbtmContent{
        width: 100%;
        display: flex;
        flex-direction: row;
        .baifen{
          width: 35%;
          margin-left: 16px;
          display: flex;
          flex-direction: column;
          .rule{
            font-size: 14px;
            color: #4E5153;
            margin-top: 24px;
            margin-bottom: 24px;
          }
          .num{
            font-size: 36px;
            color: #009344;
            margin-bottom: 40px;
            line-height: 32px;
          }
          .num2{
            font-size: 36px;
            color: #D01D1D;
            margin-bottom: 40px;
            line-height: 32px;
          }
          .btn{
            width: 96px;
            height: 24px;
            display: flex;
            flex-direction: row;
            align-items: center;
            background: #CAE7CE;
            border-radius: 4px;
            padding: 4px 16px;
            font-size: 12px;
            color: #009344;
            img{
              margin-right: 9px;
            }
          }
          .btn2{
            width: 96px;
            height: 24px;
            display: flex;
            flex-direction: row;
            align-items: center;
            background: #FBC4C6;
            border-radius: 4px;
            padding: 4px 16px;
            font-size: 12px;
            color: #D01D1D;
            img{
              margin-right: 9px;
            }
          }
        }
        .table{
          width: 65%;
        }
      }
    }

    .ritopTitle{
      width: 100%;
      padding: 12px 16px;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      background: #ECEEF1;
      color: #4E5153;
      font-family: 'Futura-PT-Medium';
      border-bottom: 1px solid #D6D8DC;
      .name{
        display: flex;
        flex-direction: row;
        align-items: center;
        span{
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #106FC4;
          color: #fff;
          margin-right: 16px;
        }
      }
      img{
        cursor: pointer;
      }
    }
    .Metricstop{
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 32px;
      .sp1{
        color: #C88C1A;
        font-size: 36px;
        font-family: 'Futura-PT-Demi';
        margin-right: 8px;
      }
      .sp2{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #C88C1A;
        font-size: 18px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .classNaa{
        display: flex;
        flex-direction: row;
        align-items: center;
      }
    }
  }

  .tip{
    color: #4E5153;
    font-size: 14px;
    letter-spacing: 0;
    :global{
      .ant-tooltip-content{
        .ant-tooltip-arrow{
          display: none;
        }
      }
    }
  }

}

.aaaaaa2 {
  :global{
    .ant-form-item-label > label {
      color: #848688;
    }
    .ant-checkbox{
      color: #848688;
    }
    .ant-checkbox-wrapper {
      color: #848688;
    }
    .ant-modal-body {
      padding: 24px;
    }
    .ant-modal-confirm-btns{
      margin-top: 0;
    }
    .ant-modal-confirm-btns button:first-child{
      display: none;
    }
    .ant-modal-confirm-body{
      .anticon svg {
        display: none;
      }
    }
    .ant-modal-close-x {
      width: 75px;
      height: 75px;
      line-height: 75px;
    }
    .ant-modal-confirm-body .ant-modal-confirm-content {
      margin-top: 24px;
    }
    .ant-modal-confirm-body>.anticon .ant-modal-confirm-title .ant-modal-confirm-content {
      margin-left: 0;
    }
    .ant-btn-primary {
      color: #fff;
      background: #E1990F !important;
      border-color: #E1990F !important;
      border-radius: 4px;
    }
    .ant-modal-confirm-body .ant-modal-confirm-title {
      display: block;
      overflow: hidden;
      color: #0D2B56 !important;
      font-weight: 600 !important;
      font-size: 24px !important;
      line-height: 1.4;
    }
    .ant-modal-confirm-body > .anticon   .ant-modal-confirm-title   .ant-modal-confirm-content {
      margin-left: 0;
      color: #4E5153 !important;
      font-size: 16px !important;
    }
  }
}
:global{
  .ant-tabs {
    overflow: revert;
  }
}

这篇好文章是转载于：学新通技术网