react+antd --- 日期选择器，动态生成日期表格表头

先看一下效果---有当前月的日期

技术：

     1： react

     2：antd-UI库 --  table

     3：moment--时间处理库

代码效果：

 
import { Button, DatePicker, Table } from 'antd';
import { useEffect, useState } from 'react';
import moment from 'moment';

function Club() {
    const [selectedMonth, setSelectedMonth] = useState(moment()); // 月份选择
    const [monthColumnsList, setMonthColumnsList] = useState([]); // 月份列数据

    // 切换月份选择器
    const handleChangeMonth = (date, datestr) => {
        setSelectedMonth(date);
    };

    useEffect(() => {
        const daysInMonth = selectedMonth.daysInMonth();
        const startOfMonth = selectedMonth.clone().startOf('month');
        console.log(daysInMonth, 'daysInMonth')
        console.log('startOfMonth', startOfMonth)

        const monthList = Array.from({ length: daysInMonth }, (_, i) =>
            startOfMonth.clone().add(i, 'days')
        );
        console.log('monthList', monthList)
        // 格式化日期，以当前月的日期作为表头
        const columns = monthList.map((item, index) => ({
            width: '80px',
            title: item.format('MM-DD'),
            dataIndex: item.format('MM-DD').toLowerCase() + '_interviewed',
            align: 'center',
            //进行右边固定 最后一个形成--------------------------
            fixed: monthList.length - 1 == index ? 'right' : '',
        }));

        setMonthColumnsList(columns);
    }, [selectedMonth]);
    useEffect(() => {
        console.log(monthColumnsList, 'monthColumnsList');
    }, [monthColumnsList])
    // 每日过程列表
    const columns = [
        {
            //进行左边边固定
            fixed: 'left',
            width: '140px',
            title: '实际约面数',
            dataIndex: 'account_id',
            align: 'center',

        },
        ...monthColumnsList
    ];
  //可以根据后端传入的数据进行修改
    const dataList = [
        // {
        //     key: '1',
        //     account_id: 2,
        // },
        // {
        //     key: '2',
        //     account_id: 2,
        // }
    ];

    return (
        <div>
            //时间选择器
            <DatePicker
                picker='month'
                defaultValue={selectedMonth}
                onChange={handleChangeMonth}
                style={{ width: 150 }}
                allowClear={false}
            />
            <Table
            

                scroll={{ x: 1898 }}
                columns={columns}
                dataSource={dataList}
            />
        </div>
    );
}

export default Club;

 这个是展示当前周的情况--可滚动

代码如下

 
import { Button, DatePicker, Table } from 'antd';
import { useEffect, useState } from 'react';
import moment from 'moment';

function Club() {
    const [selectedMonth, setSelectedMonth] = useState(moment()); // 月份选择
    const [monthColumnsList, setMonthColumnsList] = useState([]); // 月份列数据

    // 切换月份选择器
    const handleChangeMonth = (date, datestr) => {
        setSelectedMonth(date);
    };
    const EnumWeekdays = {
        Monday: '周一',
        Tuesday: '周二',
        Wednesday: '周三',
        Thursday: '周四',
        Friday: '周五',
        Saturday: '周六',
        Sunday: '周日'
    }

    useEffect(() => {
        // const daysInMonth = selectedMonth.daysInMonth();
        const daysInMonth = 7;
        // const startOfMonth = selectedMonth.clone().startOf('month');
        const startOfMonth = selectedMonth.clone().startOf('week');
        const monthList = Array.from({ length: daysInMonth }, (_, i) =>
            startOfMonth.clone().add(i, 'days')
        );
        // 保存当前地区
        const currentLocale = moment.locale();
        // 设置地区为英文
        moment.locale('en');
        const columns = monthList.map((item, index) => (
            console.log('item.format]', item.format('dddd')),
            {
                title: `${item.format('MM-DD')}(${EnumWeekdays[item.format('dddd')]})`,
                dataIndex: item.format('dddd').toLowerCase() + '_interviewed',
                width: '80px',
                fixed: monthList.length - 1 == index ? 'right' : '',
            }))
        // huifeng: 恢复当前地区
        moment.locale(currentLocale);
        // 格式化日期，以当前月的日期作为表头
        // const columns = monthList.map((item, index) => ({
        //     width: '80px',
        //     fixed: monthList.length - 1 == index ? 'right' : '',
        //     title: item.format('MM-DD'),
        //     dataIndex: item.format('MM-DD').toLowerCase() + '_interviewed',
        //     align: 'center',

        // }));

        setMonthColumnsList(columns);
    }, [selectedMonth]);
    useEffect(() => {
        console.log(monthColumnsList, 'monthColumnsList');
    }, [monthColumnsList])
    // 每日过程列表
    const columns = [
        {
            fixed: 'left',
            width: '140px',
            title: '实际约面数',
            dataIndex: 'account_id',
            align: 'center',

        },
        ...monthColumnsList
    ];

    const dataList = [
        // {
        //     key: '1',
        //     account_id: 2,
        // },
        // {
        //     key: '2',
        //     account_id: 2,
        // }
    ];

    return (
        <div>
 
            <DatePicker
                picker='month'
                defaultValue={selectedMonth}
                onChange={handleChangeMonth}
                style={{ width: 150 }}
                allowClear={false}
            />
            <Table
                scroll={{ x: 1898 }}
                columns={columns}
                dataSource={dataList}
            />
        </div>
    );
}

export default Club;

可以直接复制-------粘到自己的项目-----------------------------------------------------------------------------------