انتخاب ساعت

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" هست چون ساعت:دقیقه در متن فارسی هم از چپ خوانده میشه، ولی برچسب‌ها فارسی می‌مونن.