# @bitbaum/whenkit 中文文档

规范地址：https://npmcn.com/package/%40bitbaum/whenkit/

版本：0\.3\.3
npm 元数据更新时间：2026-10-28T07:00:13.612Z
中文译文更新时间：2026-11-08T04:06:38.457Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40bitbaum/whenkit
原文对照：https://npmcn.com/package/%40bitbaum/whenkit/?lang=original
项目主页：https://github.com/bitbaum/whenkit#readme
源码仓库：https://github.com/bitbaum/whenkit

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

- 包体积（解压后）：101 kB，48 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：0 个
- peer 依赖：react \>=18
- 首次发布：2026-10-26T09:30:28.247Z
- 最新版本发布：2026-10-28T07:00:13.092Z
- 近 30 天下载量：4964（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 3 个）

## 中文简介

日期和时间 人们可以不打字来选择:日取芯片,时间取芯片,长度取芯片,一个可读的日期场在本地取取器上方,以及一个能解决{startsAt, endsAt}在提供者所在区域的低平平订取请求.

## 安装

```sh
npm install @bitbaum/whenkit
```

也可以使用：`pnpm add @bitbaum/whenkit`、`yarn add @bitbaum/whenkit`、`bun add @bitbaum/whenkit`

## README

# @ bitbaum/ 当 kit 时

日期和时间,人们可以选择 **不输入**日用芯片 时间芯片, 长度芯片 本地取取器上可读的日期字段和预订 请求决定 `{ startsAt, endsAt }` 在提供者的时区.

```bash
pnpm add @bitbaum/whenkit
```

```tsx
import { BookingRequestPicker } from "@bitbaum/whenkit/react";
import { resolveRequest, todayIn, type BookingChoice } from "@bitbaum/whenkit";
import "@bitbaum/whenkit/styles.css";

const [choice, setChoice] = useState<BookingChoice | null>(null);

<BookingRequestPicker
  unit="hour" // "day" for things rented by the day — never asks for a time
  zone="Europe/Zurich" // the zone of the thing being booked
  hours={{ start: "09:00", end: "18:00" }}
  openWeekdays={[1, 2, 3, 4, 5]}
  lengths={[60]} // optional: one value = fixed duration, no length row
  value={choice}
  onChange={setChoice}
/>;

// On send:
const slot = resolveRequest(choice, { zone: "Europe/Zurich", today: todayIn("Europe/Zurich") });
// → { startsAt, endsAt, flexible }  (null while incomplete)
```

## 为什么

舰队有120个生地 `<input type="date|time|datetime-local">` 字段数 重现。 预订对话框要求开始和结束日期——两个字段 显示浏览器的语言占位符( e)`tt.mm.jjjj, --:--`)——为工作室 白天租来的 三项决定取代:

1.  **列表决定了形状.** 白天租的 挑日,没有时间. 小时 选择一天 然后开始 **营业时间以内**,然后是一个 长度. **没有人打一个结束时间.** 灵活----最多为首选日; 提供者提出时间档.
2.  **普通案子的芯片.** 接下来的两周,作为可挖掘的日子("今天", "明天","Fri 10",加上"另一个日期..." 对于任何进一步外出.
3.  **留取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地.** 在电话上,平台 捡取者是最好的. `DateField` 保持真实 `<input>` (键盘, 自动填充, a11y)透明, 显示为“ Sat, 11 October... ” 14: 00,打开取水器.

## 替换您已有的日期输入

`DateInput` 是一个滴入 `<input type="date">` 编号 : `type="datetime-local"`数字 : 同样的道具,同样的 `onChange(event)`,所以一个呼叫网站会改变它的标记,没有 还有.

```tsx
import { DateInput } from "@bitbaum/whenkit/react";
import "@bitbaum/whenkit/styles.css";

// before: <input type="date" value={due} onChange={(e) => setDue(e.target.value)} className="input" />
<DateInput value={due} onChange={(e) => setDue(e.target.value)} className="input" />;
```

属于你的 `className` 在可见的盒子上着陆,它获胜: 当kit的相貌坐着 内 `@layer base`在Tailwind公用事业和普通软件CSS之下。 真正的输入 留在顶部,隐形, 所以拾取器,键盘输入,自动填充, `required` 验证和格式提交都继续工作。 控制(`value`)或(或) 不受管制(`defaultValue` + 键 `name`,例如服务器动作表)。 空无一人 状态和工作日/月数 `<html lang>` (或通过) `locale` 编号 : `placeholder`) (中文(简体) ).

