# @ashwinthomas/react-time-picker-dropdown 中文文档

规范地址：https://npmcn.com/package/%40ashwinthomas/react-time-picker-dropdown/

版本：1\.1\.0
npm 元数据更新时间：2026-09-26T14:46:34.968Z
中文译文更新时间：2026-11-06T23:20:15.172Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ashwinthomas/react-time-picker-dropdown
原文对照：https://npmcn.com/package/%40ashwinthomas/react-time-picker-dropdown/?lang=original
项目主页：https://github.com/ashwinthomas5458/react-time-picker-dropdown#readme
源码仓库：https://github.com/ashwinthomas5458/react-time-picker-dropdown

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：26 kB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2022-10-01T11:33:26.413Z
- 最新版本发布：2026-09-26T14:46:34.824Z
- 近 30 天下载量：2254（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：7（近 12 个月 1 个）

## 中文简介

反应的取时器 Webapp

## 安装

```sh
npm install @ashwinthomas/react-time-picker-dropdown
```

也可以使用：`pnpm add @ashwinthomas/react-time-picker-dropdown`、`yarn add @ashwinthomas/react-time-picker-dropdown`、`bun add @ashwinthomas/react-time-picker-dropdown`

## README

# 反应取出时间

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

## 演示

你可以去检查 [演示](https://timepicker.ashwinthomas.in/)。 。 。 .

## 开始

### 安装

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

### 使用量

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

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

### 类型脚本

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

```tsx
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小时格式).

### 道具

| 专利名称 | 说明 | 默认值 | 示例数值 |
| --- | --- | --- | --- |
| 默认值 | 设置默认输入值, 支持格式 `hh:mm:ss a` 财务报告和审定财务报表 `hh:mm:ss` | `null` | `"10:10:00 am"` |
| 占位符 | 可用于设置输入占位符 | `"00 : 00 : 00"` | `"hh : mm : ss"` |
| 使用十二小时格式 | 使用 `useTwelveHourFormat` 24/12小时格式间切换的道具 | `false` | `true` |
| 时间变化 | 当用户选择时间时, 函数会调用 。 (回归) `null` 如果输入值无效。 ) | 无 | (值) QQaalert (“ 选择的时间是 ” , 值) |
| 输入变化 | 使用下拉方式更改拾取器值时调用函数 | 无 | (值) QQALERT (“ 播放时间已更改 ” , 值) |
| 显示关闭Icon | `showCloseIcon` 可用于切换接近的图标可见度 | `true` | `true` |
| 显示时钟 | `showClockIcon` 可用于切换时钟图标可见度 | `true` | `true` |
| 允许反投 | `allowBackdrop` 可用于切换背景 | `false` | `false` |

## 常见问题

### @ashwinthomas/react-time-picker-dropdown 是什么？

反应的取时器 Webapp

### 如何安装 @ashwinthomas/react-time-picker-dropdown？

在项目目录运行 npm install @ashwinthomas/react-time-picker-dropdown，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ashwinthomas/react-time-picker-dropdown 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ashwinthomas/react-time-picker-dropdown 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ashwinthomas/react-time-picker-dropdown 可以商用吗？

@ashwinthomas/react-time-picker-dropdown 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ashwinthomas/react-time-picker-dropdown 的下载量有多少？

根据 npm 官方下载统计，@ashwinthomas/react-time-picker-dropdown 在 2026/10/07 – 2026/11/05 这 30 天内被下载 2,254 次，日均约 75 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ashwinthomas/react-time-picker-dropdown 还在维护吗？

最新版本 1\.1\.0 发布于 2026/09/26（1 个月前）；至今共发布 7 个版本，其中过去 12 个月发布了 1 个；首次发布于 2022/10/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。