انتخاب ساعت
time-pickerکامپوننتانتخاب ساعت ۲۴ساعته با دو بخش تایپی و اعداد فارسی، کلیدهای بالا و پایین برای تغییر و فهرست ساعت و دقیقه برای ماوس.
:
از ۰۸:۰۰ تا ۲۰:۰۰
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add time-pickerنصب دستی
محتوای تب «کد» را در
components/ui/time-picker.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { TimePicker } from "@/components/ui/time-picker"23<TimePicker step={15} min="09:00" max="18:00" onChange={(t) => setTime(t)} /> // "14:30"پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| value | string | null | - | «HH:mm» با رقم لاتین، مثل "14:30". |
| step | 1 | 5 | 10 | 15 | 30 | 5 | گام ستون دقیقه. تایپ دستی هر دقیقهای را میپذیره. |
| min / max | string | - | بازهی مجاز. گزینههای بیرون از آن غیرفعال میشن و مقدار تایپی بیرون از آن خطا میگیره. |
نکتههای راستچین
- ایران ساعت را ۲۴ساعته مینویسه و صبح و عصر نداره.
- فیلد dir="ltr" هست چون ساعت:دقیقه در متن فارسی هم از چپ خوانده میشه، ولی برچسبها فارسی میمونن.