antd中时间组件获取选中日期所在周、月的第一天和最后一天

最新推荐文章于 2024-08-07 15:44:50 发布

原创最新推荐文章于 2024-08-07 15:44:50 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react.js #前端

前端开发专栏收录该内容

70 篇文章

订阅专栏

本文介绍了一个使用React和Ant Design实现的日期选择器组件，该组件允许用户选择日期范围，并展示如何通过WeekPicker获取选定周的开始和结束日期，同时计算并显示选定日期所在月份的首尾日期。

import React, { FC, memo, useState } from "react";
import { DatePicker } from "antd";
const { RangePicker } = DatePicker;
import locale from "antd/es/date-picker/locale/zh_CN";
import moment from "moment";
const Capability: FC = () => {

    const handlechange = (date: any, dateString: string) => {
        const startDayOfWeek = (new Date(date[0])).getDay();
        const endDayOfWeek = (new Date(date[1])).getDay();
        console.log("起始日期周的第一天:",date[0].subtract(startDayOfWeek - 1, 'days').format("YYYY-MM-DD"));
        console.log("结束日期周的最后一天:",date[1].add(7 - endDayOfWeek, 'days').format('YYYY-MM-DD'));

        const startDayOfMonth = (new Date(date[0])).getDate();
        const endDayOfMonth = (new Date(date[1])).getDate();
        console.log("起始日期月的第一天:",date[0].subtract(startDayOfMonth - 1, 'days').format('YYYY-MM-DD'));
        console.log("起始日期月的最后一天:",date[1].add(date[1].daysInMonth() - endDayOfMonth, 'days').format('YYYY-MM-DD'));
    }

    return (
        <RangePicker
            style={{ width: '260px' }}
            locale={locale}
            picker="week"
            onChange={handlechange}
        />
    );
}

export default memo(Capability);