انتخاب تاریخ (شمسی و میلادی) در ASP.NET

تصویر مهدی

مقدمه:

مدتی است که تصمیم گرفته‌ام پلاگین‌های پر استفاده jQuery (مخصوصا پلاگین‌های jQuery UI) را به صورت کنترل‌های سفارشی ASP.NET درآورم تا استفاده از آن‌ها در پروژه‌هایم ساده‌تر شود. بالاخره بعد از مدتها نوشتن این کتابخانه را شروع کردم و برای شروع پلاگین انتخاب تاریخ (یا DatePicker) (که قبلا تاریخ شمسی آن را درست کرده‌بودم) را انتخاب کردم.
در این کتابخانه کنترلی به نام JQLoader ایجاد کرده‌ام که وظیفه بارگذاری اسکریپت‌های عمومی jQuery و همچنین تم‌های مشترک را بر عهده دارد. این نسخه از این کتابخانه شامل 24 تم پیش‌ساخته موجود در مجموعه jQuery UI است و امکان استفاده از تم‌های اختصاصی نیز وجود دارد.
در نسخه اول این کتابخانه دو کنترل JQLoader (به شرحی که گفته شد) و JQDatePicker (کنترل انتخاب تاریخ میلادی و شمسی) وجود دارد که در این جا ارایه شده‌است.

روش استفاده:

بعد از اضافه کردن ارجاع به فایل dll کتابخانه، کنترل‌ها را در صفحه رجیستر کنید. برای این کار کافیست بعد از تگ Page@ (اول صفحه) کد زیر را اضافه کنید:

<%@ Page ... %>
<%@ Register Assembly="JQControls" Namespace="JQControls" TagPrefix="jq" %>

در صورتی که میخواهید این کنترل‌ها را در تمامی صفحات استفاده کنید، می‌توانید بجای اضافه کردن آن در هر صفحه، در فایل Web.Config عبارت زیر را (در قسمت system.web) اضافه کنید:

<pages>
	<controls>
		<add assembly="JQControls" namespace="JQControls" tagPrefix="jq" />
	</controls>
</pages>

برای استفاده از این کنترل، ابتدا در شروع صفحه (قبل از سایر کنترل‌های این کتابخانه) یک نمونه از کنترل JQLoader را قرار دهید. با استفاده از ویژگی Theme در این کنترل می‌توانید تم مورد نظر خود را انتخاب کنید. دقت کنید که برای تمامی کنترل‌های موجود در این کتابخانه، تنها یک نمونه از کنترل JQLoader کافیست.
سپس کنترل JQDatePicker را به صفحه اضافه کنید. به طور پیش‌فرض این کنترل تقویم میلادی و زبان انگلیسی را استفاده می‌کند. در صورتی که می‌خواهید از تقویم شمسی استفاده کنید، کافیست ویژگی Regional آن را برابر با fa قرار دهید.

<jq:JQLoader ID="JQLoader1" Theme="DarkHive" runat="server"></jq:JQLoader>
<jq:JQDatePicker ID="JQDatePicker1" Regional="fa" runat="server"></jq:JQDatePicker>

پس از آن با استفاده از ویژگی Date این کنترل، می‌توانید تاریخ انتخاب شده را استفاده کنید. نکته قابل توجه اینست که این تاریخ، معادل تاریخ میلادی انتخاب شده (بدون توجه به قالب تاریخ و تقویم استفاده شده) است. در صورتی که تمایل داشتید که دقیقا عبارت نوشته شده در کنترل را دریافت کنید، می‌توانید از ویژگی Text استفاده کنید.

DateTime selectedDate = JQDatePicker1.Date;

اضافه کردن کنترل‌ها به Toolbox:

برای استفاده آسان از این کنترل‌ها می‌توانید آن‌ها را به نوار ابزار (Toolbox) اضافه کنید تا همانند سایر کنترل‌های ASP.NET آن‌ها را تنها با کشیدن بر روی فرم استفاده کنید.
برای این کار بر روی Toolbox کلیک سمت راست کنید و گزینه Choose Items را انتخاب کنید (باز شدن صفحه بعدی ممکن است کمی طولانی شود). سپس بر روی دکمه Browse کلیک کرده و فایل dll کتابخانه را انتخاب کنید و بعد از در حالی که کنترل‌های موجود در کتابخانه انتخاب شده‌اند، دکمه OK را فشار دهید تا این کنترل‌ها به Toolbox اضافه شوند.

ویژگی‌های پرکاربرد JQDatePicker:

Date

تاریخ انتخاب شده در تقویم (به صورت میلادی)

Regional

