antd中提供了是日期范围选择器及datepaicker封装日期范围选择器的示例,但是没有时间选择范围的组件,这里使用两个timePicker组合一个事件范围选择器,通过disabled属性限定时间可选择范围;(ts+hook,支持form表单)

基本就是通过disabledHours、 disabledMinutes、disabledSeconds分别判断结束时间大于开始时间,这里设置的最小时间差为0s。

  1. import React, { forwardRef } from 'react';
  2. import { Row, Col, TimePicker } from 'antd';
  3. import moment from 'moment';
  4. import { TimePickerProps } from 'antd/es/time-picker';
  5. interface IProps extends TimePickerProps {
  6. prefixCls?: string;
  7. value?: any;
  8. onChange?: any;
  9. }
  10. const TimePickerRange: React.FC<IProps> = (props, ref) => {
  11. const {
  12. prefixCls,
  13. className,
  14. style,
  15. onChange,
  16. value,
  17. disabled,
  18. ...rest
  19. } = props;
  20. const [startTime, setStartTime] = React.useState(value.start || moment());
  21. const [endTime, setEndTime] = React.useState(value.end || moment());
  22. /*定义时间数组*/
  23. const Hours = Array.from(Array(24), (v, k) => k);
  24. const Minutes = Array.from(Array(60), (v, k) => k);
  25. const Seconds = Array.from(Array(60), (v, k) => k);
  26. const triggerChange = changedValue => {
  27. if (onChange) {
  28. onChange(
  29. Object.assign({}, { start: startTime, end: endTime }, changedValue)
  30. );
  31. }
  32. };
  33. /*结束时间控制-hour*/
  34. const disEndHouse = () => {
  35. if (startTime) {
  36. let h = startTime.hour();
  37. return Hours.slice(0, h);
  38. }
  39. return [];
  40. };
  41. /*结束时间控制-minute)*/
  42. const disEndMinute = h => {
  43. if (startTime) {
  44. if (h > startTime.hour()) return [];
  45. let m = startTime.minute();
  46. return Minutes.slice(0, m);
  47. }
  48. return [];
  49. };
  50. /*结束时间控制-second*/
  51. const disEndSeconds = (h, m) => {
  52. if (startTime) {
  53. if (h > startTime.hour()) return [];
  54. if (m > startTime.minute()) return [];
  55. let s = startTime.second();
  56. return Seconds.slice(0, s);
  57. }
  58. return [];
  59. };
  60. /*开始时间控制-hour*/
  61. const disStartHouse = () => {
  62. if (endTime) {
  63. let h = endTime.hour();
  64. return Hours.slice(h, Hours.length - 1);
  65. }
  66. return [];
  67. };
  68. /*开始时间控制-minute*/
  69. const disStartMinute = h => {
  70. if (endTime) {
  71. if (h < endTime.hour()) return [];
  72. let m = endTime.minute();
  73. return Minutes.slice(m, Minutes.length - 1);
  74. }
  75. return [];
  76. };
  77. /*开始时间控制-second*/
  78. const disStartSeconds = (h, m) => {
  79. if (endTime) {
  80. if (h < endTime.hour()) return [];
  81. if (m < endTime.minute()) return [];
  82. let s = endTime.second();
  83. return Seconds.slice(s, Seconds.length - 1);
  84. }
  85. return [];
  86. };
  87. return (
  88. <Row ref={ref}>
  89. <Col span={12}>
  90. <TimePicker
  91. allowClear={false}
  92. disabled={disabled}
  93. onChange={value => {
  94. setStartTime(value);
  95. triggerChange({ start: value });
  96. }}
  97. value={value.start || moment('00:00:00', 'HH:mm:ss')}
  98. disabledHours={disStartHouse}
  99. disabledMinutes={disStartMinute}
  100. disabledSeconds={disStartSeconds}
  101. />
  102. </Col>
  103. <Col span={12}>
  104. <TimePicker
  105. allowClear={false}
  106. disabled={disabled}
  107. onChange={value => {
  108. setEndTime(value);
  109. triggerChange({ end: value });
  110. }}
  111. value={value.end || moment('23:59:59', 'HH:mm:ss')}
  112. disabledHours={disEndHouse}
  113. disabledMinutes={disEndMinute}
  114. disabledSeconds={disEndSeconds}
  115. />
  116. </Col>
  117. </Row>
  118. );
  119. };
  120. export default forwardRef(TimePickerRange);

