首页 > 其他分享 >react antd rangPicker组件选择当月、本月时间

react antd rangPicker组件选择当月、本月时间

时间:2023-03-10 18:23:45浏览次数:58  
标签:current dates dayjs rangPicker valueOf react antd

可以通过设置react ant design 的RangePicker的disableDate的属性来实现只选择当月、本月时间的效果,实现代码如下

1、设置RangePicker

     <RangePicker
            disabledDate={disabledDate}
     />

2、设置disableDate

  const disabledDate = (current) => {
    if (
      !dates ||
      dates.length === 0 ||
      !rangeSearch ||
      !rangeSearch.rangeDays
    ) {
      return false;
    }
      return !(
        dayjs(current).valueOf() > dayjs(dates).startOf("month").valueOf() &&
        dayjs(current).valueOf() < dayjs(dates).endOf("month").valueOf() &&
        dayjs(dates).endOf("date").diff(current, "days") <=
          rangeSearch.rangeDays
      );
  
  };

  注:按如上设置,就可以实现react antd rangPicker组件选择当月时间的效果,dayjs需要自己手动引入

标签:current,dates,dayjs,rangPicker,valueOf,react,antd
From: https://www.cnblogs.com/uimeigui/p/17204370.html

相关文章

  • ReactiveProperty入门
    什么是ReactivePropertyReactiveProperty在ReactiveExtensions下支持异步功能。目标框架是.NETStandard2.0。ReactiveProperty的理念是有趣的编程.您可以使用Reac......
  • vue react框架
      Vue、React框架的价值(共同点)组件化数据视图分离,数据驱动视图——这是核心!只关注业务数据,而不用再关心DOM变化  vdom并不快,js操作DOM才是最快的但“数据......
  • React数字滚动组件 numbers-scroll
    数字滚动组件,也可以叫数字轮播组件,这个名字一听就是非常普通常见的组件,第一反应就是想找找网上大佬的东西顶礼膜拜一下,这一搜,还真是没找到趁手的╮(╯▽╰)╭。最近接了大......
  • Vue3+vite+antDesign 日历 月份和星期中文显示
    <template><a-config-provider:locale="locale">//建议直接包裹在最外层,若果你想全部转换为中文的话</a-config-provider><template><scriptsetup......
  • React+antd sorter实现排序并作汉化处理
    sorter实现排序sorter排序大致分为两种:第一种是数值类型:直接相加减就好第二种是字符串类型:需要用到 localeCompare方法 废话不多说,直接上代码     ......
  • IIS 前端发布-- React Ant Design Pro 篇
    前端发布--ReactAntDesignPro篇打开你的项目直接(build)发布,,,antd这个proxy.ts里的配置其实在生产环境是不生效没用,所以其实你在这里写啥都不影响。他只是用于你......
  • 打造让别人眼前一亮的Portfolio(从0到1) - 使用React和Three JS
        【打造让别人眼前一亮的Portfolio(从0到1)-使用React和ThreeJS】https://www.bilibili.com/video/BV1D54y1u7a7?vd_source=9dbcff019fe7cd087d0ea14c75f1546......
  • React学习笔记(三)—— 组件高级
    一、列表和keys1.1、ListsandKeys(列表和键)首先,我们回顾一下在javascript中怎么去变换列表。下面了的代码,我们用到了数组函数的map方法来实现数组的每一个值变成它的2......
  • xterm + react + antd pro 小坑记录
    xterm+react+antdpro小坑记录https://juejin.cn/post/6863271258113441805  Django运维系统基础功能之---web远程ssh终端https://blog.csdn.net/weixin_39098......
  • React Hooks源码深度解析
    作者:京东零售郑炳懿前言ReactHooks是React16.8引入的一个新特性,它允许函数组件中使用state和其他React特性,而不必使用类组件。Hooks是一个非常重要的概念,因为它们提......