Stronger: تقویم شمسی جاوا اسکریپت

درباره تقویم

بارها برای همه ما برنامه نویسان وب پیش آمده که در یک صفحه وب نیاز به گرفتن تاریخ از کاربر داریم، نبودن یک تقویم شمسی که بصورت Date Picker عمل نماید، این ایده را به من داد که باید خودم دست به کار شوم. بالاخره با بررسی Date Picker های موجود، تصمیم به تغییر آن و ایجاد این تقویم که میبینید گرفتم.
این برنامه اولین سری از تقویم شمسی سمت کلاینت است که بطور 100% با جاوا اسکریپت نوشته شده و بصورت انتخاب تاریخ (Date Picker) کار میکند و اون رو میتونین در هرجایی از صفحه وب تون که نیاز به گرفتن ورودی تاریخ از کاربر دارین قرار بدین و تاریخ مورد نظر را از کاربر دریافت نمایید.
استفاده از این تقویم که بصورت یه فایل جاوااسکریپت به برنامه شما اضافه میشود بسیار ساده میباشد و با زدن یک لینک یا هر طوری که خودتون تعریف میکنین، این تقویم ظاهر شده و کاربر شما میتونه بجای تایپ تاریخ در فرم، روز مورد نظر خودش رو از تقویم انتخاب کنه و بصورت خودکار در فیلد شما وارد نماید.
این امکان چیز جدیدی نیست و تا بحال بصورتهای مختلفی مثل کامپوننت در دلفی، کنترل ActiveX برای برنامه های ویژوال بیسیک، تقویم استاتیک در PHP و حتی بصورت یک کامپوننت که در برنامه های ASP.net استفاده کنید وجود داشته است. ولی داشتن یه تقویم به این صورت با جاوا اسکریپت که از آن به راحتی در هر صفحه و برنامه ای حتی در یه صفحه استاتیک HTML بتوان استفاده کرد تا بحال وجود نداشته.
بهرحال امیدوارم از داشتن این تقویم که بصورت رایگان در اختیار شما قرار میدهم، استفاده و لذت کامل را ببرید.

دریافت تقویم شمسی جاوااسکریپت

آخرین نگارش اسکریپت تقویم شمسی را از اینجا دریافت نمایید

پکیج تقویم شمسی جاوا اسکریپت حاوی فایلهای زیر میباشد:

*dateScript.js*	مدول تبدیل تاریخ میلادی به شمسی
*persianPopupCalendar.js*	اسکریپت اصلی که عملیات تبدیل و نمایش تقویم را انجام میدهد
*specialDates.js*	تعاریف روزهای خاص
*sample.html*	صفحه نمونه
*calbtn.gif*	آیکون تقویم که در مثال بکار رفته است. شما میتوانید هر آیکونی را که خواستید و یا از یک لینک یا هر چیز دیگری استفاده نمایید.

طرز استفاده از برنامه تقویم شمسی

استفاده از این برنامه در صفحه وب سایتتان بسیار ساده میباشد و در سه قدم انجام میگیرد.

ابتدا این دو سطر را به ابتدای فایل صفحه ای که میخواهید از تقویم استفاده نمایید، اضافه کنید. میتوانید بطور مثال آنها را بین دو تگ Head و Body قرار دهید.

<Script Language="JavaScript" Src="dateScript.js"></Script>

<Script Language="JavaScript" Src="persianPopupCalendar.js"></Script>

بعنوان قدم بعدی، در انتهای فایل وب و قبل از تگ <Body/> تقویم خود را تعریف کنید، شما میتوانید هر تعداد که بخواهید از این تقویم در صفحه خود استفاده کنید.
برای تعریف تقویم بایستی از تابع addCalendar استفاده کنید که فرم کلی آن بشکل زیر میباشد.

addCalendar(calendarName, title, controlName, formName)

که توضیح هریک از متغیرهای آن بدین صورت است:

