‏DayPicker: کامپوننت تقویم و انتخاب تاریخ برای ری‌اکت

DayPicker یه کامپوننت ری‌اکته که ساخت date picker و تقویم تعاملی رو توی پروژه‌های وب خیلی ساده می‌کنه. این کتابخونه با TypeScript نوشته شده، هم CommonJS و هم ESM رو ساپورت می‌کنه، و برای مدیریت و فرمت‌بندی تاریخ از کتابخونه محبوب date-fns استفاده می‌کنه.

یکی از نقاط قوت DayPicker اینه که طراحی مینیمال داره و می‌شه با هر فریم‌ورک CSS یا استایل دلخواه، ظاهرش رو کاملاً شخصی‌سازی کرد. علاوه بر این، کامپوننت‌های داخلیش قابل جایگزینی هستن و می‌شه المان‌های رندر شده رو گسترش داد.

از نظر انتخاب تاریخ، DayPicker حالت‌های مختلفی رو پشتیبانی می‌کنه: انتخاب تک روز، چند روز، بازه زمانی و حتی حالت‌های کاملاً سفارشی. ادغامش با فیلدهای input هم ساده‌ست.

یه نمونه پایه از استفاده DayPicker اینه:

import { DayPicker } from "@daypicker/react";
import "@daypicker/react/style.css";

function MyDatePicker() {
  const [selected, setSelected] = useState<Date>();
  return (
    <DayPicker
      animate
      mode="single"
      selected={selected}
      onSelect={setSelected}
    />
  );
}

یکی از ویژگی‌های جالب DayPicker پشتیبانی از تقویم‌های مختلفه. علاوه بر میلادی و ISO 8601، از تقویم فارسی (شمسی)، هجری، بودایی (تایلندی)، اتیوپیایی، عبری و تقویم broadcast هم پشتیبانی می‌کنه. این یعنی می‌شه این کامپوننت رو برای پروژه‌های فارسی‌زبان هم به‌راحتی به‌کار برد.

از نظر دسترس‌پذیری هم DayPicker استانداردهای WCAG 2.1 AA رو رعایت می‌کنه، که برای پروژه‌هایی که نیاز به accessibility دارن خیلی مهمه.

نکات کلیدی:

• کامپوننت ری‌اکت برای ساخت date picker و تقویم با TypeScript
• پشتیبانی از حالت‌های single، multiple و range برای انتخاب تاریخ
• پشتیبانی از تقویم فارسی (شمسی)، هجری، عبری و چند تقویم دیگه
• طراحی مینیمال و قابل استایل‌دهی با هر فریم‌ورک CSS
• سازگار با استاندارد دسترس‌پذیری WCAG 2.1 AA
• استفاده از date-fns برای مدیریت تاریخ