出处链接:https://juejin.im/post/5d23e4fc6fb9a07edf2769ce

Antd使用timePicker封装时间范围选择器(React hook版)的更多相关文章

  1. AntD使用timePiacker封装时间范围选择器(React hook版)

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  2. 使用React Hook后的一些体会

    一.前言 距离React Hook发布已经有一段时间了,笔者在之前也一直在等待机会来尝试一下Hook,这个尝试不是像文档中介绍的可以先在已有项目中的小组件和新组件上尝试,而是尝试用Hook的方式构建整 ...

  3. React Hook:使用 useEffect

    React Hook:使用 useEffect 一.描述 二.需要清理的副作用 1.在 class 组件中 2.使用 effect Hook 的示例 1.useEffect 做了什么? 2.为什么在组 ...

  4. React Hook 入门使用

    React Hook 是什么 1.没有比官网说的更好的 HOOK 1. React Hook 官方 2. 用我们自己的话说,它是一个钩子函数,用来处理组件间的状态的一个方法,暂时理解为一个高阶函数吧. ...

  5. [React] Detect user activity with a custom useIdle React Hook

    If the user hasn't used your application for a few minutes, you may want to log them out of the appl ...

  6. React Hook 学习

    1.官方文档 https://react.docschina.org/docs/hooks-intro.html 2.阮一峰 reactHook http://www.ruanyifeng.com/b ...

  7. GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频)

    GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频) GraphQL + React Apoll ...

  8. GraphQL + React Apollo + React Hook 大型项目实战(32 个视频)

    GraphQL + React Apollo + React Hook 大型项目实战(32 个视频) GraphQL + React Apollo + React Hook 大型项目实战 #1 介绍「 ...

  9. React Hook上车

    React Hook 是 v16.8 的新功能,自诞生以来,受到广泛的好评,在 React 版本更新中具有里程碑的意义.现在都2020年了,再不上车 React Hook 就真的 out 了... H ...

随机推荐

  1. 异步FIFO总结+Verilog实现

    异步FIFO简介 异步FIFO(First In First Out)可以很好解决多比特数据跨时钟域的数据传输与同步问题.异步FIFO的作用就像一个蓄水池,用于调节上下游水量. FIFO FIFO是一 ...

  2. CF493A Vasya and Football 题解

    Content 有两个球队在踢足球,现在给出一些足球运动员被黄牌或红牌警告的时间,求每个队员第一次被红牌警告的时间. 注意:根据足球比赛规则,两张黄牌自动换成一张红牌. 数据范围:比赛时间 \(90\ ...

  3. CF749B Parallelogram is Back 题解

    Content 给出平行四边形的三个顶点 \((x_1,y_1),(x_2,y_2),(x_3,y_3)\),求出所有可能的第四个顶点. 数据范围:\(\forall i\in[1,3],-1000\ ...

  4. CF1427A Avoiding Zero 题解

    Content 请将一个长度为 \(n\) 的数列 \(A\) 重新排序,使得这个数列所有的前缀和 \(\neq 0\),或者证明没有这样的方案. 数据范围:\(t\) 组数据,\(1\leqslan ...

  5. CF20C Dijkstra? 题解

    Content 给定一张 \(n\) 个点 \(m\) 条边的无向图,请判断是否有一条可行的从 \(1\) 到 \(n\) 的路径,有的话输出长度最短的,没有的话输出 -1. 数据范围:\(2\leq ...

  6. ElasticSearch 使用

    一.索引操作 --------------------------------- 创建索引(PUT) PUT /索引名 curl -X PUT http://10.20.20.214:9200/sho ...

  7. Linux使用docker安装Jenkins 并进行jar包发布

    拉取镜像 docker pull jenkins/jenkins:lts 创建docker-compose.yml 文件 (主要习惯 也可以不用这种方式)  Linux安装docker-compose ...

  8. qt creator设置默认输出目录

    note creator version : 4.13.1 敲黑板,一定要先配置好 Qt creator的default build directory , 再创建项目,最后再编译 敲黑板,一定要先配 ...

  9. 【LeetCode】370. Range Addition 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 只修改区间起终点 日期 题目地址:https://le ...

  10. 【LeetCode】252. Meeting Rooms 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 排序 日期 题目地址:https://leetcode ...