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

در این مقاله نشان می دهیم که چگونه می توان تاریخ قبل و بعد 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

 گام ۳: Home Controller

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

1-jQuery UI Calendar

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

2-jQuery UI Calendar

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

HomeController.cs

 در کد بالا، فقط 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

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

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

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

3-jQuery UI Calendar

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

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

4-jQuery UI Calendar

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

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

5-jQuery UI Calendar

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

دانلود سورس کد
پسورد : csharpoop.com

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

(434 نوشته)

C# Programmer , Web Design And Developer , MVC , ASP.NET

فکر شما چیست؟

آدرس ایمیل شما منتشر نخواهد شد. بخشهای موردنیاز علامتگذاری شدهاند *

حاصل جمع اعداد را وارد کنید : *