نصب و آموزش کامپوننت انتخابگر تاریخ Zeon Blazor DateTimePicker
نحوه اضافه کردن کامپوننت (DateTimePicker)
اضافه کردن فضای نام (در صفحه مورد نظر کد زیر را به Using ها اضافه کنید)
YourPage.razor
@using Zeon.Blazor.ZDateTimePicker
@using Zeon.Blazor.ZDateTimePicker.Constants
اضافه کردن انتخابگر تاریخ (DateTimePicker)
در صفحه و تگ مورد نظر خود جهت اضافه کردن انتخابگر تاریخ کد زیر را استفاده کنید
YourPage.razor
<ZDateTimePicker ></ZDateTimePicker>
پارامتر ها (parameters)
| نام پارامتر | نوع پارامتر | مقدار پیشفرض | اجباری | توضیحات |
|---|---|---|---|---|
| FontFamilyRTL | string | inherit | خیر | فونت برای تاریخ های راست به چپ مانند جلالی برای نمایش اعداد فارسی |
| FontFamilyLTR | string | inherit | خیر | فونت برای تاریخ های چپ به راست مانند میلادی برای نمایش اعداد انگلیسی |
| CreateNumberOfYears | int | 200 | خیر | مجموع نمایش تعداد سال های قبل از سال جاری و بعد از سال جاری |
| Format | string | yyyy-MM-dd | خیر | فرمت نمایش تاریخ و ساعت |
| DatePickerType | Enum Type Of DatePickerType | DatePickerType.Jalali | خیر | نوع تاریخ جلالی یا میلادی |
| InputPickerType | Enum Type Of InputType | InputType.Date | خیر | نوع ورودی و خروجی / تاریخ یا تاریخ و ساعت |
| DefaultDateTime | DateTime? | DateTime.Now | خیر | مقدار پیش فرض در صورت پر نشدن با تاریخ جاری پر می شود |
| ChangedDateTime | EventCallback<DateTime> | خیر | رویداد دریافت زمان پس از تغییر | |
| DateTimeIsValid | EventCallback<bool> | خیر | رویداد دریافت معتبر بودن تاریخ ورودی | |
| IsLiveTime | bool | false | خیر | در صورت true بودن زمان به صورت زنده دریافت و نمایش داده می شود تا زمانی که کاربر بر روی انتخابگر کلیک کند |
| LiveTimeDelay | int | 500 | خیر | مقدار زمان صبر کردن جهت گرفتن زمان جدید به میلی ثانیه |
توابع (functions)
| نام تابع | نوع | توضیحات |
|---|---|---|
| ChangeDatePickerType | void | تغییر نوع تقویم در زمان اجرا |
| Refresh | Task | جهت تازه سازی نمایش اطلاعات |
نمایشگاه و نمونه کد (Samples)
حالت های نمایش
Output Preview
Code
<ZDateTimePicker InputPickerType="InputType.Date" Format="yyyy-MM-dd"></ZDateTimePicker>
<ZDateTimePicker InputPickerType="InputType.DateTime" Format="yyyy-MM-dd HH:mm"></ZDateTimePicker>
<ZDateTimePicker DatePickerType="DatePickerType.Gregorian" InputPickerType="InputType.DateTime"></ZDateTimePicker>
<ZDateTimePicker InputPickerType="InputType.DateTime" Format="yyyy/MM/dd hh:mm tt"></ZDateTimePicker>
<ZDateTimePicker InputPickerType="InputType.DateTime" Format="dd/MM/yyyy hh:mm tt"></ZDateTimePicker>
<br />
<ZDateTimePicker IsLiveTime="false" LiveTimeDelay="100" DatePickerType="DatePickerType.Gregorian" InputPickerType="InputType.DateTime" Format="yyyy/MMM/dd"></ZDateTimePicker>
<ZDateTimePicker IsLiveTime="false" LiveTimeDelay="100" InputPickerType="InputType.DateTime" Format="dd/MMM/yyyy"></ZDateTimePicker>
<ZDateTimePicker IsLiveTime="true" LiveTimeDelay="100" InputPickerType="InputType.DateTime" FontFamilyRTL="B Nazanin" Format="yyyy-MMM-dd hh:mm tt"></ZDateTimePicker>
<ZDateTimePicker IsLiveTime="true" InputPickerType="InputType.DateTime" Format="yyyy-MM-dd hh:mm:ss"></ZDateTimePicker>
<ZDateTimePicker IsLiveTime="true" LiveTimeDelay="100" InputPickerType="InputType.DateTime" Format="yyyy-MM-dd hh:mm:ss.ffffff"></ZDateTimePicker>
دریافت مقدار جدید بعد از تغییر تاریخ در ChangedDateTime
Output Preview
Code
<ZDateTimePicker DefaultDateTime="_people.Birthday" ChangedDateTime="MyDateTimePicker"></ZDateTimePicker>
@code{
People _people = new People();
public class People
{
public People()
{
Birthday = new DateTime(1992, 07, 01);
}
public bool IsActive { get; set; }
public DateTime Birthday { get; set; }
}
private void MyDateTimePicker(DateTime value)
{
_people.Birthday = value;
}
}
تغییر نوع تقویم در حالت اجرا
Output Preview
Code
<ZDateTimePicker @ref="MyDateTimePicker1" DefaultDateTime="_people.Birthday" ChangedDateTime="MyDateTimePickerEvent"></ZDateTimePicker>
<Zeon.Blazor.ZButton.ZButton Text="تغییر نوع تقویم" Onclick="ChangePickerType" CssIcon="fa fa-refresh"> </Zeon.Blazor.ZButton.ZButton>
@code{
public ZDateTimePicker MyDateTimePicker1 { get; set; } = null!;
private void ChangePickerType()
{
var newType = MyDateTimePicker1.DatePickerType == DatePickerType.Jalali ? DatePickerType.Gregorian : DatePickerType.Jalali;
MyDateTimePicker1.ChangeDatePickerType(newType);
}
private void MyDateTimePickerEvent(DateTime value)
{
}