زمان نسبی (RelativeTime)
زمان انتشار یا پخش به‌شکل «3 ساعت پیش»، با تاریخ کامل در راهنمای شناور و تقویم جلالی
معرفی
RelativeTime یک زمان را در عنصر time نمایش می‌دهد: برچسب کوتاه، مقدار ماشین‌خوان در dateTime و تاریخ و ساعت کامل
در راهنمای شناور. در حالت پیش‌فرض (auto) تا هفت روز زمان نسبی است («3 ساعت پیش») و بعد از آن تاریخ («23 شهریور»؛ سال
فقط وقتی سال جاری نباشد). فارسی با تقویم جلالی و عربی و انگلیسی با تقویم میلادی.
چه زمانی استفاده کنیم:
- زمان انتشار پست یا نظر، زمان پخش یک بخش تلویزیونی، زمان آخرین به‌روزرسانی یک مورد.
چه زمانی استفاده نکنیم:
- برای انتخاب تاریخ: از
DatePickerاستفاده کنید. - برای بازهٔ زمانی گزارش: بازه را با قالب‌بندی تاریخ کامل بنویسید.
جزء پایه، نه کارت پست
این جزء یکی از اجزای پایهٔ @partodata/ui/social است که Post، Comment
و Account روی آن‌ها ساخته شده‌اند. پست، نظر یا حساب را با همان کامپوننت‌ها نمایش دهید و فهرست
آن‌ها را با EntityCollection؛ کارت یا ردیف را خودتان از اجزای پایه نسازید. جدول انتخاب
در مدل محتوای اجتماعی است.
استفاده
import { RelativeTime, type SocialPost } from '@partodata/ui/social'
export function Published({ post }: { post: SocialPost }) {
return <RelativeTime value={post.publishedAt} className="text-meta" />
}حالت‌ها و انواع
format:auto(پیش‌فرض: نسبی تا یک هفته، سپس تاریخ)،date،datetimeوtime(همیشه مطلق). حالت «همیشه نسبی» وجود ندارد: زمان انتشاری که از یک هفته گذشته، تاریخ است.- زمان نامعتبر، ناموجود یا صفر (مقدار جایگزین «نامعلوم» در بسیاری از APIها، یعنی 1348) چیزی نمایش نمی‌دهد.
- زمانی که تا یک دقیقه در آینده باشد (اختلاف ساعت) «همین الان» است؛ بیشتر از آن تاریخ نمایش داده می‌شود.
- برچسب نسبی با ساعت بیننده به‌روز می‌ماند: همهٔ نمونه‌های صفحه یک ساعت مشترک 30 ثانیه‌ای دارند.
nowخروجی را ثابت می‌کند (آزمون، تصویر مرجع، گزارشی که در زمان ساختش ثابت می‌ماند).
رندر سرور و منطقهٔ زمانی
ساعت سرور ساعت بیننده نیست. به همین دلیل بدون now، سرور (و مرورگر هنگام hydration) تاریخ را می‌نویسد و پس از آن برچسب
با ساعت مرورگر نسبی می‌شود؛ صفحهٔ کش‌شده ساعت‌ها بعد «5 دقیقه پیش» قدیمی نشان نمی‌دهد. تاریخ و ساعت همیشه در timeZone
نوشته می‌شوند (پیش‌فرض Asia/Tehran)، نه در منطقهٔ زمانی فرایند؛ پس سرور UTC و مرورگر تهران یک روز و یک ساعت را نشان
می‌دهند. اگر محصول منطقهٔ زمانی کاربر را می‌داند، آن را بدهید.
راهنمای استفاده
بکنید
- زمان را از مدل (
publishedAt) بدهید؛ ثانیه و میلی‌ثانیه در مبدل یکسان شده‌اند. - در تصویرهای مرجع و آزمون‌ها
nowرا ثابت کنید. - برای کاربرانی بیرون از منطقهٔ زمانی تهران،
timeZoneرا بدهید.
نکنید
- زمان نسبی را با تابع خودتان نسازید؛ برچسب‌ها و ارقام در همهٔ محصولات باید یکسان باشند.
- تاریخ را با
new Date().toLocaleString()یا منطقهٔ زمانی سرور ننویسید؛ سرور UTC ساعت و گاهی روز را اشتباه نشان می‌دهد.
Props
دسترسی‌پذیری
- عنصر
timeباdateTimeاستاندارد است؛ تاریخ و ساعت کامل درtitleمی‌آید. - به‌روزرسانی برچسب اعلام نمی‌شود (منطقهٔ زنده نیست)؛ صفحه‌خوان هنگام رسیدن به آن مقدار روز را می‌خواند.
- ارقام در DOM لاتین‌اند و قلم آن‌ها را فارسی نمایش می‌دهد؛ در عربی ارقام عربی نوشته می‌شوند.
کامپوننت‌های مرتبط
- Handle و PlatformMark — دیگر اجزای سرِ پست.
- DatePicker — انتخاب تاریخ با همان تقویم جلالی.