تقویم شمسی کاما - نسخه 1.5.3


تقویم شمسی جاوااسکریپت (مبتنی بر jquery). در این صفحه (دمو) از bootstrap و font awesome هم استفاده شده است (فقط برای نشان دادن سازگاری تقویم)


حالت پیشفرض
حالت سفارشی 1#
حالت سفارشی 2#
حالت سفارشی 4#
حالت سفارشی 5-1#
حالت سفارشی 5-2#
بدون آی‌دی 1
بدون آی‌دی 2
بدون آی‌دی 3

روش استفاده

پس از اضافه کردن jquery به پروژه فایل های kamadatepicker.js و kamadatepicker.css را هم به پروژه خود اضافه کنید.

HTML:

<input type="text" id="test-date-id">

JavaScript:

kamaDatepicker('test-date-id');

یا

let myElement = document.querySelector('#test-date-id');
kamaDatepicker(myElement);

همچنین می توانید تنظیمات دلخواه را به عنوان پارامتر دوم اضافه کنید.

JavaScript:

kamaDatepicker('test-date-id', { buttonsColor: "red", forceFarsiDigits: true });

تنظیمات

توضیحات مقدار پیشفرض مقادیر قابل قبول نام
- "" string placeholder
در صورتی که true باشد اعداد یک رقمی مثل هشت با یک صفر اضافه (08) نمایش داده می شوند. true true, false twodigit
در صورتی که true باشد تقویم بعد از انتخاب یک روز بسته می شود. true true, false closeAfterSelect
می توانید آدرس یک عکس یا یک class از font awesome یا glyphy icons را به صورت string پاس دهید تا به جای عبارت "بعدی" در تقویم نمایش داده شود. بعدی string nextButtonIcon
می توانید آدرس یک عکس یا یک class از font awesome یا glyphy icons را به صورت string پاس دهید تا به جای عبارت "قبلی" در تقویم نمایش داده شود. قبلی string previousButtonIcon
می توانید یکی از اسامی استاندارد رنگ ها مانند "red" یا به صورت "#FF0000" را پاس دهید. پیشفرض string buttonsColor
در صورتی که true باشد بدون توجه به اینکه اعداد فارسی در فونت استفاده شده پشتیبانی می شوند یا نه، تقویم از اعداد فارسی برای نمایش اعداد استفاده می کند. false true, false forceFarsiDigits
در صورتی که true باشد تاریخ امروز را متامیز از بقیه روزها نشان می دهد. false true, false markToday
در صورتی که true باشد روزهای تعطیل (فعلا فقط جمعه ها) را متمایز از بقیه روزها نشان می دهد. false true, false markHolidays
در صورتی که true باشد تاریخ انتخاب شده را متمایز از بقیه روزها نشان می دهد. false true, false highlightSelectedDay
در صورتی که true باشد تقویم بعد از باز شدن سال و ماه متناسب با مقدار ورودی را نشان می دهد، در غیر اینصورت همیشه تاریخ امروز نمایش داده خواهد شد. false true, false sync
در صورتی که true باشد دکمه "برو به امروز" در پایین تقویم نمایش داده می شود. false true, false gotoToday
تعداد سال‌های قابل انتخاب، قبل از سال جاری 95 number pastYearsCount
تعداد سال‌های قابل انتخاب، بعد از سال جاری 6 number futureYearsCount
جابجا کردن دکمه‌های ماه بعدی و قبلی false true, false swapNextPrev
موقعیت نمایش تقویم
  • top: تقویم همیشه در بالای input مربوطه نمایش داده خواهد شد.
  • bottom: تقویم همیشه در پایین input مربوطه نمایش داده خواهد شد.
  • auto: در صورتی که پایین input فضای کافی برای نمایش تقویم وجود داشته باشد، تقویم در پایین input نمایش داده خواهد شد. در غیر اینصورت اگر در بالای input فضای کافی برای نمایش تقویم وجود داشته باشد، تقویم در بالای input نمایش داده خواهد شد. و در صورتی که نه پایین و نه بالای input فضای کافی برای نمایش تقویم وجود نداشته باشد، تقویم در پایین input نمایش داده خواهد شد.
 bottom top, bottom, auto position
id مربوط به parent element که موقعیت نمایش تقویم باید نسبت به آن محاسبه شود. string parentId

آرایه‌ای از objectها که می‌تواند لیست سفارشی از تعطیلات رسمی در قالب سال(اختیاری)، ماه و روز باشد. مقدار سال برای آن دسته از تعطیلاتی که هر سال در یک ماه و روز مشخص تکرار می‌شوند می‌تواند خالی باشد. ساختار object مورد نظر باید به شکل زیر باشد:

{ year: عدد, month: عدد بین 1 تا 12, day: عدد بین 1 تا 31 }

برای سهولت یک آرایه از کل تعطیلات سال‌های 1399 و 1400 در مسیر dist/kamadatepicker.holidays.js قرار داده شده است و می‌توانید از آن استفاده نمایید.

 [ { month: 1, day: 1 }, { month: 1, day: 2 }, { month: 1, day: 3 }, { month: 1, day: 4 }, { month: 1, day: 12 }, { month: 1, day: 13 }, { month: 3, day: 14 }, { month: 3, day: 15 }, { month: 11, day: 22 }, { month: 12, day: 29 } ] array holidays
در صورتی که true باشد روزهای تعطیل قابل انتخاب نخواهند بود. false true, false disableHolidays