در این مقاله به نحوه استفاده از Date Picker توسط jquery در MVC خواهیم پرداخت

jquery یکی از زبان های اسکریپت نویسی  برای توسعه وب می باشد که به صورت گسترده استفاده می شود.

توسط jquery  میتوان Date Picker های مختلفی استفاده نمود.در این مقاله میخواهیم یک date picker  jquery  به MVC  اضافه کنیم.

ابتدا یک برنامه از نوع Asp.net MVC ایجاد کنید.

روی New Project کلیک کنید وبه پنجره وب رفته و Asp.Net Web Application را انتخاب کنید ویک نام برای پروژه خود وارد کنید مثل DateTimeDemo و روی دکمه OK کلیک کنید.

سپس از پنجره زیر MVC را انتخاب کنبد وروی دکمه OK کلیک کنید.

حال برروی پوشه Model وی یک کلاس به نام Employee به شکل زیر بسازید:

public class Employee  
{  
    [Required]  
    [Display(Name = "Id")]  
    public int EmpId { get; set; }  
    [Display(Name = "Name")]  
    [Required]  
    public string EmpName { get; set; }  
    [Required]  
    [Display(Name = "Date Of Birth")]  
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MMM/yyyy}")]  
    public DateTime DOB { get; set; }  
}  

در کلاس بالا از چند صفت بالای فیلد ها استفاده شده است مثل صفت اجباری بودن فیلد.

سپس روی پوشه Controllers کلیک راست کرده واز لیست کنترلرها MVC Controller-Empty را انتخاب کنید:

به صورت خودکار متد Index ایجاد میشود:

public class EmployeeController : Controller  
{  
    // GET: Employee  
    public ActionResult Index()  
    {  
        return View();  
    }  
}  

داخل متد کلیک راست کرده و AddView را انتخاب کنید در صفحه نمایش داده شده model class  را کلاس Employee انتخاب کنید و نوع ویو را Create انتخاب کنید.

ویو ساخته شده به شکل زیر خواهد شد:

@model DateTimeDemo.Models.Employee  
  
@{  
    ViewBag.Title = "Index";  
}  
  
<h2>Index</h2>  
  
  
@using (Html.BeginForm())   
{  
    @Html.AntiForgeryToken()  
      
    <div class="form-horizontal">  
        <h4>Employee</h4>  
        <hr />  
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })  
        <div class="form-group">  
            @Html.LabelFor(model => model.EmpId, htmlAttributes: new { @class = "control-label col-md-2" })  
            <div class="col-md-10">  
                @Html.EditorFor(model => model.EmpId, new { htmlAttributes = new { @class = "form-control" } })  
                @Html.ValidationMessageFor(model => model.EmpId, "", new { @class = "text-danger" })  
            </div>  
        </div>  
  
        <div class="form-group">  
            @Html.LabelFor(model => model.EmpName, htmlAttributes: new { @class = "control-label col-md-2" })  
            <div class="col-md-10">  
                @Html.EditorFor(model => model.EmpName, new { htmlAttributes = new { @class = "form-control" } })  
                @Html.ValidationMessageFor(model => model.EmpName, "", new { @class = "text-danger" })  
            </div>  
        </div>  
  
        <div class="form-group">  
            @Html.LabelFor(model => model.DOB, htmlAttributes: new { @class = "control-label col-md-2" })  
            <div class="col-md-10">  
                @Html.EditorFor(model => model.DOB, new { htmlAttributes = new { @class = "form-control", placeholder = "Employee Date Of Birth", @readonly = "true" } })  
                @Html.ValidationMessageFor(model => model.DOB, "", new { @class = "text-danger" })  
            </div>  
        </div>  
  
        <div class="form-group">  
            <div class="col-md-offset-2 col-md-10">  
                <input type="submit" value="Create" class="btn btn-default" />  
            </div>  
        </div>  
    </div>  
}  
  
<div>  
    @Html.ActionLink("Back to List", "Index")  
</div>  
  
@section Scripts {  
}  

حال باید رفرنس های jqueryui را به پروژه اضافه کنید چون به صورت پیش فرض رفرنس ها به پروژه اضافه نمیشودپس برای اضافه کردن آنها روی Refrences کلیک راست کرده و Manage Nuget Packages را انتخاب کنید:

سپس در پنجره نمایش داده شده درسمت راست JqueryUI را جستجو کنید و سپس آنرا انتخاب کرده و روی Install کلیک کنید تا کتابخانه های jquery به پروژه اضافه شود.

بعد از اضافه شدن رفرنس ها به پروژه تصویر زیر را مشاهده خواهید کرد:

برای چک کردن فایل های اضافه شده به پروژه پوشه Content رفته وسپس پوشه Scripts مشاهده خواهید کرد که jquery ها در این پوشه اضافه شده اند:

حال به پوشه App_start رفته و فایل BundleConfig.CS راباز کنیدو کد زیر را اضافه کنید:

//Create bundel for jQueryUI  
//js  
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(  
          "~/Scripts/jquery-ui-{version}.js"));  
//css  
bundles.Add(new StyleBundle("~/Content/cssjqryUi").Include(  
       "~/Content/jquery-ui.css"));  

حال شما باید Bundle ها را به صفحه ای که میخواهید Date Picker داشته باشید اضافه کنید به ویو Index بروید و اسکریپت زیر را به ویو اضافه کنید:

@section Scripts {  
  
@Scripts.Render("~/bundles/jqueryui")  
@Styles.Render("~/Content/cssjqryUi")  
  
 <script type="text/javascript">  
     $(document).ready(function () {  
         $('input[type=datetime]').datepicker({  
             dateFormat: "dd/M/yy",  
             changeMonth: true,  
             changeYear: true,  
             yearRange: "-60:+0"  
         });  
  
     });  
</script>  
  
}  

حال میتوانید پروژه را اجرا کنید :

در اسکریپت بالا برای سفارشی کردن تاریخ از دستورات زیر استفاده شده است :

dateFormat: "dd/M/yy",  
changeMonth: true,  
changeYear: true,  
yearRange: "-60:+0"