انتخاب زبان و نوع تقویم که شامل مقادیر en برای زبان انگلیسی (و تقویم میلادی) و fa برای زبان فارسی (و تقویم میلادی) است.

DateFormat

انتخاب قالب نمایش تاریخ که شامل مقادیر YMD، DMY و MDY است. در این عبارات D نشان روز، M نشان ماه و Y نشان سال است. از آنجا که در حالت RTL در مرورگر IE، نمایش تاریخ بر خلاف جهت سایر مرورگرها است، می‌توانید با استفاده از ویژگی IEDateFormat قالب تاریخ مخصوص این مرورگر را به صورت مجزا انتخاب کنید.

ShowButtonPanel

نمایش دکمه‌های "امروز" و "بستن"

ShowSelectButton

نمایش آیکون تقویم و ظاهر شدن تقویم بعد از کلیک بر روی آن

ButtonImage

انتخاب تصویر دلخواه برای آیکون نمایش تقویم

AnimationType

افکت استفاده شده هنگام ظاهر شدن تقویم که شامل مقادیر Default (پیش‌فرض)، Fade (محو شدن) و Slide (کشویی) می‌باشد.

AnimationSpeed

سرعت نمایش افکت ظاهر شدن تقویم که شامل مقادیر Default، Slow، Fast و Disabled (برای غیرفعال کردن افکت) است.

ChangeMonth

قابلیت انتخاب ماه از طریق DropDownList

ChangeYear

قابلیت انتخاب سال از طریق DropDownList

NumberOfMonths

تعداد ماه‌های نمایش داده شده در تقویم به صورت همزمان که به طور پیش‌فرض مقدار آن 1 ماه است.

ShowInline

نمایش تقویم به صورت Inline. در این حالت TextBox انتخاب تقویم نمایش داده نخواهد شد و تقویم به صورت ثابت در صفحه باقی خواهد ماند.

MinDate

محدود کردن حداقل تاریخ قابل انتخاب در تقویم

MaxDate

محدود کردن حداکثر تاریخ قابل انتخاب در تقویم
نمونه ای از اجرای پروژه نمونه

استفاده از تم‌های jQuery UI:

کتابخانه ارایه شده در اینجا حاوی 24 تم پیش ساخته است که به طور پیش‌فرض JQLoader یکی از آنها را در صفحات اضافه می‌کند. شما می‌توانید برای هماهنگی بیشتر بین کنترل‌های این کتابخانه با سایر قسمت‌های صفحات خود و همچنین قالب دهی سریع و آسان به صفحات خود، از همین تم‌ها در صفحات خود نیز استفاده کنید. در این صورت می‌توانید از راهنمای تم‌های jQuery UI برای آشنایی با نحوه استفاده از تم‌ها استفاده کنید. در مثال ضمیمه شده از این تم‌ها در سایر عناصر صفحه استفاده شده که برای نمونه می‌توانید به این مثال نیز مراجعه کنید.

ضمایم:

در پایان چند فایل فشرده شده ضمیمه کرده‌ام. فایل اول نمونه ای از امکانات مختلف این کنترل به همراه نمونه استفاده از تم‌های این کتابخانه است که در قالب یک پروژه نمونه آماده شده‌است. در این مثال نحوه استفاده از اسکریپت‌های jQuery که به طور پیش‌فرض به صفحه اضافه می‌شوند نیز نشان داده شده است.
فایل دوم حاوی dll اصلی این کتابخانه با پشتیبانی از MS AJAX است و فایل سوم همین کتابخانه بدون پشتیبانی از MS AJAX است.
در نهایت فایل آخر سورس کتابخانه است که استفاده از آن تحت مجوز CPL مجاز است.

بروزرسانی:

نسخه 1.0.4.0 این کتابخانه ضمیمه شد. در این نسخه، امکان استفاده از تقویم هجری قمری اضافه شده است. ضمنا در این نسخه، کتابخانه در دو حالت با استفاده از MS AJAX و بدون استفاده از آن آماده شده است.
مشکلات حل شده در این نسخه:

بروزرسانی 2:

نسخه 1.1.0.0 این کتابخانه ضمیمه شد. در این نسخه، علاوه بر چند تغییر و رفع چند مشکل کوچک، از jquery ui نسخه 1.8 و jquery نسخه 1.4.2 استفاده شده است.

ضمیمهاندازه
پروژه نمونه (دموی کتابخانه نسخه 1.1.0.0)371.99 کیلو بایت
کتابخانه نسخه 1.1.0.0 با پشتیبانی از MS AJAX324.76 کیلو بایت
کتابخانه نسخه 1.1.0.0 بدون پشتیبانی از MS AJAX324.71 کیلو بایت
JQControls-Source.zip1.02 مگابایت