反应取出时间

用于您反应应用的取时器组件 .

演示

你可以去检查 演示。 。 。 .

开始

安装

$ npm install --save @ashwinthomas/react-time-picker-dropdown

使用量

import TimePicker from '@ashwinthomas/react-time-picker-dropdown';

render() {
    <TimePicker
        defaultValue="10:10:00 am"
        useTwelveHourFormat={true}
        onTimeChange={handleTimeChange}        
    />
}

类型脚本

包括类型定义。 道具类型导出为 TimePickerProps数字 :

import TimePicker, { type TimePickerProps } from '@ashwinthomas/react-time-picker-dropdown';

const handleTimeChange: TimePickerProps['onTimeChange'] = (value) => {
    // value is a string like "10 : 10 : 00 am", or null
};

从1.0.x升级

1.1.0 保持同样的道具,进口和输出格式. 显著变化 :

• 当您点击拾取器外时, 滴入和关闭, 与点击背景相同 .
• 未添加时间, 例如 9:5:0 价值观被接受 onTimeChange 总是使用文档 hh : mm : ss 格式 (1.0.x) 可报告额外空格, 例如 . "07 : 08 : 09 pm") (中文(简体) ).
• 确定按钮不再提交周围 <form>。 。 。 .
• 内出错 onTimeChange 或者说 onInputChange 已登录 console.error 而不是被无声地忽略.
• 部件是标记的 'use client',因此可以直接从React Server组件(如Next.js App Router)导入.

用户指南

时间选择器

显示输入字段,同时显示下拉时间。 输入焦点时会打开下拉. 它在 Enter 、 Escape 、 OK 按钮、 时钟图标 或拾取器外单击时, 输入选择并关闭 .

转至的值 onTimeChange 财务报告和审定财务报表 onInputChange 格式化为 hh : mm : ss (或 hh : mm : ss am (以12小时格式).

道具