انتخاب تاریخ (DatePicker)
انتخاب تاریخ به کاربران این امکان را میدهد که تاریخ را از طریق یک تقویم پاپآپ انتخاب کنند.
پایه (Basic)
استفاده معمولی از کامپوننت DatePicker.
انتخاب بازه (Range picker)
استفاده معمولی از کامپوننت RangePicker.
انتخاب تاریخ و زمان (Date time picker)
ترکیب
<DatePicker /> و <TimeInput />کنترلشده (Controlled)
استفاده کنترلشده با
<DatePicker /> و <DatePickerRange />فرمت (Format)
انتخابگر به ما این امکان را میدهد که فرمت تاریخ ورودی و انتخابگر را از طریق props
inputFormat و labelFormat تنظیم کنیم.فرمت ورودی:
قالب برچسب داخلی:
رندر سفارشی (Custom Render)
شما میتوانید عناصر روز سفارشی را رندر کنید یا از طریق props
dayStyle، dayClassName و renderDay به روزها استایل و کلاس اعمال کنید.غیرفعال کردن تاریخهای خارج از بازه (Disable out of period date)
با تنظیم props
minDate و maxDate میتوان تاریخهای قابل انتخاب را محدود به یک بازه خاص کرد.غیرفعال کردن تاریخهای خاص (Disabled certain date)
با استفاده از callback در prop
disabledDate میتوان برخی از تاریخها را غیرفعال کرد.چندین نمایش تاریخ (Multiple date view)
با تنظیم prop
dateViewCount بیشتر از 1 میتوان چندین نمایش از تاریخ داشت.غیرفعال کردن ورودی (Disabled Input)
با استفاده از prop
disabled میتوان ورودی DatePicker را غیرفعال کرد.قابلیت ورود دستی (Inputtable)
قفل ورودی را آزاد کنید تا کاربر بتواند تاریخ را به صورت دستی وارد کند.
اندازه ورودی (Input Size)
DatePicker به ما این امکان را میدهد که اندازه ورودی را از طریق prop
size کنترل کنیم.پسوند ورودی (Input Affix)
inputSuffix یا inputPrefix به ما این امکان را میدهند که محتوای پسوند ورودی را سفارشی کنیم.پیشوند:
پسوند:
دکمه پاکسازی (Clear Button)
شما میتوانید دکمه پاکسازی را از طریق props
clearable یا clearButton سفارشی کنید.بدون دکمه پاک کردن:
دکمه پاکسازی سفارشی:
موقعیتیابی (Localization)
DatePicker مقدار locale را از
<ConfigProvider /> دریافت میکند، اما همچنین گزینهای برای وارد کردن locale به صورت دستی وجود دارد.API
انتخاب تاریخ (DatePicker)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| clearable | آیا اجازه میدهد مقدار پاک شود | boolean | true |
| clearButton | دکمه پاککردن سفارشی | string | ReactNode | ReactNode |
| closePickerOnChange | آیا پس از انتخاب تاریخ، پنجره انتخاب تاریخ بسته شود | boolean | true |
| dateViewCount | تعداد نمایش تاریخها در پنجره انتخاب تاریخ | number | 1 |
| dayClassName | اعمال کلاس به روزها بر اساس آرگومان | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string | - |
| dayStyle | اعمال استایل به روزها بر اساس آرگومان | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties | - |
| defaultValue | مقدار پیشفرض DatePicker (در صورتی که کنترلشده نباشد، از value استفاده کنید) | Date | - |
| defaultMonth | ماه پیشفرض برای DatePicker کنترلنشده | Date | - |
| defaultOpen | آیا DatePicker به طور پیشفرض باز باشد | boolean | false |
| defaultView | نمای پیشفرض DatePicker | 'date' | 'month' | 'year' | 'date' |
| disabled | تعیین اینکه آیا ورودی DatePicker غیرفعال باشد | boolean | false |
| disabledDate | تعیین تاریخهایی که نمیتوانند انتخاب شوند | (date: Date) => boolean | - |
| disableOutOfMonth | آیا باید روزهایی که خارج از ماه دادهشده هستند غیرفعال شوند | boolean | false |
| enableHeaderLabel | فعالکردن برچسب هدر برای تغییر نمای تقویم | boolean | true |
| firstDayOfWeek | اولین روز هفته | 'sunday' | 'monday' | 'monday' |
| hideOutOfMonthDates | آیا باید روزهایی که خارج از ماه دادهشده هستند مخفی شوند | boolean | false |
| hideWeekdays | آیا باید روزهای هفته مخفی شوند | boolean | false |
| inputFormat | فرمت نمایش ورودی DatePicker | string | 'YYYY-MM-DD' |
| inputPrefix | نمایش محتوای پیشوند داخل ورودی DatePicker | string | ReactNode | - |
| inputSuffix | نمایش محتوای پسوند داخل ورودی DatePicker | string | ReactNode | - |
| inputtable | آیا اجازه تایپ در ورودی داده میشود | boolean | false |
| labelFormat | فرمت برچسب تاریخ | {month: string, year: string} | {month: 'MMM', year: 'YYYY'} |
| locale | زبان محلی DatePicker | dayjs locale | en |
| maxDate | تاریخ بیشینه برای انتخاب | Date | - |
| minDate | تاریخ کمینه برای انتخاب | Date | - |
| monthLabelFormat | فرمت برچسب ماه | string | 'YYYY' |
| onBlur | کالبک زمانی که ورودی DatePicker از حالت فوکوس خارج میشود | function(event: Event) | - |
| onChange | کالبک زمانی که یک تاریخ انتخاب میشود | function(date: Date) | - |
| onDayMouseEnter | کالبک زمانی که روی روزی هاور میشود | function(date: Date) | - |
| onFocus | کالبک زمانی که ورودی DatePicker فوکوس میشود | function(event: Event) | - |
| onDropdownClose | کالبک زمانی که DatePicker بسته میشود | () => void | - |
| onDropdownOpen | کالبک زمانی که DatePicker باز میشود | () => void | - |
| openPickerOnClear | آیا باید DatePicker پس از پاککردن مقدار باز شود | boolean | false |
| range | هایلایت کردن محدوده تاریخ دادهشده | [Date | null, Date | null] | - |
| renderDay | رندر کردن روز سفارشی بر اساس پارامترهای دادهشده | (date: Date) => ReactNode | false |
| size | اندازه ورودی DatePicker | 'sm' | 'md' | 'lg' | 'md' |
| value | مقدار DatePicker (کنترلشده) | Date | - |
| weekdayLabelFormat | فرمت نمایش روزهای هفته | string | 'dd' |
| weekendDays | تعیین روزهای تعطیل هفته | number[] | [0, 6] |
| yearLabelFormat | فرمت برچسب سال | string | 'YYYY' |
انتخاب تاریخ (DatePicker.DatePickerRange)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| clearable | آیا اجازه میدهید مقدار پاک شود؟ | boolean | true |
| clearButton | دکمه پاک کردن سفارشی | string | ReactNode | ReactNode |
| closePickerOnChange | آیا پس از انتخاب تاریخ، پنجره انتخاب بسته شود؟ | boolean | true |
| dateViewCount | تعداد نمایش تاریخ در پنجره انتخاب تاریخ | number | 1 |
| dayClassName | اعمال کلاس نام به روزها بر اساس آرگومانها | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string | - |
| dayStyle | اعمال استایل به روزها بر اساس آرگومانها | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties | - |
| defaultValue | مقدار پیشفرض برای DatePickerRange (اگر کنترلشده است، از value استفاده کنید) | Date | - |
| defaultMonth | ماه پیشفرض برای DatePickerRange کنترل نشده | Date | - |
| defaultOpen | آیا DatePickerRange به طور پیشفرض باز باشد؟ | boolean | false |
| defaultView | نمایش پیشفرض DatePickerRange | 'date' | 'month' | 'year' | 'date' |
| disabled | مشخص میکند که آیا ورودی DatePickerRange غیرفعال است یا نه | boolean | false |
| disabledDate | مشخص میکند که کدام تاریخها قابل انتخاب نیستند | (date: Date) => boolean | - |
| disableOutOfMonth | آیا روزهایی که خارج از ماه دادهشدهاند غیرفعال شوند؟ | boolean | false |
| enableHeaderLabel | آیا برچسب هدر برای تغییر نمایش فعال باشد؟ | boolean | true |
| firstDayOfWeek | اولین روز هفته | 'sunday' | 'monday' | 'monday' |
| hideOutOfMonthDates | آیا روزهایی که خارج از ماه دادهشدهاند مخفی شوند؟ | boolean | false |
| hideWeekdays | آیا روزهای هفته مخفی شوند؟ | boolean | false |
| inputFormat | فرمت نمایش ورودی DatePickerRange | string | 'YYYY-MM-DD' |
| inputPrefix | نمایش محتوای پیشوند در ورودی DatePickerRange | string | ReactNode | - |
| inputSuffix | نمایش محتوای پسوند در ورودی DatePickerRange | string | ReactNode | - |
| inputtable | آیا تایپ ورودی مجاز است | boolean | false |
| inputtableBlurClose | آیا هنگام blur (خارج شدن از فیلد) DatePicker بسته میشود (فقط زمانی که inputtable برابر با true باشد) | boolean | true |
| labelFormat | فاصلهگذار بین نمایش تاریخ در ورودی | string | '~' |
| locale | زبان DatePickerRange | dayjs locale | en |
| maxDate | حداکثر تاریخ انتخابی | Date | - |
| minDate | حداقل تاریخ انتخابی | Date | - |
| monthLabelFormat | فرمت برچسب ماه | string | 'YYYY' |
| onChange | کالبک زمانی که سلول تاریخ انتخاب میشود | function(date: Date) | - |
| onDayMouseEnter | کالبک زمانی که تاریخ موس روی آن قرار میگیرد | function(date: Date) | - |
| onDropdownClose | کالبک زمانی که DatePickerRange بسته میشود | () => void | - |
| onDropdownOpen | کالبک زمانی که DatePickerRange باز میشود | () => void | - |
| openPickerOnClear | آیا پس از پاک کردن مقدار، DatePickerRange باز میشود | boolean | false |
| range | برجسته کردن بازه تاریخی مشخص شده | [Date | null, Date | null] | - |
| renderDay | رندر کردن عنصر روز سفارشی بر اساس پارامترهای داده شده | (date: Date) => ReactNode | false |
| separator | فاصلهگذار بین تاریخها | string | '~' |
| size | اندازه ورودی DatePickerRange | 'sm' | 'md' | 'lg' | 'md' |
| singleDate | آیا فقط یک تاریخ قابل انتخاب است | boolean | false |
| value | مقدار DatePickerRange (Controlled) | [Date | null, Date | null] | - |
| weekdayLabelFormat | فرمت نمایش روزهای هفته | string | 'dd' |
| weekendDays | روزهای آخر هفته را نشان میدهد | number[] | [0, 6] |
| yearLabelFormat | فرمت برچسب سال | string | 'YYYY' |
انتخاب تاریخ (DatePicker.DateTimepicker)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| amPm | آیا باید فرمت زمان به 12 ساعته تنظیم شود؟ | boolean | true |
| clearable | آیا اجازه پاک کردن مقدار داده شده است؟ | boolean | true |
| clearButton | دکمه پاک کردن سفارشی | string | ReactNode | ReactNode |
| closePickerOnChange | آیا هنگام انتخاب تاریخ باید انتخابگر بسته شود؟ | boolean | false |
| dateViewCount | تعداد نمایش تاریخ در انتخابگر | number | 1 |
| dayClassName | اعمال کلاس به روزها بر اساس آرگومان داده شده | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string | - |
| dayStyle | اعمال استایل به روزها بر اساس آرگومان داده شده | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties | - |
| defaultValue | مقدار پیشفرض DateTimepicker (در صورتی که کنترل شده نیست، از value استفاده کنید) | Date | - |
| defaultMonth | ماه پیشفرض برای DateTimepicker کنترل نشده | Date | - |
| defaultOpen | آیا به صورت پیشفرض DateTimepicker باید باز باشد؟ | boolean | false |
| defaultView | نمایش پیشفرض DateTimepicker | 'date' | 'month' | 'year' | 'date' |
| disabled | تعیین اینکه آیا ورودی DateTimepicker غیرفعال است یا خیر | boolean | false |
| disabledDate | تعیین تاریخهایی که قابل انتخاب نیستند | (date: Date) => boolean | - |
| disableOutOfMonth | آیا باید روزهایی که خارج از ماه داده شدهاند غیرفعال شوند؟ | boolean | false |
| enableHeaderLabel | آیا باید برچسب هدر برای تغییر نمای انتخابگر فعال باشد؟ | boolean | true |
| firstDayOfWeek | اولین روز هفته | 'sunday' | 'monday' | 'monday' |
| hideOutOfMonthDates | آیا باید روزهای خارج از ماه داده شده مخفی شوند؟ | boolean | false |
| hideWeekdays | آیا باید روزهای هفته مخفی شوند؟ | boolean | false |
| inputFormat | فرمت نمایش ورودی DateTimepicker | string | 'YYYY-MM-DD' |
| inputPrefix | محتویات پیشوند را در ورودی DateTimepicker نمایش دهد | string | ReactNode | - |
| inputSuffix | محتویات پسوند را در ورودی DateTimepicker نمایش دهد | string | ReactNode | - |
| labelFormat | آیا اجازه تایپ در ورودی را میدهد؟ | {month: string, year: string} | {month: 'MMM', year: 'YYYY'} |
| locale | زبان DateTimepicker | dayjs locale | en |
| maxDate | حداکثر تاریخ انتخابی | Date | - |
| minDate | حداقل تاریخ انتخابی | Date | - |
| monthLabelFormat | فرمت برچسب ماه | string | 'YYYY' |
| okButtonContent | محتویات دکمه تایید | string | ReactNode | 'ok' |
| onBlur | کال بک هنگام از دست دادن فوکوس ورودی DateTimepicker | function(event: Event) | - |
| onChange | کال بک هنگام انتخاب سلول تاریخ | function(date: Date) | - |
| onDayMouseEnter | کال بک هنگام قرار گرفتن موس روی تاریخ | function(date: Date) | - |
| onFocus | کال بک هنگام فوکوس ورودی DateTimepicker | function(event: Event) | - |
| onDropdownClose | کال بک هنگام بسته شدن DateTimepicker | () => void | - |
| onDropdownOpen | کال بک هنگام باز شدن DateTimepicker | () => void | - |
| openPickerOnClear | آیا DateTimepicker هنگام پاک کردن مقدار باز شود؟ | boolean | false |
| range | محدوده تاریخ داده شده را هایلایت کند | [Date | null, Date | null] | - |
| renderDay | رندر المان سفارشی روز بر اساس پارامترهای داده شده | (date: Date) => ReactNode | false |
| size | اندازه ورودی DateTimepicker | 'sm' | 'md' | 'lg' | 'md' |
| value | مقدار DateTimepicker (کنترل شده) | Date | - |
| weekdayLabelFormat | فرمت نمایش روز هفته | string | 'dd' |
| weekendDays | روزهای تعطیل را نشان میدهد | number[] | [0, 6] |
| yearLabelFormat | فرمت برچسب سال | string | 'YYYY' |
فهرست مطالب
- پایه (Basic)
- انتخاب بازه (Range picker)
- انتخاب تاریخ و زمان (Date time picker)
- کنترلشده (Controlled)
- فرمت (Format)
- رندر سفارشی (Custom Render)
- غیرفعال کردن تاریخهای خارج از بازه (Disable out of period date)
- غیرفعال کردن تاریخهای خاص (Disabled certain date)
- چندین نمایش تاریخ (Multiple date view)
- غیرفعال کردن ورودی (Disabled Input)
- قابلیت ورود دستی (Inputtable)
- اندازه ورودی (Input Size)
- پسوند ورودی (Input Affix)
- دکمه پاکسازی (Clear Button)
- موقعیتیابی (Localization)