@majidh1/jalalidatepicker
Advanced tools
Changelog
نسخه 0.9.4
تغییر EventListener به دلیل مشکل در zone.js
Readme
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();
بعد از لود فایل js یک object به نام jalaliDatepicker به صورت global که شامل 4 متد زیر است.ایجاد میشود
jalaliDatepicker.startWatch(options);
jalaliDatepicker.show(input);
jalaliDatepicker.hide();
jalaliDatepicker.updateOptions(options);
startWatch(options) شروع کار و پردازش روی input هاshow(input) نمایش روی یک inputhide مخفی شدنupdateOptions آپدیت تنظیمات بعد از startWatch| 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 | - | متد رندر یک روز خروجی یک آبجکت از تنظیمات روز است |
برای نمایش تعطیلی 4 روز ابتدایی سال
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
FAQs
A lightweight and simple jalali datepicker.
The npm package @majidh1/jalalidatepicker receives a total of 839 weekly downloads. As such, @majidh1/jalalidatepicker popularity was classified as not popular.
We found that @majidh1/jalalidatepicker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.