Datetime Picker

کامپوننت x-datetime-picker برای انتخاب تاریخ و زمان در فرم‌ها با امکانات پیشرفته و قابل شخصی‌سازی استفاده می‌شود. این کامپوننت از ویژگی‌هایی مانند نمایش لیبل، تعیین بازه مجاز تاریخ، انتخاب نوع (تاریخ، زمان، تاریخ‌-زمان)، تعیین فرمت، حالت فقط‌خواندنی، غیرفعال، پشتیبانی از پیشوند و پسوند، نمایش پیام راهنما، کنترل ظاهر و رفتار، و نمایش خطا پشتیبانی می‌کند.

ویژگی‌ها

پشتیبانی از لیبل اصلی و فضای رزرو لیبل
امکان تعیین مقدار اولیه (value) و بازه مجاز (minDate, maxDate)
قابلیت فقط‌خواندنی (readonly) و غیرفعال (disabled)
تعیین نوع انتخاب (type: تاریخ، زمان، تاریخ‌-زمان)
تعیین فرمت نمایش (dateFormat)
پشتیبانی از روزها و تاریخ‌های غیرفعال (disabledDays, disabledDates)
پشتیبانی از تاریخ های همیشه فعال (forceEnabledDates)
پشتیبانی از پیشوند (prefix) و پسوند (suffix) برای ورودی
نمایش پیام راهنما هنگام غیرفعال بودن (disabledTooltip)
نمایش پیام خطا و پیام‌های سفارشی با استایل‌های مختلف
امکان شخصی‌سازی کلاس‌های CSS برای خود ورودی و کانتینر
پشتیبانی از پیام راهنما (hint)
کنترل نمایش پیام‌های منطقی (suppressLogicMessages)
پشتیبانی از انتخابگر زمان با گزینه‌های قابل تنظیم (timePickerOptions)
امکان تعیین راست‌چین یا چپ‌چین بودن (dir, textAlign)
نمایش آیکن تقویم و دکمه پاک‌کردن مقدار (showIcon, clearable)
پشتیبانی از تایپ دستی (allowTyping)
پشتیبانی از تقویم میلادی (allowGregorian)

ورودی‌های کامپوننت

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`name`	`string`	—	نام فیلد (اجباری)
`label`	`string`	`null`	لیبل اصلی ورودی تاریخ/زمان
`labelSpaceReserved`	`bool`	`false`	آیا فضای لیبل حتی بدون مقدار رزرو شود؟
`id`	`string`	`null`	شناسه یکتا برای ورودی
`value`	`Carbon`	`null`	`null`
`minDate`	`Carbon`	`null`	`null`
`maxDate`	`Carbon`	`null`	`null`
`prefix`	`string`	`null`	پیشوند برای ورودی
`suffix`	`string`	`null`	پسوند برای ورودی
`required`	`bool`	`false`	اجباری بودن فیلد
`readonly`	`bool`	`false`	فقط‌خواندنی بودن ورودی
`disabled`	`bool`	`false`	غیرفعال بودن ورودی
`containerClass`	`string`	`null`	کلاس CSS سفارشی برای کانتینر
`class`	`string`	`null`	کلاس CSS سفارشی برای خود ورودی
`messageStyle`	`string`/`enum`	`"message"`	استایل نمایش پیام (message, tooltip, ...)
`defaultMessageType`	`string`/`enum`	`"info"`	نوع پیام پیش‌فرض (info, error, success, ...)
`defaultMessage`	`string`	`null`	پیام پیش‌فرض برای نمایش
`hint`	`string`	`null`	پیام راهنما یا توضیح کوتاه
`suppressLogicMessages`	`bool`	`false`	عدم نمایش پیام‌های منطقی
`type`	`string`	`"date"`	نوع انتخاب: `date`, `time`, `datetime`
`dateFormat`	`string`	`null`	فرمت نمایش تاریخ/زمان (مثلاً `Y/m/d H:i`)
`disabledDays`	`array`	`null`	آرایه‌ای از شماره روزهای هفته (0 تا 6) که غیرفعال هستند
`disabledDates`	`array`	`null`	آرایه‌ای از تاریخ‌های غیرفعال (آرایه‌ای از Carbon)
`forceEnabledDates`	`array`	`null`	آرایه‌ای از تاریخ‌های همیشه فعال حتی اگر آن تاریخ خارج از بازه زمانی مجاز باشد یا حتی در `disabledDates` قرار داشته باشد.(آرایه‌ای از Carbon)
`autoClose`	`bool`	`true`	بستن خودکار انتخابگر پس از انتخاب
`clearable`	`bool`	`true`	امکان پاک‌کردن مقدار انتخاب‌شده
`placeholder`	`string`	`" "`	متن پیش‌فرض ورودی
`allowGregorian`	`bool`	`false`	اجازه انتخاب تقویم میلادی
`timePickerOptions`	`array`	-	گزینه‌های انتخابگر زمان `['hours'=>true,'minutes'=>true,'seconds'=>true]`
`dir`	`string`	`"ltr"`	جهت نوشتار ورودی (`ltr` یا `rtl`)
`textAlign`	`string`	`"left"`	جهت متن ورودی
`showIcon`	`bool`	`true`	نمایش آیکن تقویم
`allowTyping`	`bool`	`false`	اجازه تایپ دستی مقدار
`disabledTooltip`	`string`	`null`	پیام راهنما هنگام غیرفعال بودن ورودی

