نوشته های شخصی و فنی مهدی هاشمی نژاد

برای انتخاب تاریخ (DatePicker) توسط JavaScript توابع زیادی نوشته شده و یکی از جالبترین آنها پلاگینی است که در jQueryUI وجود دارد. این پلاگین امکان شخصی شدن زیادی دارد ولی متاسفانه امکان استفاده از تقویم شمسی در آن وجود ندارد.
در اینجا نسخه اصلاح شده این تقویم را که پشتیبانی از تاریخ هجری شمسی را به آن اضافه کرده ام، به همراه نحوه استفاده و چند مثال ارایه نموده ام. ضمنا کلیه فایلهای مورد استفاده در اینجا به صورت یک فایل فشرده قابل دریافت است. در این نسخه امکان اضافه کردن تقویم های دیگر نیز به سادگی وجود دارد. به عنوان مثالی از چگونگی اضافه کردن تقویم جدید، تقویم هجری قمری را نیز پیاده سازی کرده ام و در مثال ضمیمه قابل مشاده است.

توضیح کد:
با توجه به نیازی که به این تقویم داشتم، تغییرات بسیار مختصری در پلاگین اصلی دادم و در نتیجه آن، امکان تغییر تقویم مورد استفاده در آن را نیز اضافه نمودم. این نسخه اصلاح شده، تحت نام ui.datepicker-cc.js موجود است (پسوند cc به معنی Custom Calendar است).
در ادامه برای اضافه کردن تقویم شمسی، یک کلاس جدید به اسم JalaliDate ایجاد کردم که مشابه کلاس Date در جاوااسکریپ عمل می کند. البته این کلاس شامل تمامی متدهای کلاس Date نمیشود و تنها متدهایی که در اینجا نیاز بود، پیاده سازی شد. این کلاس در حقیقت یک پوسته برای توابع تقویم جلالی پروژه فارسی وب است. این کلاس با استفاده از توابع موجود در اینجا پیاده سازی شده است. پیاده سازی سایر تقویم ها نیز با استفاده از توابع موجود در این سایت به سادگی امکان پذیر است. در نهایت فایل به نام ui.datepicker-cc-fa.js ایجاد کردم که کلیه تنظیمات لازم برای شمسی شدن تقویم و فارسی شدن این پلاگین را دارد. کلیه فایلهای ذکر شده را می توانید از ضمیمه این مقاله دریافت کنید.

روش استفاده:
استفاده از این پلاگین همانند تمام پلاگینهای دیگر jQuery است. برای این کار باید فایلهای css مربوط به theme مورد علاقه خود را به فایل html اضافه کنید.
سپس بعد از اضافه کردن اسکریپتهای jquery.js و ui.core.js (که در تمام پلاگینهای jQuery انجام میشود)، فایلهای ارایه شده در اینجا (ui.datepicker-cc.min.js و calendar.min.js و ui.datepicker-cc-fa.js) را اضافه کنید. به عنوان مثال در بخش head فایل html خود، قسمتی مشابه کد زیر خواهید داشت:

<link type="text/css" href="ui.core.css" rel="stylesheet" />
<link type="text/css" href="ui.theme.css" rel="stylesheet" />
<link type="text/css" href="ui.datepicker.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="ui.core.min.js"></script>
<script type="text/javascript" src="ui.datepicker-cc.min.js"></script>
<script type="text/javascript" src="calendar.min.js"></script>
<script type="text/javascript" src="ui.datepicker-cc-fa.js"></script>

حالت پیشفرض

$('#datepicker1').datepicker();

پرکردن فیلد اضافی

$("#datepicker2").datepicker({
    altField: '#alternate2', 
    altFormat: 'DD، d MM yy'
});

نمایش دکمه ها

$('#datepicker3').datepicker({
	showButtonPanel: true
});

تغییر قالب نمایش تاریخ

	$("#datepicker4").datepicker({
	    dateFormat: 'dd/mm/yy'
	});
	$("#format4").change(function() { 
	    $('#datepicker4').datepicker('option', {dateFormat: $(this).val()}); 
	});

استفاده از dropdown

$('#datepicker5').datepicker({
	changeMonth: true,
	changeYear: true
});

انتخاب با کلیک بر روی عکس

$("#datepicker6").datepicker({
    showOn: 'button', 
    buttonImage: 'calendar.gif', 
    buttonImageOnly: true
});

نمایش inline

$('#datepicker7').datepicker();

نمایش چند ماه

$('#datepicker8').datepicker({
	numberOfMonths: 3,
	showButtonPanel: true
});

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

بروزرسانی 2: نسخه سوم (رفع باگهای مربوط به حداقل و حداکثر تاریخ که در اینجا و اینجا گزارش شده بود) ضمیمه شد. ضمنا در این ضمیمه، مثالهای استفاده از حداقل و حداکثر تاریخ نیز اضافه شده است.

بروزرسانی 3: نسخه چهارم ضمیمه شد. در این نسخه یک باگ کوچک دیگر در ارتباط با تنظیم حداقل و حداکثر تاریخ برطرف شد. در این ضمیمه، مثال استفاده از حداقل به صورت پویا اضافه شده است.

بروزرسانی 4: نسخه پنجم ضمیمه شد. در این نسخه امکان استفاده همزمان از تقویم شمسی و میلادی یک صفحه فراهم شده است. نمونه ای از روش استفاده در مثال ضمیمه وجود دارد. همچنین نسخه فشرده شده اسکریپت (برای کاهش حجم صفحات) نیز ضمیمه شده است و در مثال از آن استفاده شده است.

بروزرسانی 5: کنترل سفارشی انتخاب تاریخ برای ASP.NET ایجاد شده و در اینجا قابل مشاهده است.

بروزرسانی 6: تغییرات مختصری در اسکریپتها داده شد و تقویم شمسی استفاده شده عوض شد. با اعمال این تغییرات، تعریف تقویم جدید ساده تر شده است. همچنین امکان استفاده از تاریخ هجری قمری نیز به همراه مثالی برای استفاده از آن اضافه شد.

بروزرسانی 7: مشکلات نسخه آخر تقویم در IE و همینطور مشکل موجود در هنگام استفاده از setDate برطرف شد.

بروزرسانی 8: در نسخه جدید از jquery ui نسخه 1.8 به همراه jquery نسخه 1.4.2 استفاده شده است.