jQuery kamaDatepicker Plugin Demos


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


حالت پیشفرض
  • تغییر رنگ دکمه ها
حالت سفارشی 1#
  • استفاده از placeholder
  • اعداد تک رقمی بدون صفر نمایش داده شوند
  • جلوگیری از بسته شدن تقویم بعد از انتخاب تاریخ
  • استفاده از font awesome برای دکمه های بعدی و قبلی
  • تغییر رنگ دکمه ها
  • نمایش اعداد به فارسی
  • متمایز کردن تاریخ امروز
  • متمایز کردن روزهای تعطیل
  • متمایز نشان دادن روز انتخاب شده
  • سینک شدن تقویم با مقدار ورودی
  • نمایش دکمه "برو به امروز"
حالت سفارشی 2#
  • استفاده از فایل های png به عنوان دکمه های بعدی و قبلی
  • نمایش اعداد به فارسی
  • متمایز کردن تاریخ امروز
  • متمایز کردن روزهای تعطیل
  • متمایز نشان دادن روز انتخاب شده
  • سینک شدن تقویم به ورودی

روش استفاده

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

HTML:

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

JavaScript:

kamaDatepicker('test-date-id');

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

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