هشدار

توجه داشته باشید که هرگونه تغییر در مقدار dateFormat باعث غیرفعال شدن امکان تایپ دستی می‌شود، زیرا کنترل ماسک ورودی در این حالت ممکن نیست. همچنین، با تغییر گزینه‌های timePickerOptions، فرمت تاریخ، ماسک و placeholder به‌صورت خودکار تنظیم می‌شوند و نیازی به تعیین دستی مقدار dateFormat نخواهید داشت.

مقداردهی با جاوااسکریپت

برای مقداردهی یا تغییر مقدار کامپوننت x-datetime-picker به صورت داینامیک با جاوااسکریپت، می‌توانید از متد زیر استفاده کنید:

$("#date-selector-create").setValue("1403/01/01");
// یا مقدار unix
$("#date-selector-create").setValue(1700000000);

اگر مقدار ورودی رشته تاریخ باشد، به صورت خودکار به timestamp تبدیل می‌شود.
مقدار جدید در اینپوت قرار گرفته و مقدار پیش‌فرض (برای ریست) نیز به‌روزرسانی می‌شود.

تغییر بازه زمانی قابل انتخاب با جاوااسکریپت

برای تغییر بازه زمانی کامپوننت x-datetime-picker به صورت داینامیک با جاوااسکریپت، می‌توانید از متد زیر استفاده کنید:

$("#date-selector-create").setRange({minDate:"1403/01/01",maxDate:"1404/06/01"});
// یا مقدار unix
$("#date-selector-create").setRange({minDate:1700000000,maxDate:1750000000});

مثال‌ها

نمونه پایه

<x-datetime-picker
    container-class="col-md-6"
    :value="verta()->parse('1403-10-10')->toCarbon()"
    :allow-typing="true"
    :min-date="verta()->parse('1402-10-10')->toCarbon()"
    :max-date="verta()->parse('1404-10-10')->toCarbon()"
    type="date"
    id="date-selector-create"
    name="created_at"
    label="تاریخ ایجاد"
    prefix="تاریخ"
    suffix="تاریخ"
    :allow-typing="true"
/>

ویژگی‌ها​

ورودی‌های کامپوننت​

مثال‌ها​

نمونه پایه​

ویژگی‌ها

ورودی‌های کامپوننت

مثال‌ها

نمونه پایه