MD.BootstrapPersianDateTimePicker

توسط محمد دیان mds_soft@yahoo.com

---

پیش نیازها:

• Bootstrap، تا این لحظه این پلاگین با Bootstrap v3.3.7 تست و راه اندازی شده است
• JQuery، تا این لحظه این پلاگین با JQuery 3.1.0 تست و راه اندازی شده است

---

نحوه استفاده:

به دو روش میتوان از این پلاگین استفاده نمایید:

1. با استفاده از کد جاوا اسکریپت و جی کوئری:

در این روش همانند استفاده از تمامی پلاگین های جی کوئری میتوانید از این پلاگین نیز استفاده نمایید:

$('#ElementId').MdPersianDateTimePicker({
    Placement: 'left',
    Trigger: 'click',
    EnableTimePicker: false,
    TargetSelector: '#TargetId',
    GroupId: '',
    ToDate: false,
    FromDate: false,
    DisableBeforeToday: false,
    Disabled: false,
    Format: 'yyyy/MM/dd',
    IsGregorian: false
});

شما میتوانید هر کدام از optionهای بالا را حذف نمایید یا کلا هیچ پارامتری به MdPersianDateTimePicker ارسال ننمایید

$('#ElementId').MdPersianDateTimePicker()

Optionهای پلاگین:

• Placement
  نوع : string
  مقادیر عبارتند از: left top right bottom
  توسط این آیتم میتوانید محل قرار گرفتن تقویم را تعیین کنید، مقادیری که این آیتم میگیرد دقیقا همان هایی هست که پارامتر Placement در Popover بوت استرپ میگیرد

• ---

  Trigger
  نوع : string
  برخی از نمونه مقادیری که میتوانید برای این پارامتر استفاده نمایید: click, focus, mouseover, ...
  تعیین میکند که چگونه تقویم نمایش داده شود، مثلا با کلیک کردن نمایش داده شود یا با رفتن موس روی المان و یا ...، این پارامتر نیز دقیقا مقادیری رو میگیرد که پارامتر trigger در Popover بوت استرپ میگیرد

• ---

  EnableTimePicker
  نوع : boolean
  مقادیر عبارتند از: true false
  تکس باکس های زمان که در زیر تقویم تعبیه شده اند را فعال یا غیر فعال میکند و به کاربر اجازه میدهد تا زمان را نیز وارد نماید

• ---

  TargetSelector
  نوع : string
  سلکتور المانی از HTML که تقویم باید روز انتخاب شده را درون آن نمایش دهد، برای آشنایی بیشتر با سلکتورها این لینک را مطالعه نمایید

• ---

  GroupId
  نوع : string
  هنگامی که دارید دو تا تقویم در صفحه قرار میدید برای "از تاریخ" - "تا تاریخ" برای اینکه این تقویم ها همدیگر رو پیدا کنند باید برای هر دو GroupId یکسان قرار دهید، دقت نمایید که GroupId تنها برای مرتبط کردن دو تقویم است نه بیشتر

• ---

  ToDate
  نوع : boolean
  مقادیر عبارتند از: true false
  تعیین میکند که تقویم "تا تاریخ" می باشد، در این مد تقویم مراقب است که تاریخی که کاربر انتخاب میکند از مقدار انتخاب شده در "از تاریخ" کوچکتر نباشد

• ---

  FromDate
  نوع : boolean
  مقادیر عبارتند از: true false
  تعیین میکند که تقویم "از تاریخ" می باشد، در این مد تقویم مراقب است که تاریخی که کاربر انتخاب میکند از مقدار انتخاب شده در "تا تاریخ" بزرگتر نباشد

• ---

  DisableBeforeToday
  نوع : boolean
  مقادیر عبارتند از: true false
  انتخاب روزهای قبل از امروز رو غیر فعال میکند

• ---

  Disabled
  نوع : boolean
  مقادیر عبارتند از: true false
  تقویم به طور موقت غیر فعال می شود

• ---

  IsGregorian
  نوع : boolean
  مقادیر عبارتند از: true false
  تعیین میکند تقویم میلادی باشد یا شمسی در صورت true بودن تقویم میلادی نمایش داده می شود

• ---

  EnglishNumber
  نوع : boolean
  مقادیر عبارتند از: true false
  اعداد روز انتخاب شده به صورت انگلیسی نمایش داده شوند یا فارسی

• ---

  Format
  نوع : string
  فرمت نمایش روز انتخاب شده تقویم، فرمت هایی که این پلاگین در حال حاضر پشتیبانی می کند
  yyyy: سال چهار رقمی
  yy: سال دو رقمی
  MMMM: نام فارسی ماه
  MM: عدد دو رقمی ماه
  M: عدد یک رقمی ماه
  dddd: نام فارسی روز هفته
  dd: عدد دو رقمی روز ماه
  d: عدد یک رقمی روز ماه
  HH: ساعت دو رقمی با فرمت 00 تا 24
  H: ساعت یک رقمی با فرمت 0 تا 24
  hh: ساعت دو رقمی با فرمت 00 تا 12
  h: ساعت یک رقمی با فرمت 0 تا 12
  mm: عدد دو رقمی دقیقه
  m: عدد یک رقمی دقیقه
  ss: ثانیه دو رقمی
  s: ثانیه یک رقمی
  fff: میلی ثانیه 3 رقمی
  ff: میلی ثانیه 2 رقمی
  f: میلی ثانیه یک رقمی
  tt: ب.ظ یا ق.ظ
  t: حرف اول از ب.ظ یا ق.ظ

---

2. با استفاده از Attributeهای خاص روی تگ ها:

در این روش بدون نیاز به نوشتن کدهای جاوا اسکریپت میتوانید این پلاگین را برای تگی مشخص و فعال نمایید
برای فعال کردن تقویم باید Attribute زیر را روی تگ قرار دهید

data-mddatetimepicker="true"

برای Set کردن پارامترها نیز کافی هست آنها تبدیل به Attribute کنید و روی تگ بزنید
برای تبدیل هم کافی است آن پارامتر را با حروف کوچک نوشته و قبل از آن data قرار دهید، به مثال زیر دقت کنید

<div class="input-group-addon" data-mddatetimepicker="true" data-targetselector="#exampleInput1" data-trigger="click" data-enabletimepicker="true" data-isgregorian="false" data-englishnumber="false">
    <span class="glyphicon glyphicon-calendar"></span>
</div>