تقویم ها

در حال حاضر از تقویم های میلادی ، هجری شمسی ، هجری قمری و هندی در این پکیج پشتبانی میشه.

برای استفاده از هر کدام از این تقویم ها باید پراپرتی calendar رو برابر با یکی از مقادیر زیر قرار بدید:

تقویممقدار
میلادیgregorian
هجری شمسیpersian
هجری قمریarabic
هندیindian

زبان ها

زبان های موجود عبارت اند از : انگلیسی ، فارسی ، عربی و هندی.

همچنین برای استفاده از هر کدام از این زبان ها باید پراپرتی locale رو برابر با یکی از مقادیر زیر قرار بدید:

زبانمقدار
انگلیسیen
فارسیfa
عربیar
هندیhi

توضیحات

شما میتونید هر کدام از این پراپرتی ها را که لازم میدونید چه در دیت پیکر و چه در تقویم در کنار هم استفاده کنید. به عنوان نمونه به مثال های زیر توجه کنید :

تقویم پیشفرض (تقویم میلادی ، زبان انگلیسی)

<Calendar /> 
April,2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

تقویم هجری شمسی ، زبان فارسی

<Calendar
  calendar="persian"
  locale="fa"
/> 
اردیبهشت،۱۴۰۴
شن
یک
دو
سه
چهار
پنج
جم
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱

دیت پیکر هجری شمسی

این پکیج به صورت پیشفرض از تقویم میلادی و زبان انگلیسی استفاده میکنه و direction پیشفرضش هم چپ به راست در نظر گرفته شده. به همین دلیل در صفحاتی که direction آن راست به چپ هست، باید مقدار calendarPosition را برابر با bottom-right قرار بدید.

فرمت پیشفرض نمایش تاریخ در input به صورت YYYY/MM/DD تعریف شده. در صورت نیاز و در صفحات راست به چپ، میتونید مقدار format رو به DD/MM/YYYY تفییر بدید.

<div style={{ direction: "rtl" }}>
  <DatePicker
    calendar="persian"
    locale="fa"
    calendarPosition="bottom-right"
  />
</div>

تقویم هجری قمری ، زبان عربی

<Calendar
  calendar="arabic"
  locale="ar"
/> 
ذیقعده ،١٤٤٦
سبت
احد
ثن
ثلا
ارب
خم
جم
١
٢
٣
٤
٥
٦
٧
٨
٩
١٠
١١
١٢
١٣
١٤
١٥
١٦
١٧
١٨
١٩
٢٠
٢١
٢٢
٢٣
٢٤
٢٥
٢٦
٢٧
٢٨
٢٩
٣٠

تقویم هندی ، زبان هندی

<Calendar
  calendar="indian"
  locale="hi"
/> 
वैशाख,१९४७
रवि
सोम
मंगल
बुध
गुरु
शुक्र
शनि
१०
११
१२
१३
१४
१५
१६
१७
१८
१९
२०
२१
२२
२३
२४
२५
२६
२७
२८
२९
३०
३१

دیت پیکر با تقویم شمسی و زبان انگلیسی

<DatePicker
  calendar="persian"
  locale="en"
  calendarPosition="bottom-right"
/>