前端项目实战110-创建时间日历的组件笔记

import React, { useState, useEffect, useCallback, memo } from 'react';
import {Modal, Input, message, Form, Calendar} from 'antd';
import {useHolidayDetailAddMutation} from '@/restapi/service/workCalendar/workCalendar'
import locale from 'antd/lib/calendar/locale/zh_CN'
import moment from 'moment';
import 'moment/locale/zh-cn';
import postGrest from "@/redux/postgrest";
moment.locale('zh-cn')
const AddOrEditMenu: React.FC<any> = (props) =>{
    const { specModalData, visible } = props;
    const [holidayDetailAdd] = useHolidayDetailAddMutation()
    const [form] = Form.useForm();
    const onOk = useCallback(() => {
        form.validateFields().then(res => {
            const obj:any = {}
            obj.holiday_id = specModalData.id
            //后台说要传special_type = 1去计算某些东西
            obj.special_type = 1
            obj.special_date = moment(res.special_date).format('YYYY-MM-DD')
            postGrest().create('t_base_holiday_detail',{data:obj}).then((response:any)=>{
                if(!response.code){
                    message.success("创建成功")
                    props.onConfirm();
                }else{
                    message.warning(response.message)
                }
            })
        });
    }, []);
 
    useEffect(() => {
        //默认选中问题
           form.setFieldsValue({...props.specModalData,special_date:moment(new Date())})
    }, []);
 
    return (
        <Modal
            maskClosable={false}
            visible={visible}
            title={`${specModalData && specModalData.id ? '编辑' : '新增'}`}
            onCancel={props.onClose}
            onOk={onOk}
            width={1000}
        >
            <Form
                style={{marginTop:'10px'}}
                form={form}
                labelCol={{
                    sm: { span: 3 },
                }}
                wrapperCol={{
                    sm: { span: 20 },
                }}
            >
                <Form.Item
                    label="所属公休日"
                    name="holiday"
                    rules={[{ required: true, message: '请输入所属公休日' }]}
                >
                    <Input readOnly/>
                </Form.Item>
 
                <Form.Item
                    label="休息日"
                    name="special_date"
                    rules={[{ required: true, message: '请选择休息日' }]}
                >
                    <Calendar locale={locale}/>
                </Form.Item>
            </Form>
        </Modal>
    );
}
 
export default memo(AddOrEditMenu);

日历的显示