*calendarName:*	نام تقویم، با این کار برای تقویم خود یک نام انتخاب میکنید که اسکریپت بداند کدام تقویم را باید نمایش دهد
*title:*	عنوان تقویم که دیگر استفاده نمیشود، این قسمتی از نگارش اولیه تقویم بود که بصورت یه پنجره ظاهر میشد
*controlName:*	نام کنترل متنی که بعد از کلیک بر روی یک تاریخ، تاریخ روز در آن قسمت ظاهر شود
*formName:*	نام فرمی است که حاوی تقویم شماست، مشخص نمودن این پارامتر هم مربوط به نگارشهای قبل از 1.5 است، در این نگارش می‌توانید آنرا خالی بگذارید.

در این مثال من برای شما دو تقویم تعریف کرده ام.

<Script Language="JavaScript">

addCalendar("calFirstDate", "Select Date", "myFirstDate", "");

addCalendar("calSecondDate", "Select Date", "mySecondDate", "");

</Script>

اینهم تقویم شما که در هرجای صفحه که خواستید تعریف میکنید

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

<HTML>

<HEAD>

<TITLE>Persian Calendar Test</TITLE>

</HEAD>
<Script Language="JavaScript" Src="dateScript.js"></Script>

<Script Language="JavaScript" Src="persianPopupCalendar.js"></Script>
<BODY>
<Form Name="myForm" Method="Post" Action="">
<input type="text" name="myFirstDate" size="30" Value="">

<a href="javascript:void(0)" onclick="showCal('calFirstDate'); return false;" HIDEFOCUS><img name="popcal" align="absmiddle" src="calbtn.gif" border="0" alt="Select Date"></a>

<br>

<input type="text" name="mySecondDate" size="30" Value="">

<a href="javascript:void(0)" onclick="showCal('calSecondDate'); return false;" HIDEFOCUS><img name="popcal" align="absmiddle" src="calbtn.gif" border="0" alt="Select Date"></a>
</Form>
<Script Language="JavaScript">

addCalendar("calFirstDate", "Select Date", "myFirstDate", "");

addCalendar("calSecondDate", "Select Date", "mySecondDate", "");

</Script>
</BODY>
</HTML>

مشخص کردن روزهای خاص

مشخص کردن روزهای خاص هم بسیار ساده بوده و توسط یک تابع کوچک به نام addSpecialDate انجام می‌گیرد

شکل کلی و پارامترهای مورد نیاز این تابع به این صورت است:

function addSpecialDate(specialDay, specialMonth, specialText, dateSelectable)

که توضیح هریک از متغیرهای آن به این صورت است:

*specialDay:*	مشخص کننده روز است و طبیعتا عددی بین 1 تا 31 می‌باشد
*specialMonth:*	مشخص کننده ماه است و باز هم طبیعتا عددی بین 1 تا 12 است
*specialText:*	متنی که برای آن روز بایستی نمایش داده شود
*dateSelectable:*	این پارامتر هم برای مشخص کردن اینکه آیا آن روز قابلیت انتخاب شدن داشته باشد یا خیر است، میتواند یکی از مقادیر true و یا false را داشته باشد

برای مشخص کردن روزهای خاص مورد نظرتان یک فایل مثل specialDates.js را تشکیل دهید و تمامی روزهایی را که می‌خواهید به فرم صدا زدن تابع addSpecialDate در آن اضافه کنید.

در مرحله بعدی نام فایل خود را در زیر دو فایل اصلی جاوا اسکریپت بیاورید، بدین صورت:

برای مثالهای بیشتر به فایل specialDates.js که ضمیمه بسته اصلی برنامه کرده‌ام مراجعه کنید.

1 comment:

Anonymous17 May 2013 at 03:51
با سلام
مي خواهم از اسکريپت تقويم شما تشکر کنم
ميدانيد که امروزه از ابزارهايي مثل جي کوئري بيشتر استفاده مي شود

اما در بعضي از سيستم ها نمي شود از جي کوئري استفاده کرد

مثل processmaker

من بعد از مدت زيادي جستجو اسکريپت شمارا پيدا کردم و تونستم به راحتي از آن استفاده کنم
و در فرم هاي processmaker
امکان datepicker
شمسي را ايجاد کنم

باز هم تشکر مي کنم
hzolfaly@yahoo.com