react中封装antd日期框（近7天/日/月/周/季/年）

最新推荐文章于 2024-08-07 15:44:50 发布
最新推荐文章于 2024-08-07 15:44:50 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 组件封装 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a198261879/article/details/130702930
版权

近期项目完成（适用于我的项目中，如需调整可根据自己项目进行更改总体功能没问题，主要数据输出根据自己需要更改）总结了一下日期下拉选择如图所示： 其中对应cycleType是后端要求cycleType 周期类型：0-日，1-周，2-月，3-季，4-年，主要是能获取到时间即可

 下面上组件DateRange代码：

/* eslint-disable */
import React, { useEffect, useState, useRef } from "react";
import PropType from "prop-types";
import { DatePicker, Select } from "antd";
import moment from "moment";

const { Option } = Select;
const { RangePicker } = DatePicker;
function DateRange(props) {
  const {
    timeChange,
    hasShowYesterDay, // 是否默认显示昨天 默认为false 所以默认显示近7天
    dateTypeChange,
    defaultTimeType,  // 默认回显的传入的defaultTimeType赋值给timeType
    defaultTimeVal, // 默认回显选中的时间的传入的defaultTimeVal
  } = props;
  // cycleType 周期类型：0-日，1-周，2-月，3-季，4-年
  const [day, setDay] = useState("");
  const [week, setWeek] = useState("");
  const [month, setMonth] = useState("");
  const [season, setSeason] = useState("");
  const [year, setYear] = useState("");
  const [timeType, setTimeType] = useState(hasShowYesterDay ? "day" : "seven");
  const [custom, setCustom] = useState("");
  const [format, setFormat] = useState("YYYY-MM-DD");

  const defaultSevenDate = {
    startDate: moment().subtract(1, "weeks"),
    endDate: moment().subtract(1, "days"),
  };

  const yesterDayDate = {
    startDate: moment().subtract(1, "day"),
    endDate: moment().subtract(1, "day"),
  };

  const getDate = (year, month) => {
    var d = new Date(year, month, 0);
    return d.getDate();
  };

  const disabledCustomDate = () => {};

  useEffect(() => {
    if (hasShowYesterDay) {
      timeChange(
        [
          moment(moment().subtract(1, "day")).format("YYYY-MM-DD"),
          moment(moment().subtract(1, "day")).format("YYYY-MM-DD"),
        ],
        0,
        true
      );
      return;
    }
    timeChange(
      [
        moment()
          .subtract(1, "weeks")
          .format("YYYY-MM-DD"),
        moment()
          .subtract(1, "days")
          .format("YYYY-MM-DD"),
      ],
      0,
      true
    );
  }, []);

  useEffect(() => {
    setTimeType(timeType);
    dateTypeChange(timeType);
  }, [timeType]);

  useEffect(() => {
    if (defaultTimeType) {
      setTimeType(defaultTimeType);
      switch (defaultTimeType) {
        case "seven":
          break;
        case "day":
          setDay([moment(defaultTimeVal[0]), moment(defaultTimeVal[1])]);
          break;
        case "week":
          setWeek("");
          break;
        case "month":
          setMonth([moment(defaultTimeVal[0]), moment(defaultTimeVal[1])]);
          break;
        case "season":
          setSeason([moment(defaultTimeVal[0]), moment(defaultTimeVal[1])]);
          break;
        case "year":
          setYear([moment(defaultTimeVal[0]), moment(defaultTimeVal[1])]);
          break;
        case "custom":
          setCustom("");
          timeChange("");
          break;
      }
    }
  }, [defaultTimeType]);

  return (
    <div>
      <Select
        // defaultValue={defaultValue}
        value={timeType}
        style={{ width: 120 }}
        onChange={(value) => {
          setTimeType(value);
          switch (value) {
            case "seven":
              timeChange(
                [
                  moment()
                    .subtract(1, "weeks")
                    .format("YYYY-MM-DD"),
                  moment()
                    .subtract(1, "days")
                    .format("YYYY-MM-DD"),
                ],
                0
              );
              break;
            case "day":
              if (hasShowYesterDay) {
                setDay([yesterDayDate.startDate, yesterDayDate.endDate]);
                timeChange(
                  [
                    moment(moment().subtract(1, "day")).format("YYYY-MM-DD"),
                    moment(moment().subtract(1, "day")).format("YYYY-MM-DD"),
                  ],
                  0,
                  true
                );
                return;
              }
              setDay([moment(), moment()]);
              timeChange(
                [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
                0
              );
              break;
            case "week":
              setWeek("");
              timeChange("");
              break;
            case "month":
              let currentYearMonth = moment().format("YYYY-MM");
              let arr = currentYearMonth.split("-");
              setMonth([
                moment(moment().format("YYYY-MM")),
                moment(moment().format("YYYY-MM")),
              ]);
              timeChange(
                [
                  `${currentYearMonth}-01`,
                  `${currentYearMonth}-${getDate(arr[0], arr[1])
                    .toString()
                    .padStart(2, "0")}`,
                ],
                0
              );
              break;
            case "season":
              setSeason([
                moment(moment().startOf("quarters")),
                moment(moment().endOf("quarters")),
              ]);
              timeChange(
                [
                  moment(moment().startOf("quarters")).format("YYYY-MM-DD"),
                  moment(moment().endOf("quarters")).format("YYYY-MM-DD"),
                ],
                2
              );
              break;
            case "year":
              let currentYear = moment().format("YYYY");
              setYear([moment(currentYear), moment(currentYear)]);
              timeChange(
                [
                  `${currentYear}-01-01`,
                  `${currentYear}-12-${getDate(currentYear, 12)
                    .toString()
                    .padStart(2, "0")}`,
                ],
                2
              );
              break;
            case "custom":
              setCustom("");
              timeChange("");
              break;
          }
        }}
      >
        <Option value="seven">近七天</Option>
        <Option value="day">日</Option>
        {/* <Option value="week">周</Option> */}
        <Option value="month">月</Option>
        <Option value="season">季</Option>
        <Option value="year">年</Option>
        {/* <Option value="custom">自定义</Option> */}
      </Select>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <RangePicker
        value={[defaultSevenDate.startDate, defaultSevenDate.endDate]}
        style={{ width: 250, display: timeType == "seven" || "none" }}
        disabled
      />
      <RangePicker
        value={
          hasShowYesterDay && !day
            ? [yesterDayDate.startDate, yesterDayDate.endDate]
            : day
        }
        allowClear={false}
        onChange={(dates, dateStrings) => {
          setDay(dates);
          timeChange(dateStrings, 0);
        }}
        style={{ width: 250, display: timeType == "day" || "none" }}
      />
      <RangePicker
        value={week}
        allowClear={false}
        onChange={(dates, dateStrings) => {
          setWeek(dates);
          timeChange(
            [
              moment(dates[0])
                .day(1)
                .format(format),
              moment(dates[1])
                .day(7)
                .format(format),
            ],
            1
          );
        }}
        picker="week"
        style={{ width: 250, display: timeType == "week" || "none" }}
      />
      <RangePicker
        value={month}
        allowClear={false}
        onChange={(dates, dateStrings) => {
          let arr = dateStrings[1].split("-");
          const lastDate = getDate(arr[0], arr[1])
            .toString()
            .padStart(2, "0");
          setMonth(dates);
          timeChange(
            [`${dateStrings[0]}-01`, `${dateStrings[1]}-${lastDate}`],
            dateStrings[0] == dateStrings[1] ? 0 : 2
          );
        }}
        picker="month"
        style={{ width: 250, display: timeType == "month" || "none" }}
      />
      <RangePicker
        value={season}
        allowClear={false}
        onChange={(dates, dateStrings) => {
          setSeason(dates);
          timeChange(
            [
              moment(dates[0])
                .startOf("quarters")
                .format(format),
              moment(dates[1])
                .endOf("quarters")
                .format(format),
            ],
            dateStrings[0] == dateStrings[1] ? 2 : 3
          );
        }}
        picker="quarter"
        style={{ width: 250, display: timeType == "season" || "none" }}
      />
      <RangePicker
        allowClear={false}
        value={year}
        onChange={(dates, dateStrings) => {
          setYear(dates);
          const lastDate = getDate(dateStrings[1], 12)
            .toString()
            .padStart(2, "0");
          timeChange(
            [`${dateStrings[0]}-01-01`, `${dateStrings[1]}-12-${lastDate}`],
            dateStrings[0] == dateStrings[1] ? 2 : 4
          );
        }}
        picker="year"
        style={{ width: 250, display: timeType == "year" || "none" }}
      />
      <RangePicker
        value={custom}
        style={{ width: 250, display: timeType == "custom" || "none" }}
        allowClear={false}
        disabledDate={disabledCustomDate}
        onChange={(dates, dateStrings) => {
          setCustom(dates);
          timeChange(dateStrings, 0);
        }}
      />
    </div>
  );
}

DateRange.propTypes = {
  timeChange: PropType.func,
  dateTypeChange: PropType.func,
  hasShowYesterDay: PropType.bool,
  defaultTimeType: PropType.string,
  defaultTimeVal: PropType.array,
};

DateRange.defaultProps = {
  timeChange: () => {},
  dateTypeChange: () => {},
  hasShowYesterDay: false,
  defaultTimeType: "",
  defaultTimeVal: [],
};

export default DateRange;

组件在文件的使用：

import DateRange from "Components/DateRange";

function CartInventory(props) {
    const [timeVal, setTimeVal] = useState({});
    const [dateType, setDateType] = useState("seven");
    const [cycleType, setCycleType] = useState(0);

    useEffect(() => {
         // 如果需要回显日期值 可以在该生命周期重新设置
           // setTimeVal（）
           // setDateType（）
          return () => {
             
          };
     },[])


    const timeRangeChange = (tv, timeType, isFirst = false) => {
      setCycleType(timeType);
      setTimeVal(tv);
      if (tv && !isFirst) {
      // 重新获取列表
      props.getData();
    }
  };

     return (
       <>
         <DateRange
            timeChange={timeRangeChange}
            dateTypeChange={(type) => {
              setDateType(type);
            }}
            defaultTimeType={dateType}
            defaultTimeVal={timeVal}
          ></DateRange>
      </>)
}

 

海瑞吖～
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
React 前端日历组件
weixin_49074407的博客
12-09 1515
react 自定义日历组件
React封装日期时间显示组件
小鸡撞大叔
05-13 1532
时间日期展示器 import ProtoType from 'prop-types'; import { useState, useEffect } from 'react'; import './index.css' /**时间选择器 * @luoronghao * 参数说明 * timzone:时区（1-24） * calendar:日期类型{solar(阳历)，lunar(阴历)} * date：时间 * format:格式（YYYY/MM/DD HH:MM:SS W） YYYY（
antd封装多态时间选择器（包含日，可选近7日，近30日，周，月）react+moment+antd+ts
最新发布
m0_55742074的博客
08-07 254
antd近7日，近30日，周，月选择器
react-reactdatetime一个轻量级但是完整的日期时间选择器react组件
08-15
react-datetime - 一个轻量级但是完整的日期时间选择器react组件
打造超酷的 React 迷你日历组件，只需几步！
技小白的博客
07-19 1025
现在市面上的组件库大多包含日历组件，那么它们具体是如何实现的呢？其实原理很简单，主要是通过使用Date对象的相关API。今天我们就来开发一个迷你版的日历组件。
react-react日期选择器
08-15
react日期选择器 it works better on mobile terminal
【VUE】日期选择组件-快捷选择昨日/近7日/近30日
SZnAl的博客
03-20 1702
封装日期选择组件，可快捷选择昨日，近7日，近30日
react antd 日期选择 WeekPicker MonthPicker 取值转为起止日期
BILL-博客-LLIB
08-23 1103
默认WeekPicker 取值，返回的是2023年34周，这样后台用起来不方便。可以转化成指定周的起止日期。同样，MonthPicker 默认取值，返回的是2023-08，统一格式，转化成月的起止日期，代码如下。
antd-react 组件库工作以来的总结
weixin_44457030的博客
11-13 1220
antd-react 组件库工作以来的总结
antd 日期时间选择_antd-mobile的DatePicker日期选择组件使用
weixin_39550940的博客
12-21 6055
现在项目上有个需求，在时间选择上需要精确到分钟，且分钟只能是0分钟或者是30分钟。其中组件有个minuteStep参数，将其设置成30，即可只显示0分钟或者30分钟了。但是在选择的时候发现了问题，点击时间控件，弹出时间选择的界面，如果不去选择0分钟或者30分钟，直接点击确认，控件会选择到当前时间的分钟数，这是不合理的，解决方法：参考了https://www.zhihu.com/question/5...
antd组件禁用时分秒和年月日
weixin_44457030的博客
03-18 2030
antd组件禁用时分秒和年月日
react-一款基于react的日历组件
08-15
一款基于react的日历组件
react-reactdaterange一个React组件用于选择日期和日期范围
08-15
react-date-range - 一个React组件用于选择日期和日期范围
react-reactdaterangepicker基于react的日期范围选择组件
08-15
react-daterange-picker - 基于react的日期范围选择组件
react自定义日期组件datePicker
01-13
datePicker日期组件-使用ts，tsx完成的自定义组件,
react实现添加input框,Dropdown,日历输入的值
12-12
react实现添加input框,Dropdown,日历输入的值，本人亲测有用
自己写一个含有周、月、年模式的日历组件
liuyuhua666的博客
01-13 1321
写这样一个组件的初衷 项目用的是antd的组件，一开始用antd上面的日历组件本来没什么问题，感觉挺好用的，可是某一天需求人员说要求日历只展示一周或半个月，然后我就懵逼了，antd上面的日历组件根本就没有周模式的，只有月和年模式，再说，感觉根本没必要啊，但是用户强烈要求有这个功能，没办法，只能自己写一个了。 ...
react日历组件
前端小白成长记
12-11 6146
一、简单版 效果图如下 代码如下 import React from "react"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; class Example extends React.Component { construc...
推荐：React DayPicker - 灵活易用的日期选择组件
gitblog_00094的博客
05-11 430
推荐：React DayPicker - 灵活易用的日期选择组件 项目地址:https://gitcode.com/gpbl/react-day-picker 在开发用户界面时，一个直观且易于操作的日期选择器是不可或缺的部分。【React DayPicker】正为此提供了一个强大的解决方案，它是一个专为React设计的日期组件，可渲染出美观的日历月视图，供用户选择单个或多个日期。 1、项目介绍 R...
2024前端面试必备：HTML5/CSS3/JS/TS/Vue/React兼容与样式深度解析
面试中可能会考察React Hooks、函数组件、Context API、错误边界以及React生命周期方法的变化。 **浏览器兼容性** 面试中可能会问到如何处理不同浏览器之间的兼容性问题，例如通过添加doctype声明确保浏览器以标准...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海瑞吖～

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值