Ant Design学习——TimePicker
2024-06-02 17:06:59
2021SC@SDUSC
TimePicker时间选择框
输入或选择时间的控件。
当用户需要输入一个时间,可以点击标准输入框,弹出时间面板进行选择。
API
import moment from 'moment';
<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />;
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
allowClear | 是否展示清除按钮 | boolean | true |
autoFocus | 自动获取焦点 | boolean | false |
bordered | 是否有边框 | boolean | true |
className | 选择器类名 | string | - |
clearIcon | 自定义的清除图标 | ReactNode | - |
clearText | 清除按钮的提示文案 | string | clear |
defaultValue | 默认时间 | moment | - |
disabled | 禁用全部操作 | boolean | false |
disabledHours | 禁止选择部分小时选项 | function() | - |
disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | - |
disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | - |
format | 展示的时间格式 | string |
HH:mm:ss
|
getPopupContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | - |
hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
hourStep | 小时选项间隔 | number | 1 |
inputReadOnly | 设置输入框为只读(避免在移动设备上打开虚拟键盘) | boolean | false |
minuteStep | 分钟选项间隔 | number | 1 |
open | 面板是否打开 | boolean | false |
placeholder | 没有值的时候显示的内容 | string | [string, string] |
请选择时间
|
popupClassName | 弹出层类名 | string | - |
popupStyle | 弹出层样式对象 | object | - |
renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - |
secondStep | 秒选项间隔 | number | 1 |
showNow | 面板是否显示“此刻”按钮 | boolean | - |
suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |
use12Hours |
使用 12 小时制,为 true 时 format 默认为 h:mm:ss a
|
boolean | false |
value | 当前时间 | moment | - |
onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | - |
onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - |
RangePicker
属性与 DatePicker
的 RangePicker
相同。还包含以下属性:
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
部分源码
const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker;
可以看出TimePicker与之前提到的DatePicker的关系。
import { Moment } from 'moment';
import * as React from 'react';
import DatePicker from '../date-picker';
import { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
import devWarning from '../_util/devWarning';
引入moment以及datepicker,利用到了上次分析过的日期选择框。
export interface TimePickerLocale {placeholder?: string;rangePlaceholder?: [string, string];
}export interface TimeRangePickerProps extends Omit<RangePickerTimeProps<Moment>, 'picker'> {popupClassName?: string;
}const RangePicker = React.forwardRef<any, TimeRangePickerProps>((props, ref) => (<InternalRangePicker{...props}dropdownClassName={props.popupClassName}picker="time"mode={undefined}ref={ref}/>
));
接口,包含没有值时现实的内容,弹出层样式对象。
随后利用TimeRangePickerProps使用forwardRef函数传递ref至RangePicker。
export interface TimePickerProps extends Omit<PickerTimeProps<Moment>, 'picker'> {addon?: () => React.ReactNode;popupClassName?: string;
}const TimePicker = React.forwardRef<any, TimePickerProps>(({ addon, renderExtraFooter, popupClassName, ...restProps }, ref) => {const internalRenderExtraFooter = React.useMemo(() => {if (renderExtraFooter) {return renderExtraFooter;}if (addon) {devWarning(false,'TimePicker','`addon` is deprecated. Please use `renderExtraFooter` instead.',);return addon;}return undefined;}, [addon, renderExtraFooter]);return (<InternalTimePicker{...restProps}dropdownClassName={popupClassName}mode={undefined}ref={ref}renderExtraFooter={internalRenderExtraFooter}/>);},
);
可以看出此处TimePicker也采用了类似RangePicker的代码结构。
TimePicker.displayName = 'TimePicker';type MergedTimePicker = typeof TimePicker & {RangePicker: typeof RangePicker;
};(TimePicker as MergedTimePicker).RangePicker = RangePicker;export default TimePicker as MergedTimePicker;
将以上的TimePicker与RangePicker类型融合,生成MergedTimePicker,融合的TimePicker,这样可以一并导出以供使用。
Ant Design学习——TimePicker相关推荐
- React开发(138):ant design学习指南之anchor处理
层级处理
- React开发(139):ant design学习指南之下载文件
isIE = () => {if (!!window.ActiveXObject || 'ActiveXObject' in window) {return true;} else {retur ...
- React开发(137):ant design学习指南之form中日期时间处理format时间处理
- React开发(136):ant design学习指南之form中动态form新增删除
- React开发(135):ant design学习指南之form中动态form新增删除
- React开发(134):ant design学习指南之form中getFieldValue
- React开发(133):ant design学习指南之form中input加前缀
- React开发(132):ant design学习指南之form中控制展开和关闭逻辑
- React开发(131):ant design学习指南之form中的resetFields
重置表单值
- React开发(130):ant design学习指南之form中的新城多个表单
最新文章
- 破局!Alan Yuille:深度学习关键在于克服组合爆炸
- struts2学习笔记--使用servletAPI实现ajax的一个小Demo
- #define barrier() __asm__ __volatile__(: : :memory) 中的memory是gcc的东西
- 尝试做了个Chrome浏览器的扩展程序,显示extensions的页面
- 高等数学下-赵立军-北京大学出版社-题解-练习11.3
- mysql断网_断网的情况上如何访问本机的mysql
- H5页面适配iOS、Android和微信
- Vue-cli 项目打包布署(简单清晰)
- 特斯拉入驻天猫卖车了 将连做8天直播
- 组装r730服务器,戴尔poweredge r730服务器配置及系统安装详解教程
- 怎么成为日上会员直邮_放福利啦,免税店现在一件也能直邮,不用出入境、不用出入境、不用找代购...
- 图片随鼠标滚动而任意浮动
- Vulkan入门(9)-渲染和显示.md
- css+javascript模拟OneNote2007Tab标签
- matlab 距平,[转载]基于Matlab软件进行EOF分解、回归趋势分析,并
- vscode插件开发流程
- 【漏洞学习——XSS】TOM邮箱存储型XSS一枚
- 2023蓝牙耳机性价比推荐:高品质蓝牙耳机盘点分享
- 快速搭建淘宝优惠券网站
- Pygame键盘输入和鼠标操作
热门文章
- baidupcsgo安卓_GitHub - orenbek2019/BaiduPCS-Go: 百度网盘客户端 - Go语言编写
- GLSL-Compute Shader
- RSA算法原理及数字签名技术
- 编译原理 语法分析程序
- 简单的文件内容繁简体甄别
- 办公室计算机设备搬迁计划方案,计算机机房整体搬迁方案稿 执行计划.doc
- 快速排序C语言代码+辅助图+注释
- Shottr 免费好用的Mac 截屏软件
- 滚动截屏苹果_苹果超好用的长截图软件—滚动截屏免费分享!
- snipaste滚动截图方法_windows史上最强截图工具 ,有它就够了