تقویم (Calendar)

کامپوننت تقویم با پشتیبانی پیش‌فرض از تقویم شمسی (جلالی) و حالت RTL. بر اساس react-day-picker ساخته شده است.

نصب (Installation)

1npx @quark-lab/rad-ui add calendar

نمونه‌ها (Examples)

استفاده پایه (Basic Usage)

ساده‌ترین حالت استفاده از تقویم با انتخاب تک‌تاریخ.

فروردین ۱۴۰۵
مشاهده کد
1import * as React from "react";
2import { Calendar } from "@/components/ui/calendar";
3
4export default function BasicCalendar() {
5  const [date, setDate] = React.useState<Date | undefined>(new Date());
6
7  return (
8    <Calendar
9      mode="single"
10      selected={date}
11      onSelect={setDate}
12      className="rounded-lg border border-border"
13    />
14  );
15}

انتخاب بازه (Range Selection)

انتخاب بازه تاریخی با نمایش دو ماه.

فروردین ۱۴۰۵
اردیبهشت ۱۴۰۵
مشاهده کد
1import * as React from "react";
2import { addDays } from "date-fns";
3import type { DateRange } from "react-day-picker";
4import { Calendar } from "@/components/ui/calendar";
5
6export default function RangeCalendar() {
7  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
8    from: new Date(),
9    to: addDays(new Date(), 7),
10  });
11
12  return (
13    <Calendar
14      mode="range"
15      defaultMonth={dateRange?.from}
16      selected={dateRange}
17      onSelect={setDateRange}
18      numberOfMonths={2}
19      className="rounded-lg border border-border"
20    />
21  );
22}

انتخابگر ماه و سال (Month & Year Dropdown)

نمایش منوی کشویی برای انتخاب سریع ماه و سال.

فروردین ۱۴۰۵
مشاهده کد
1import * as React from "react";
2import { Calendar } from "@/components/ui/calendar";
3
4export default function DropdownCaptionCalendar() {
5  const [date, setDate] = React.useState<Date | undefined>(new Date());
6
7  return (
8    <Calendar
9      mode="single"
10      selected={date}
11      onSelect={setDate}
12      captionLayout="dropdown"
13      className="rounded-lg border border-border"
14    />
15  );
16}

مرجع API (API Reference)

Calendar

پراپ‌های کامپوننت تقویم.

پراپ (Prop)نوع (Type)پیش‌فرض (Default)توضیحات (Description)
mode"single" | "range" | "multiple"-حالت انتخاب تاریخ
selectedDate | DateRange | Date[]undefinedتاریخ(های) انتخاب‌شده
onSelect(date: Date | DateRange | Date[]) => void-تابع رویداد انتخاب تاریخ
localeLocalefaIRزبان و محلی‌سازی تقویم (پیش‌فرض: فارسی)
dir"rtl" | "ltr""rtl"جهت نمایش تقویم
captionLayout"label" | "dropdown""label"نوع نمایش عنوان ماه و سال
showOutsideDaysbooleantrueنمایش روزهای خارج از ماه جاری
numberOfMonthsnumber1تعداد ماه‌های نمایش‌داده‌شده
disabledDate[] | ((date: Date) => boolean)undefinedتاریخ‌هایی که غیرفعال هستند
classNamestring-کلاس‌های CSS سفارشی

دسترسی‌پذیری (Accessibility)

کیبورد (Keyboard)

  • ArrowLeft / ArrowRight - حرکت بین روزها
  • ArrowUp / ArrowDown - حرکت بین هفته‌ها
  • Enter یا Space - انتخاب تاریخ
  • Home / End - رفتن به اول / آخر هفته
  • PageUp / PageDown - حرکت بین ماه‌ها

ARIA

تقویم از نقش grid استفاده می‌کند و هر روز دارای نقش gridcell است. روزهای غیرفعال با aria-disabled مشخص می‌شوند.

بهترین شیوه‌ها (Best Practices)

تقویم شمسی (Persian Calendar)

تقویم به‌صورت پیش‌فرض از تقویم شمسی (جلالی) استفاده می‌کند. برای تغییر به تقویم میلادی، می‌توانید import را از react-day-picker/persian به react-day-picker تغییر دهید.

استفاده با پاپ‌اور (With Popover)

برای ساخت یک انتخابگر تاریخ (Date Picker)، تقویم را با کامپوننت پاپ‌اور ترکیب کنید. صفحه انتخابگر تاریخ را ببینید.

انتخاب بازه (Range Selection)

از mode="range" برای انتخاب بازه تاریخی استفاده کنید. برای نمایش بهتر، تعداد ماه‌ها را به ۲ تنظیم کنید.

نحوه استفاده (Usage)

1import * as React from "react";
2import { Calendar } from "@/components/ui/calendar";
3
4export default function CalendarUsage() {
5  const [date, setDate] = React.useState<Date | undefined>(new Date());
6
7  return (
8    <Calendar
9      mode="single"
10      selected={date}
11      onSelect={setDate}
12      className="rounded-lg border border-border"
13    />
14  );
15}

مثال‌های پیشرفته (Advanced Examples)

غیرفعال کردن تاریخ‌ها (Disabled Dates)

می‌توانید تاریخ‌های خاصی را غیرفعال کنید.

تاریخ‌های آینده و قبل از ۱۹۰۰ غیرفعال هستند.
مشاهده کد
1import { Calendar } from "@/components/ui/calendar";
2
3<Calendar
4  mode="single"
5  disabled={(date) =>
6    date > new Date() || date < new Date("1900-01-01")
7  }
8  className="rounded-lg border border-border"
9/>

تقویم میلادی (Gregorian Calendar)

برای استفاده از تقویم میلادی، import را تغییر دهید.

تقویم میلادی با تغییر یک خط import فعال می‌شود.
مشاهده کد
1// در فایل calendar.tsx این خط را تغییر دهید:
2// قبل:
3import { DayPicker } from "react-day-picker/persian";
4// بعد:
5import { DayPicker } from "react-day-picker";