# JalaliDatePicker
[](https://www.npmjs.com/package/@majidh1/jalalidatepicker)
[](https://raw.githubusercontent.com/majidh1/JalaliDatePicker/main/LICENSE)
## The English version of the documentation may be available [Here](/README-en.md).
[نصب و استفاده](#نصب-و-استفاده) [تنظیمات](#options) [تاریخچه تغییرات نسخه](https://github.com/majidh1/JalaliDatePicker/blob/main/ChangeLog.md) [نمونه پیاده سازی](https://github.com/majidh1/JalaliDatePicker/blob/main/Sample.md) ## نصب و استفاده 1- با استفاده از npm یا فولدر dist در همین مخزن آخرین نسخه را دریافت کنید
npm i @majidh1/jalalidatepicker
OR
https://github.com/majidh1/JalaliDatePicker => /dist/
2- دوفایل زیر را به پروژه اضافه کنید
OR
https://github.com/majidh1/JalaliDatePicker => /dist/
```html
```
یا استفاده از CDN
```html
```
3- به inputهای مورد نیاز Attribute زیر را اضافه کنید.
data-jdp
```html
```
4- برای شروع کارکرد از تکه کد زیر استفاده کنید
```javascript
jalaliDatepicker.startWatch();
```
## تنظیمات
#### Info & Methods
بعد از لود فایل js یک object به نام jalaliDatepicker به صورت global که شامل 4 متد زیر است.ایجاد میشود
``` javascript
jalaliDatepicker.startWatch(options);
jalaliDatepicker.show(input);
jalaliDatepicker.hide();
jalaliDatepicker.updateOptions(options);
```
1. `startWatch(options)` شروع کار و پردازش روی input ها
2. `show(input)` نمایش روی یک input
3. `hide` مخفی شدن
4. `updateOptions` آپدیت تنظیمات بعد از startWatch
### 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` | "input[data-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` | - | متد رندر یک روز خروجی یک آبجکت از تنظیمات روز است #### نمونه‌های codepen: [لینک کالکشن](https://codepen.io/collection/wajWMo) #### مثال dayRendering: برای نمایش تعطیلی 4 روز ابتدایی سال
```javascript
jalaliDatepicker.startWatch({
dayRendering:function(dayOptions,input){
return {
isHollyDay: dayOptions.month==1 && dayOptions.day<=4,
// isValid = false, امکان غیر فعال کردن روز
// className = "nowruz" امکان افزودن کلاس برای درج استایل به روز
}
}
})
```
ATTR On Input:
data-jdp
data-jdp-min-date
data-jdp-max-date
data-jdp-only-date
data-jdp-only-time