1.4.0 • Published 2 years ago
sunny-time v1.4.0
nav: title: 时间组件
path: /components
TimePicker 时间选择框
当用户需要输入一个时间,可以点击标准输入框,弹出时间面板进行选择。
主要区别于 antd 的一个区别就是 antd 时间选择是从 00:00 - 23:59, 而在一些项目中要求使用的是 00:01 - 24:00
代码演示
基本
/**
* title: 基本
* desc: 点击`TimePicker`然后可以在浮层中选择或者输入某一时间。
*/
import React from 'react';
import { TimePicker } from 'haols-test';
export default () => {
return <TimePicker />;
};
/**
* title: defaultValue
* desc: 默认的defaultValue
*/
import React from 'react';
import { TimePicker } from 'haols-test';
export default () => {
return <TimePicker defaultValue={'12:05'} />;
};
受控组件
/**
* title: 受控组件
* desc: 其中`value` 和 `onChange` 需要配合使用。
*/
import React, { useState } from 'react';
import { TimePicker } from 'haols-test';
import type { Moment } from 'moment';
export default () => {
const [value, setValue] = useState<string>('12:00');
return (
<TimePicker
value={value}
onChange={(timeString: string) => {
setValue(timeString);
}}
/>
);
};
禁用
/**
* title: 禁用
* desc: 禁用时间选择。
*/
import React, { useState } from 'react';
import { TimePicker } from 'haols-test';
import type { Moment } from 'moment';
export default () => {
const [value, setValue] = useState<string>('12:00');
return (
<TimePicker
value={value}
disabled
onChange={(_time: Moment, timeString: string) => {
setValue(timeString);
}}
/>
);
};
步长选项
/**
* title: 步长选项
* desc: 可以使用 `hourStep` `minuteStep` 按步长展示可选的时分秒。
*/
import React, { useState } from 'react';
import { TimePicker } from 'haols-test';
import type { Moment } from 'moment';
export default () => {
const [value, setValue] = useState<string>('12:00');
return (
<TimePicker
value={value}
hourStep={2}
minuteStep={5}
onChange={(_time: Moment, timeString: string) => {
setValue(timeString);
}}
/>
);
};
禁止选择部分
/**
* title: 禁止选择部分
* desc: 可以使用 `disabledHours` `disabledMinutes` 禁止选择部分选项
*/
import React, { useState } from 'react';
import { TimePicker } from 'haols-test';
import type { Moment } from 'moment';
export default () => {
const [value, setValue] = useState<string>('12:00');
return (
<TimePicker
value={value}
disabledHours={() => {
return [0, 1, 2];
}}
disabledMinutes={(selectedHour: number | null) => {
if (selectedHour === 5 || selectedHour === 7 || selectedHour === 9) {
return [30, 15];
}
}}
minuteStep={15}
onChange={(_time: Moment, timeString: string) => {
setValue(timeString);
}}
/>
);
};
API
<TimePicker />
| 参数 | 说明 | 类型 | 默认值 |
| :---- | :----: | :----: | :----: |
| className | 赋值给整个组件的 className | string | - |
| value | 当前时间 | string | null | null |
| width | 整个 TimePicker 的宽度 | number | 120 |
| disabled | 禁用全部操作 | boolean | false |
| disabledHours | 禁止选择部分小时选项 | function(): void | - |
| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour: number): void | - |
| minuteStep | 分钟选项间隔 | number | 1 |
| hourStep | 小时选项间隔 | number | 1 |
| onChange | 时间发生变化的回调 | function(timeString: string): void | - |
FAQ
TODO:
一周:
- 缺少组件内校验
- 缺少 defaultValue
二周:
- 弹出收起样式时间过渡
- '此时'功能有待优化(存在步长时选择此时)
三周:
- 时间选完以后会回到初始位置,体验不好
- 增加秒选项(这个可能需要的时间更长一些)
后续有思路优化:
- 时间复选多组件校验
存在不点击确定但是却展示时间
x 修改
THANKS:
@waynelee @lv
1.4.0
2 years ago