xy-time-select

基于 React Hooks 的时间选择器组件


Keywords
react, react-component, xy-time-select
License
MIT
Install
npm install xy-time-select@0.2.0

Documentation

IE Chrome Firefox Opera Safari
IE 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

NPM version node version npm download

xy-time-select

xy-time-select

时间选择器组件组件, 可从下拉列表选择时间,也可以直接输入

安装

# yarn
yarn add xy-time-select

使用例子

import React from "react";
import ReactDOM from "react-dom";
import TimeSelect from "xy-time-select";
ReactDOM.render(<TimeSelect />, container);

API

属性 说明 类型 默认值
disabled 是否禁用 boolean false
value 输入框值, 比如 01:00 string
defaultValue 输入框默认值 string
placeholder 占位符文本 string
autoFocus 自动焦点 boolean
onChange 输入框 change 事件 (value: string) => void
popupClassName 弹出内容类名 string
stretch 下拉列表是否宽度与输入框宽度对齐 boolean true
backfill 是否键盘输入完再回填 boolean false
delay 防抖毫秒 number 200
dataSource 数据源 OptionConfig[] / string[] / React.ReactNode
customItem 自定义渲染 (props: CustomItemProps) => JSX.Element
onChange 改变回调 (value: string) => void
start 开始时间,时间选择器开始时间范围, 比如 09:00 string "00:00"
end 结束时间,时间选择器开始时间范围, 比如 18:00 string "23:59"
step 间隔时间 string "00:30"
min 最小可选时间 string
max 最大可选时间 string

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-time-select is released under the MIT license.