با فرض اینکه layout برنامه تعاریف لازم را دارد:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/Content/PersianDatePicker.css" rel="stylesheet" />
</head>
<body>
@RenderBody()
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/PersianDatePicker.js"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
فایلی را به نام PersianDatePicker.cshtml
در مسیر Views\Shared\EditorTemplates
ایجاد کنید؛ با این محتوا:
@using System.Globalization
@model DateTime?
@{
Func<DateTime, string> toPersianDate = date =>
{
var dateTime = new DateTime(date.Year, date.Month, date.Day, new GregorianCalendar());
var persianCalendar = new PersianCalendar();
return persianCalendar.GetYear(dateTime) + "/" +
persianCalendar.GetMonth(dateTime).ToString("00") + "/" +
persianCalendar.GetDayOfMonth(dateTime).ToString("00");
};
var today = toPersianDate(DateTime.Now);
var name = this.ViewContext.ViewData.ModelMetadata.PropertyName;
var value = Model.HasValue ? toPersianDate(Model.Value) : string.Empty;
}
<input type="text" dir="ltr"
name="@name" id="@name"
value="@value"
onclick="PersianDatePicker.Show(this,'@today');" />
بعد از این تنها کاری که باید انجام شود، استفاده از ویژگی UIHint است:
// Location: Views\Shared\EditorTemplates\PersianDatePicker.cshtml
[UIHint("PersianDatePicker")]
public DateTime AddDate { set; get; }
به صورت خودکار به متد EditorFor
اعمال میشود:
<div>
<label>تاریخ:</label>
@Html.EditorFor(model => model.AddDate)
</div>
همچنین اگر نیاز است مقدار رشته تاریخ شمسی آن به یک DateTime میلادی انتساب داده شود (در حین ارسال اطلاعات به سرور)، باید از یک
model binder سفارشی برای اینکار در ASP.NET MVC استفاده کنید. یک نمونه
پیاده سازی شده آنرا در بحث
PersianDateModelBinder میتوانید مشاهده و استفاده کنید.