jQuery UI Calendar

در این مقاله نشان می دهیم که چگونه می توان تاریخ قبل و بعد jQuery UI Calendar را در MVC غیرفعال کرد. مراحل انجام کار و تصاویر به صورت گام به گام به همراه سورس مقاله در انتها قرار داده شده است. با من همراه باشید …

jQuery UI Calendar

گام ۱: ایجاد یک اپلیکیشن MVC

ویژوال استودیو ۲۰۱۵ را باز کرده و از منوی File، New Project را انتخاب کرده و سپس “ASP.Net Web Application Template” را انتخاب می کنیم و با انتخاب نام مناسب برای پروژه روی Ok کلیک می کنیم.

MVC empty application را انتخاب کرده و Ok می کنیم.

گام ۲: اضافه کردن کلاس model

روی فولدر Model راست کلیک کرده و یک کلاس به نام EmpModel ایجاد می کنیم و کدهای زیر را در آن می نویسیم.

EmpModel.cs

public class EmpModel    
{   
   [Display(Name =Enter Date)]    
   public DateTime EnterDate { get; set; }    
}  

گام ۳: Home Controller

روی فولدر Controller راست کلیک کرده و یک کلاس controller اضافه می کنیم.

 

 غیرفعال کردن تاریخ قبل وبعد jQuery UI Calendar

حالا با انتخاب قالب کنترلر، روی دکمه “Add” کلیک می کنیم و پنجره زیر ظاهر می شود:

 

 jQuery UI Calendar در MVC

نام کنترلر را مشخص کرده و Add را می زنیم.

HomeController.cs

public class HomeController : Controller    
{    
    // GET: Home    
    public ActionResult Index()    
    {    
        return View();    
    }    
} 

در کد بالا، فقط Action result ای به نام Index وجود دارد که زمانی که کاربر Viewای با نام Index.cshtml را درخواست می کند، درخواست کاربر را مدیریت خواهد کرد.

گام ۴: اضافه کردن رفرنس jQueryUI CSS و کتابخانهjs

برای اضافه کردن آن ها به پروژه راه های مختلفی وجود دارد. برخی از این روش ها به صورت زیر می باشد:

استفاده از Nuget package manager، می توانید کتابخانه را نصب کرده و رفرنس آن را به پروژه بدهید.

استفاده از کتابخانه CDN که توسط مایکروسافت، گوگل یا jQuery فراهم شده است که نیاز به اتصال اینترنت دارد.

دانلود فایل های jQuery از سایت رسمی jQuery و اضافه کردن رفرنس آن به پروژه

در این مقاله ما از کتابخانه CDN استفاده کرده ایم.

همان طور که می دانیم برای استفاده از jQuery UI Calendar باید از تابع datepicker استفاده کنیم و برای تنظیم بازه خاصی از تاریخ درتقویم باید از property های زیر در تابع datepicker استفاده نماییم.

  • yearRange: بازه سال را در تقویم مشخص می کند که چند سال قبل و بعد را در تقویم نمایش دهد.
  • minDate: حداقل تاریخ را تنظیم می کند.
  • maxDate: حداکثر تاریخ را تنظیم می کند.

گادم ۵: ایجاد تابع jQuery برای فراخوانی تابع datepicker

$(document).ready(function() {  
    $(#EnterDate).datepicker({  
        dateFormat:dd-mm-yy,  
        minDate: -0,  
        maxDate: +0M +0D  
  
    });  
}); 

برای ایجاد تابع بالا، باید رفرنس کتابخانه های زیر را به پروژه اضافه کنیم.

link rel=stylesheet href=//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css    
script src=//code.jquery.com/jquery-1.10.2.js/script    
script src=//code.jquery.com/ui/1.11.4/jquery-ui.js/script

گام ۶: اضافه کردن View

یک strongly type view از کلاس EmpModel با نام Index ایجاد می کنیم.

 

 jQuery UI Calendar در MVC

بعد از اضافه کردن کدهای لازم، فایل ها و کد index.cshtml به شکل زیر خواهد بود:

@model DissablePastandFutureDateInMVC.Models.EmpModel  
    
link rel=stylesheethref=//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css  
script src=//code.jquery.com/jquery-1.10.2.js/script  
script src=//code.jquery.com/ui/1.11.4/jquery-ui.js/script  
  
script  
  
  $(document).ready(function() {  
      $(#EnterDate).datepicker({  
          dateFormat:dd-mm-yy,  
          minDate: -0,  
          maxDate: +0M +0D 
  
      });  
  });  
/script   
  
  
@using (Html.BeginForm())   
{  
    @Html.AntiForgeryToken()  
      
    div class=form-horizontal  
         
        hr /  
        @Html.ValidationSummary(true, , new { @class = text-danger})  
        div class=form-group  
            @Html.LabelFor(model = model.EnterDate, htmlAttributes: new { @class = control-label col-md-2})  
            div class=col-md-10  
                @Html.EditorFor(model = model.EnterDate, new { htmlAttributes = new { @class = form-control} })  
                @Html.ValidationMessageFor(model = model.EnterDate, , new { @class = text-danger})  
            /div  
        /div  
  
        
    /div  
}

حال برنامه را اجرا می کنیم و اشاره گر ماوس را روی textbox مربوط به کنترل calendar می بریم که به شکل زیر خواهد بود:

 

 کاربرد های jQuery UI Calendar

در تصویر بالا مشاهده می کنید که فقط تاریخ جاری فعال است و بقیه روزها غیرفعال می باشد. حال اجازه دهید که maxDate را طوری تغییر دهیم که فقط ۵ روز بعد از تاریخ جاری را نمایش دهد.

$(document).ready(function() {  
    $(#EnterDate).datepicker({  
        dateFormat:dd-mm-yy,  
        minDate: -0,  
        maxDate: +0M +4D  
  
    });  
});

حالا دوباره برنامه را اجرا می کنیم.

 

 jQuery UI Calendar در MVC

در تصویر بالا می بینیم که فقط ۵ روز از تاریخ جاری به بعد فعال می باشد.

موفق باشید !

جزئیات فایل

زبان پروژه : سی شارپ
حجم فایل پیوست : 5.20MB

دانلود فایل

دانلود با لینک مستقیم
پسورد فایل : www.mspsoft.com
فاطمه زکایی

فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.