jalalidatepicker
v0.6.0
Published
A lightweight and simple jalali datepicker.
Downloads
41
Maintainers
Readme
JalaliDatePicker
نصب و استفاده
1- با استفاده از npm یا فولدر dist در همین مخزن آخرین نسخه را دریافت کنید
<link type="text/css" rel="stylesheet" href="jalalidatepicker.min.css" />
<script type="text/javascript" src="jalalidatepicker.min.js"></script>
<input data-jdp>
jalaliDatepicker.startWatch();
تنظیمات
Info & Methods
بعد از لود فایل js یک object به نام jalaliDatepicker به صورت global که شامل 3 متد زیر است.ایجاد میشود
jalaliDatepicker.startWatch(options);
jalaliDatepicker.show(input);
jalaliDatepicker.hide();
startWatch(options)
شروع کار و پردازش روی input هاshow(input)
نمایش روی یک inputhide
مخفی شدن
Options
key | default | description
----|---------|------------
autoShow
| true | نمایش خودکار
autoHide
| true | مخفی شدن خودکار
useDropDownYears
| true | انتخاب سال به صورت DropDown
separatorChar
| "/"
| جداکننده بین سال، ماه و روز
minDate
| null | مشخص کننده حداقل تاریخ. در صورتی که برابر با today
باشد روز جاری
است. در صورتی که برابر با attr
باشد برابر با مقدار data-jdp-min-date
attrubute است
maxDate
| null | مشخص کننده حداکثر تاریخ. در صورتی که برابر با today
باشد روز جاری
است. در صورتی که برابر با attr
باشد برابر با مقدار data-jdp-max-date
attrubute است
initDate
| null | تاریخی که به صورت پیشفرض نمایش داده میشود در صورتی که تنظیم نشود برابر است با روز جاری
.
plusHtml
| "svg"
| html مربوط به دکمه افزایش سال و ماه
minusHtml
| "svg"
| html مربوط به دکمه کاهش سال و ماه
container
| "body" | datepicker در کجا ساخته شود
dpContainer
| null | Container مربوط به datepicker
selector
| "input[data-jdp]" | selector مربوط به autoShow
zIndex
| 1000 | zIndex مربوط به datepicker
days
| ["ش", "ی", "د", "س", "چ", "پ", "ج"] | نام روزهای هفته
months
| ["فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"] | نام ماههای موجود
changeMonthRotateYear
| false | با تغییر ماه سال نیز کم یا زیاد شود
showTodayBtn
| true | نمایش دکمه امروز
showEmptyBtn
| true | نمایش دکمه پاکسازی
autoReadOnlyInput
| dynamic
| فقط خواندنی شدن input دارای datePicker
topSpace
| 0 | فضای خالی بین بالای datePicker و input (زمانی که دیتپیکر در پایین اینپوت هست)
bottomSpace
| 0 | فضای خالی بین پایین datePicker و input (زمانی که دیتپیکر در بالای اینپوت هست)
dayRendering
| - | متد رندر یک روز خروجی یک آبجکت از تنظیمات روز است
مثال dayRendering:
برای نمایش تعطیلی 4 روز ابتدایی سال
jalaliDatepicker.startWatch({
dayRendering:function(dayOptions,input){
return {
isHollyDay: dayOptions.month==1 && dayOptions.day<=4,
// isValid = false, امکان غیر فعال کردن روز
// className = "nowruz" امکان افزودن کلاس برای درج استایل به روز
}
}
})