@majidh1/jalalidatepicker NPM

JalaliDatePicker

نصب و استفاده

1- با استفاده از npm یا فولدر dist در همین مخزن آخرین نسخه را دریافت کنید

<link type="text/css" rel="stylesheet" href="jalalidatepicker.min.css" />
<script type="text/javascript" src="jalalidatepicker.min.js"></script>

یا استفاده از CDN

<link rel="stylesheet" href="https://unpkg.com/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.css">
<script type="text/javascript" src="https://unpkg.com/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.js"></script>

<input data-jdp>

jalaliDatepicker.startWatch();

تنظیمات

Info & Methods

بعد از لود فایل js یک object به نام jalaliDatepicker به صورت global که شامل 4 متد زیر است.ایجاد می‌شود

jalaliDatepicker.startWatch(options);
jalaliDatepicker.show(input);
jalaliDatepicker.hide();
jalaliDatepicker.updateOptions(options);

Options

key	default	description
`date`	true	امکان انتخاب تاریخ
`time`	false	امکان انتخاب زمان
`hasSecond`	true	امکان ثانیه در انتخاب زمان
`initTime`	null	زمان پیشفرض
`autoShow`	true	نمایش خودکار
`autoHide`	true	مخفی شدن خودکار هنگام کلیک خارج دیتپیکر یا اینپوت
`hideAfterChange`	true	مخفی شدن بعد از انتخاب تاریخ
`useDropDownYears`	true	انتخاب سال به صورت DropDown
`separatorChars(object)`	date: `'/'` between: `' '` time: `':'`	جداکننده بین سال، ماه و روزجداکننده بین تاریخ و زمانجداکننده بین ساعت، دقیقه و ثانیه
`persianDigits`	false	استفاده از کارکترهای یونیکد فارسی به جای کارکترهای انگلیسی
`minDate`	null	مشخص کننده حداقل تاریخ. در صورتی که برابر با `today` باشد `روز جاری` است. در صورتی که برابر با `attr` باشد برابر با مقدار `data-jdp-min-date` attrubute است
`maxDate`	null	مشخص کننده حداکثر تاریخ. در صورتی که برابر با `today` باشد `روز جاری` است. در صورتی که برابر با `attr` باشد برابر با مقدار `data-jdp-max-date` attrubute است
`initDate`	null	برابر با آبجکت تاریخی که به صورت پیشفرض نمایش داده می‌شود در صورتی که تنظیم نشود برابر است با `روز جاری`.
`today`	null	برابر با آبجکت تاریخ برای تعیین روز جاری به صورت پیشفرض از تاریخ سیستم محاسبه میشود
`plusHtml`	`"svg"`	html مربوط به دکمه افزایش سال و ماه
`minusHtml`	`"svg"`	html مربوط به دکمه کاهش سال و ماه
`container`	"body"	datepicker در کجا ساخته شود
`selector`	"inputdata-jdp"	selector مربوط به autoShow
`zIndex`	1000	zIndex مربوط به datepicker
`days`	"ش", "ی", "د", "س", "چ", "پ", "ج"	نام روزهای هفته
`months`	"فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"	نام ماه‌های موجود
`changeMonthRotateYear`	false	با تغییر ماه سال نیز کم یا زیاد شود
`showTodayBtn`	true	نمایش دکمه امروز
`showEmptyBtn`	true	نمایش دکمه پاکسازی
`showCloseBtn`	dynamic	نمایش دکمه بستن دیتپیکر
`autoReadOnlyInput`	`dynamic`	فقط خواندنی شدن input دارای datePicker
`topSpace`	0	فضای خالی بین بالای datePicker و input (زمانی که دیتپیکر در پایین اینپوت هست)
`bottomSpace`	0	فضای خالی بین پایین datePicker و input (زمانی که دیتپیکر در بالای اینپوت هست)
`dayRendering`	-	متد رندر یک روز خروجی یک آبجکت از تنظیمات روز است