### 移动回转

```bash
# one re-export per app: components/ui/date-input.tsx
#   "use client"; import "@bitbaum/whenkit/styles.css"; export { DateInput } from "@bitbaum/whenkit/react";
node node_modules/@bitbaum/whenkit/scripts/migrate-date-inputs.mjs src --import "@/components/ui/date-input"          # dry run
node node_modules/@bitbaum/whenkit/scripts/migrate-date-inputs.mjs src --import "@/components/ui/date-input" --write  # apply
```

它修改了标记,并添加了一个导入——没有其他的输入——并列出它会做什么 不猜测( 扩展道具, 动态) `type={…}`) (中文(简体) ). `--from Input` 转换一个 app 自己的包装组件, 而不是原始的 `<input>`测试的难度 固定装置(`test/codemod.test.js`); 第二次运行不会改变任何东西.

## 执行规则

-   日期为 `YYYY-MM-DD`时间 `HH:MM` - 墙上弦。 他们变成了一个 在一个地方, `zonedToUtc`,在提供者区域(DST漏洞) 页:1. `new Date("2026-10-11")` 漂流不会发生.
-   "今"是供养者之所取也`todayIn(zone)`),开始时间已经 不提供过去.
-   每个芯片和天都是44px目标;日期输入为16px(iOS缩放) 在那下面;白昼会卷起内部的卷轴,从不卷起.
-   芯片行是真实的收音机组(窄键,一个制表站);日按钮 带满口的标签("明天,10月9日星期五").
-   字从来 `Intl` ("Morgen","demain")- 推翻了少数句子 通过 `words`。 。 。 .

## API 密码

**核心** (单位:千美元)`@bitbaum/whenkit`无反应 : `todayIn`, (中文(简体) ), `nowIn`, (中文(简体) ), `addDays`, (中文(简体) ), `daysBetween`, (中文(简体) ), `nextDays`, (中文(简体) ), `weekday`, (中文(简体) ), `zonedToUtc`, (中文(简体) ), `isISODate`, (中文(简体) ), `isWallTime`, (中文(简体) ), `dayLabel`, (中文(简体) ), `formatTime`, (中文(简体) ), `formatLength`, (中文(简体) ), `timeSlots`, (中文(简体) ), `lengthOptions`, (中文(简体) ), `DEFAULT_HOURS`, (中文(简体) ), `isComplete`, (中文(简体) ), `resolveRequest`, (中文(简体) ), `describeRequest`, (中文(简体) ), `type BookingChoice`。 。 。 .

**反应** (单位:千美元)`@bitbaum/whenkit/react`: `BookingRequestPicker`, (中文(简体) ), `DayStrip`, (中文(简体) ), `ChipGroup`, (中文(简体) ), `DateInput`, (中文(简体) ), `DateField` 联合国 `DateInput` )),带有自己的标签.

**听着** (单位:千美元)`@bitbaum/whenkit/styles.css`: `--wk-*` 变量默认为 `@bitbaum/design-tokens`; 设置一次, 以匹配其他应用程序 .

## 开发

```bash
pnpm install
pnpm run verify   # format, lint, types, build, unit + render tests, browser checks
```

`dist/` 承诺如此 `github:` 安装不需要构建步骤; CI 失败 和源头不同 浏览器检查( E)`test/browser.mjs`(中文(简体) ) 在1280px和390px驱动Chromium, 轻而易举地和黑暗地, 并抽取一个预订端到 结束.

## 无

尚未在 npm 上——首批发布需要账户所有者的密码(参见 `.github/workflows/publish.yml`) (中文(简体) ). 在此之前从上面的标记安装.

## 常见问题

### @bitbaum/whenkit 是什么？

日期和时间 人们可以不打字来选择:日取芯片,时间取芯片,长度取芯片,一个可读的日期场在本地取取器上方,以及一个能解决\{startsAt, endsAt\}在提供者所在区域的低平平订取请求\.

### 如何安装 @bitbaum/whenkit？

在项目目录运行 npm install @bitbaum/whenkit，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bitbaum/whenkit 支持 TypeScript 吗？

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

### @bitbaum/whenkit 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @bitbaum/whenkit 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @bitbaum/whenkit 可以商用吗？

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

### @bitbaum/whenkit 的下载量有多少？

根据 npm 官方下载统计，@bitbaum/whenkit 在 2026/10/08 – 2026/11/06 这 30 天内被下载 4,964 次，日均约 165 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bitbaum/whenkit 还在维护吗？

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

