@ bitbaum/ 当 kit 时
日期和时间,人们可以选择 不输入日用芯片 时间芯片,
长度芯片 本地取取器上可读的日期字段和预订
请求决定 { startsAt, endsAt } 在提供者的时区.
pnpm add @bitbaum/whenkit
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, --:--)——为工作室
白天租来的 三项决定取代:
- 列表决定了形状. 白天租的 挑日,没有时间. 小时 选择一天 然后开始 营业时间以内,然后是一个 长度. 没有人打一个结束时间. 灵活----最多为首选日; 提供者提出时间档.
- 普通案子的芯片. 接下来的两周,作为可挖掘的日子("今天", "明天","Fri 10",加上"另一个日期..." 对于任何进一步外出.
- 留取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地. 在电话上,平台
捡取者是最好的.
DateField保持真实<input>(键盘, 自动填充, a11y)透明, 显示为“ Sat, 11 October... ” 14: 00,打开取水器.
替换您已有的日期输入
DateInput 是一个滴入 <input type="date"> 编号 : type="datetime-local"数字 :
同样的道具,同样的 onChange(event),所以一个呼叫网站会改变它的标记,没有
还有.
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) (中文(简体) ).
移动回转
# 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; 设置一次, 以匹配其他应用程序 .
开发
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) (中文(简体) ). 在此之前从上面的标记安装.