forgeplus-react/src/forge/Issues/Component/date.jsx

import React,{useRef,useEffect, useState , forwardRef } from 'react';
import { Dropdown ,  Calendar , Select, Radio, Col, Row } from 'antd';
import { findDOMNode } from 'react-dom';
import moment from 'moment';
const { Group , Button } = Radio;

function Date({name , today , setDate , editFlag},ref){
  const [ visible , setVisible ] = useState(false);
  const [ time , setTime ] = useState();

  useEffect(()=>{
    if(today){
      setTime(today);
    }
  },[today])

  const refFa = useRef(null);
  const refBox = useRef(null);

  useEffect(()=>{
    if(!visible && !editFlag && (time && time !== today)){
      setDate(time);
    }
  },[visible,editFlag,time])


  useEffect(() => {
    document.addEventListener('click', clickMe , false);
  }, [])

  const clickMe = ({ target }) => {
    // 查找父组件
    const faComponent = findDOMNode(refFa.current);
    const boxComponent = findDOMNode(refBox.current);
    if (faComponent && boxComponent) {
      const isChild = faComponent.contains(target);
      const isBox = boxComponent.contains(target);
      let role = target.getAttribute("role");
      if(!isChild && !isBox && !(role && role === "option")){
        setVisible(false);
      }
    }
  }
  function onSelect(t){
    setTime(moment(t).format('YYYY-MM-DD'));
    setDate(moment(t).format('YYYY-MM-DD'));
    setVisible(false);
  }
  const overlay=(
    <div ref={refFa} style={{ width: 280, border: '1px solid #d9d9d9', borderRadius: 4 ,backgroundColor:"#fff",marginTop:"-10px"}}>
      <Calendar 
        fullscreen={false}
        headerRender={({ value, type, onChange, onTypeChange }) => {
          const start = 0;
          const end = 12;
          const monthOptions = [];
          const current = value.clone();
          const localeData = value.localeData();
          const months = [];
          for (let i = 0; i < 12; i++) {
            current.month(i);
            months.push(localeData.monthsShort(current));
          }

          for (let index = start; index < end; index++) {
            monthOptions.push(
              <Select.Option className="month-item" key={`${index}`}>
                {months[index]}
              </Select.Option>,
            );
          }
          const month = value.month();

          const year = value.year();
          const options = [];
          for (let i = year - 10; i < year + 10; i += 1) {
            options.push(
              <Select.Option key={i} value={i} className="year-item">
                {i}
              </Select.Option>,
            );
          }
          return (
            <div style={{ padding: 10 }}>

              <Row type="flex" justify="space-between">
                <Col>
                  <Group size="small" onChange={e => {console.log("typyCHange:",e);onTypeChange(e.target.value)}} value={type}>
                    <Button value="month">日期</Button>
                    <Button value="year">月份</Button>
                  </Group>
                </Col>
                <Col>
                  <Select
                    size="small"
                    dropdownMatchSelectWidth={false}
                    className="my-year-select"
                    style={{ width: 80 }}
                    onChange={newYear => {
                      const now = value.clone().year(newYear);
                      setTime(moment(now).format('YYYY-MM-DD'));
                      onChange(now);
                    }}
                    value={String(year)}
                  >
                    {options}
                  </Select>
                </Col>
                <Col>
                  <Select
                    size="small"
                    dropdownMatchSelectWidth={false}
                    value={String(month)}
                    onChange={selectedMonth => {
                      const newValue = value.clone();
                      newValue.month(parseInt(selectedMonth, 10));
                      setTime(moment(newValue).format('YYYY-MM-DD'));
                      onChange(newValue);
                    }}
                  >
                    {monthOptions}
                  </Select>
                </Col>
              </Row>
            </div>
          );
        }}
        onSelect={onSelect}
        />
    </div>
  )
  return(
    <Dropdown
      placement={"bottomLeft"}
      overlay={overlay}
      visible={visible} 
      trigger={['click']}
    >
      <li>
        <span>
          {name}
          {!editFlag && <a ref={refBox} onClick={()=>setVisible(visible ? false : true)}><i className="iconfont icon-riqi font-14" style={{color:"#898d9d"}}></i></a> }
        </span>
        <p className={time ? "operatevalue color-grey-3 task-hide" : "operatevalue task-hide"}>{time || "未设置"}</p>
      </li>
    </Dropdown>
  )
}
export default forwardRef(Date);