antd 时间选择器 TimePicker 实现只能选择 当天零点到当前时间的时间段

import { TimePicker } from 'antd';
 
引入   import moment from 'moment';
 
moment().hours() 获取当前小时
moment('2021-08-05 11:07:05').hours()   // 11
 
携带年月日           time[0].format('YYYY-MM-DD HH:mm:ss') 或  time[1].format('YYYY-MM-DD HH:mm:ss')
只展示时分秒        time[0].format('HH:mm:ss') 或  time[1].format('HH:mm:ss')
 
复制代码
import { useState } from 'react';
import { TimePicker } from 'antd';  // 引入

  const [time, setTime] = useState<any>([]);

  // 时间禁用设置
  // 禁用小时
  const getDisabledHours = () => {
    let hours = [];
    for (var i = 23; i > moment().hours(); i--) {
      hours.push(i);
    }
    return hours;
  };
  // 禁用分钟
  const getDisabledMinutes = (hours) => {
    let minutes = [];
    if (hours === moment().hours()) {
      for (var i = 59; i > moment().minutes(); i--) {
        minutes.push(i);
      }
    }
    return minutes;
  };
  // 禁用秒
  const getDisabledSeconds = (hours, minutes) => {
    let second = [];
    if (hours == moment().hours() && minutes == moment().minutes()) {
      for (var i = 59; i >= moment().seconds(); i--) {
        second.push(i);
      }
    }
    return second;
  };

                    <TimePicker.RangePicker
                      value={time}
                      disabledHours={getDisabledHours}
                      disabledMinutes={getDisabledMinutes}
                      disabledSeconds={getDisabledSeconds}
                      onChange={(val) => setTime(val)}
                    />
复制代码

 

 

posted @   cielw  阅读(2409)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类
点击右上角即可分享
微信分享提示