愤怒的佛手瓜

antd4.x版本 react DatePicker 日期选择框自定义按钮弹出日期弹窗

import React, { useEffect, useState, useRef } from 'react';
import styles from './index.less';
import { DatePicker, Button, DatePickerProps } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker';
import locale from 'antd/es/date-picker/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

interface Date {
  style?: any;
  className?: any;
  top: number; // 绝对定位距离面板的top
  left: number; // 绝对定位距离面板的left
  onDateChange: any; // 确定时间回调事件
  show: boolean; // 显示弹窗
  Node?: any; // 定义浮层的容器
}

const Date = ({ top, left, onDateChange, show, Node }: Date) => {
  const [dateState, setdateState] = useState(false);
  const [keyValue, setKeyValue] = useState('');
  const picker = useRef();

  useEffect(() => {
    setdateState(show);
    console.log('触发', show);
  }, [show]);

  const reDate = () => {
    setKeyValue(dayjs().format());
  };

  const disabledDate: RangePickerProps['disabledDate'] = (current) => {
    return current && current > dayjs().endOf('day');
  };

  const handleCalendarChange: DatePickerProps['onChange'] = (
    date,
    dateString,
  ) => {
    onDateChange(dateString);
    setdateState(false);
    picker.current.blur();
    reDate();
  };

  return (
    <>
       Node}
      />
    
  );
};

export default Date;

使用

import Date from '@/components/Date'

const [Index, setIndex] = useState(false);
const SubtitleRef = useRef(null);

const onDateChange = (date: any) => {
     console.log(`onDateChange`, date);
     setIndex(false);
};

antd4.x版本 react DatePicker 日期选择框 自定义按钮弹出日期弹窗

antd4.x版本 react DatePicker 日期选择框自定义按钮弹出日期弹窗