0
استفاده از PersianDatePicker در MVC 5
استفاده از PersianDatePicker در MVC 5
در این پست نحوه استفاده از PersianDatePicker در MVC 5 را آموزش می دهیم.
در پست های قبلی نحوه نمایش تاریخ و ساعت فارسی در MVC 5 را آموزش دادیم. در این پست با اضافه کردن کدهای جدید یک DatePicker ایجاد خواهیم کرد.
توجه:
تمام مطالب آموزشی که در MVC 5 آموزش داده می شود در Asp.Net نیز آموزش داده شده و می توانید در پایین تمام مطالب، مطالب مرتبط با هر موضوع را مشاهده کنید.
ابتدا همان مراحل نمایش تاریخ و ساعت فارسی از پست قبلی را طی کنید.
سپس یک کلاس در Models ایجاد کنید و یک پراپرتی به صورت زیر تعریف کنید.
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace PersianDatePickerInMVC5.Models
{
public class PersianDatePicker
{
[UIHint("DatePicker")]
public DateTime DatePicker { get; set; }
}
}
حال استایل و اسکریپت داخل نمونه سورس قرار داشته شده را به پروژه خود اضافه کنید که شامل یک فایل PersianDatePicker.min.css و PersianDatePicker.min.js می باشد.
سپس یک پوشه به نام Shared داخل پوشه View ایجاد کنید و سپس یک پوشه دیگر به نام EditorTemplates داخل آن ایجاد کنید.
در داخل پوشه EditorTemplates یک فایل DatePicker.cshtml ایجاد کنید و کدهای زیر را به آن اضافه کنید.
@model DateTime?
<link href="~/Content/PersianDatePicker.min.css" rel="stylesheet" />
<script src="~/Scripts/PersianDatePicker.min.js"></script>
@Html.TextBoxFor(model => model, new { @ETname = "date", @Value = @Model != null ? Model.Value.ToString("yyyy/MM/dd") : DateTime.Now.Date.ToString("yyyy/MM/dd"), onclick = "PersianDatePicker.Show(this)" })
کار ما اینجا به پایان رسید حال هر جای که می خواهید می توانید از DatePicker استفاده کنید.
ما یک کنترل Home ایجاد کردیم و یک View و کدهای زیر را داخل آن نوشتیم.
@model PersianDatePickerInMVC5.Models.PersianDatePicker
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@Html.EditorFor(model=>model.DatePicker)
</div>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال