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

وارد کردن تاریخ شمسی در نرم‌افزارهای تحت وب( Web Application ) با به گونه‌ای که سازگاری با مرورگرهای مختلف و بیشترین کارایی فراهم شود یکی از دغدغه‌های مهم برنامه‌نویسان وب است.

jspcal

کاربران قدیمی: این نسخه( ۰.۲.۱ ) تغییرات مهمی داشته است که لازم است پیش از به‌روزرسانی آن‌ها را در اسکریپت‌های خود اعمال کنید

تقویم‌های گوناگونی توسط افراد مختلف نوشته شده‌اند که هر یک مشکلات خاص خود را دارند. برای از بین بردن تمامی مشکلات موجود، تصمیم گرفتم تقویم جدیدی با قابلیت‌های منحصربه‌فرد و بیشترین کارایی را از پایه طراحی و کدنویسی کنم

سه ویژگی مهم در تقویم ایجاد شده عبارتند از:

    دقیق‌ترین الگوریتم محاسبه‌ی تاریخ با پشتیبانی از سال‌های خورشیدی تا سال ۹۹۹۹
    شناسایی هوشمند بیش از ۱۸ مدل ورود دستی تاریخ توسط کاربر
    تغییر ظاهر تقویم تنها با امکانات CSS

مهم‌ترین ویژگی این تقویم امکان ورود تاریخ به صورت دستی توسط کاربر است:
فرمت‌های قابل قبول برای ورود تاریخ عبارتند از:

    ۹۰۰۸۱۴
    ۱۴۰۸۹۰
    ۱۳۹۰۰۸۱۴
    ۱۴/۸/۹۰
    ۹۰/۸/۱۴
    ۱۴/۸/۱۳۹۰
    ۱۳۹۰/۸/۱۴
    ۱۴-۸-۹۰
    ۹۰-۸-۱۴
    ۱۴-۸-۱۳۹۰
    ۱۳۹۰-۸-۱۴

و فرمت‌های ویژه:

    ۰۸۱۴
    ۱۴۰۸
    ۱۴-۸
    ۸-۱۴
    ۱۴/۸
    ۸/۱۴
    ۱۴

در فرمت‌های ویژه که سال و ماه وارد نشده‌اند، سال و ماه فعلی به حساب خواهد آمد.
در فرمت‌هایی که سال مشخص نشده باشد، دو رقم ابتدایی در صورت امکان روز محاسبه خواهند شد

روش به‌کارگیری تقویم در صفحات وب

استفاده از این تقویم بسیار ساده است
ابتدا فیلد متنی خود را در متن صفحه قرار دهید:

 <input type="text" id="pcal1" class="pdate">

سپس فایل جاوااسکریپت و قالب‌بندی CSS را در سرآمد فایل HTML قرار دهید:

<link rel="stylesheet" href="js-persian-cal.css">
<script src="js-persian-cal.min.js"></script>

دستور تبدیل فیلد متنی به فیلد تاریخ را در انتهای صفحه و در تگ اسکریپت قرار دهید:

 

<script> var objCal1 = new AMIB.persianCalendar( 'pcal1' ); </script>

پارامتر تعریف شده شناسه‌ی( id ) فیلد متنی است که به فیلد تاریخ تبدیل خواهد شد.

پارامتر دوم به تنظیمات اضافی اختصاص دارد و اختیاری است
پارامتر دوم شیءی درون‌خطی با فرمت JSON است. برای نمونه به مثال زیر توجه کنید:

<input type="text" id="pcal1" class="pdate">
<input type="hidden" name="extra" id="extra">
 
<script>
	var objCal1 = new AMIB.persianCalendar( 'pcal1',
		{ extraInputID: "extra", extraInputFormat: "YYYYMMDD" }
	);
</script>

دستور بالا سبب می‌شود فیلد اضافی با شناسه‌ی extra تاریخ را با فرمتی دیگر ذخیره کند
این قابلیت به برنامه‌نویسان در ارزیابی و تبدیل تاریخ یاری می‌رساند

گزینه‌های قابل تغییر – اختیاری

 

    extraInputID : شناسه‌ی فیلد اضافی
    extraInputFormat : فرمت فیلد اضافی
    onchange: تابعی که هنگام تغییر تاریخ به صورت خودکار فراخوانی می‌شود( به مثال‌ها مراجعه کنید )
    initialDate: تاریخ پیش‌فرض که هنگام ایجاد فیلد در آن قرار می‌گیرد.
    defaultDate: چنانچه مقدار فیلد تاریخ معتبری نباشد و کاربر تقویم را باز کند، این تاریخ به او نشان داده می‌شود.
    divPickerClassName : نام کلاس div اصلی حاوی تقویم برای قالب‌بندی
    btnClassName : نام کلاس a دکمه‌ی تقویم برای قالب‌بندی

فرمت‌های قابل قبول برای فیلد اضافی عبارتند از:

    YYYY سال میلادی – چهار یا پنج رقمی
    MM ماه میلادی – دو رقمی
    DD روز میلادی – دو رقمی
    YY سال میلادی – دو رقمی
    M ماه میلادی – یک یا دو رقمی
    D روز میلادی – یک یا دو رقمی
    yyyy سال خورشیدی – چهار رقمی
    mm ماه خورشیدی – دو رقمی
    dd روز خورشیدی – دو رقمی
    yy سال خورشیدی – دو رقمی
    m ماه خورشیدی – یک یا دو رقمی
    d روز خورشیدی – یک یا دو رقمی
    JD روز جولین( تعداد روزهای گذشته از یکم ژانویه سال ۴۷۱۳ پیش از میلاد مسیح(ع) )

فهرست قابلیت‌های تقویم شمسی جاوااسکریپت

  •     تغییر ماه و سال با کلیک بر روی دکمه‌های قبل و بعد
  •     تغییر ماه و سال با امکان انتخاب از فهرست
  •     افزایش و کاهش تاریخ با استفاده از کلیدهای بالا و پایین در فیلد
  •     امکان فعال و غیرفعال کردن تقویم به صورت موقت
  •     تغییر تاریخ به تاریخ فعلی با کلیک بر روی لینک مخصوص
  •     ارزیابی ورودی کاربر و تشخیص تاریخ با ۱۸ فرمت مختلف
  •     تغییر قالب DatePicker تنها با تغییر در فایل CSS
  •     تشخیص اعداد فارسی و لاتین
  •     امکان تبدیل آنلاین تاریخ به فرمت‌های مختلف و ذخیره در فیلد اضافی
  •     پشتیبانی از مرورگرهای مختلف
  •     مصرف کم حافظه، سرعت و دقت بسیار بالا
  •     حجم کم سرآمد( تنها ۱۴ کیلوبایت )
  •     استفاده‌ی بسیار آسان

 

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

پوسته‌ی اصلی

پوسته‌ی تیره

پوسته‌ی فیروزه‌ای فسفری

پوسته‌ی هلویی

 

دریافت تقویم فارسی جاوااسکریپت – ویرایش ۰.۲.۱ – ۱۰ فروردین ۱۳۹۲

 

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

 CDN

دسترسی به فایل اسکریپت از طریق CDN رایگان jsDelivr مقدور است. توجه کنید که این میزبان تضمینی برای پایداری ارائه نمی‌کند و استفاده از آن در پروژه‌هایی با اهمیت بالا توصیه نمی‌شود.

<script src="//cdn.jsdelivr.net/jspersiancal/0.2.1/js-persian-cal.min.js"></script>

 jQuery

روشی آسان برای تبدیل فیلدها به تقویم با کمک jQuery معرفی کردند:
۱- در انتهای فایل اصلی اسکریپت کد زیر را اضافه کنید

( function( $ ) {
	$.fn.persiancalendar = function(extra) {
		return this.each( function( index, element ) {
			id = jQuery(element).attr("id");
			new AMIB.persianCalendar( id, extra );
		} );
	};
})( jQuery );

 ۲- با این قطعه کد می‌توان تمامی id‌هایی که مثلا با pcal شروع می‌شوند را تبدیل به فیلد تاریخ کرد:

jQuery("input[id^=pcal]").persianCalendar( {
	initialDate: '1392-10-20',
	defaultDate: '1392-10-20'
} );
خواندن 6351 دفعه

نظر شما چیست ؟