Ecme - The Ultimate Next & TypeScript Web Template

انتخاب تاریخ (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)

ویژگی

توضیحات

نوع

پیش‌فرض

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'

ویژگی

توضیحات

نوع

پیش‌فرض

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'

ویژگی

توضیحات

نوع

پیش‌فرض

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'