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

最新推荐文章于 2023-12-20 11:48:52 发布

suchcl

最新推荐文章于 2023-12-20 11:48:52 发布

阅读量952

点赞数

分类专栏：前端开发文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/hbysj/article/details/127077917

版权

前端开发专栏收录该内容

70 篇文章 2 订阅

订阅专栏

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);