@m52-a/datetimepicker

DateTimePicker

نصب و استفاده

تنظیمات

تاریخچه تغییرات نسخه

نصب و استفاده

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

&nbsp&nbsp&nbsp npm i @m52-a/datetimepicker
&nbsp&nbsp &nbsp OR
&nbsp&nbsp&nbsp https://github.com/M52-a/DateTimePicker => /dist/

2- دوفایل زیر را به پروژه اضافه کنید

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

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

<link rel="stylesheet" href="https://unpkg.com/@m52-a/datetimepicker/dist/DateTimePicker.min.css">
<script type="text/javascript" src="https://unpkg.com/@m52-a/datetimepicker/dist/DateTimePicker.min.js">

3- به inputهای مورد نیاز Attribute زیر را اضافه کنید.
&nbsp&nbsp &nbsp data-dtp

<input data-dtp>

4- برای شروع کارکرد از تکه کد زیر استفاده کنید

DateTimePicker.startWatch();

تنظیمات

Info & Methods

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

DateTimePicker.startWatch(options);
DateTimePicker.show(input);
DateTimePicker.hide();
DateTimePicker.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	مخفی شدن خودکار
useDropDownYears	true	انتخاب سال به صورت DropDown
separatorChars	date,between,time	جداکننده بین سال، ماه و روز و بین تاریخ و زمان
persianDigits	false	استفاده از کارکترهای یونیکد فارسی به جای کارکترهای انگلیسی
minDate	null	مشخص کننده حداقل تاریخ. در صورتی که برابر با today باشد روز جاری است. در صورتی که برابر با attr باشد برابر با مقدار data-dtp-min-date attrubute است
maxDate	null	مشخص کننده حداکثر تاریخ. در صورتی که برابر با today باشد روز جاری است. در صورتی که برابر با attr باشد برابر با مقدار data-dtp-max-date attrubute است
initDate	null	تاریخی که به صورت پیشفرض نمایش داده می‌شود در صورتی که تنظیم نشود برابر است با روز جاری.
today	null	برابر با آبجکت تاریخ برای تعیین روز جاری به صورت پیشفرض از تاریخ سیستم محاسبه میشود
plusHtml	"svg"	html مربوط به دکمه افزایش سال و ماه
minusHtml	"svg"	html مربوط به دکمه کاهش سال و ماه
container	"body"	datepicker در کجا ساخته شود
selector	"input[data-dtp]"	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	-	متد رندر یک روز خروجی یک آبجکت از تنظیمات روز است

مثال dayRendering:

برای نمایش تعطیلی 4 روز ابتدایی سال

DateTimePicker.startWatch({
  dayRendering:function(dayOptions,input){
    return {
     isHollyDay: dayOptions.month==1 && dayOptions.day<=4,
     // isValid = false, امکان غیر فعال کردن روز
     // className = "nowruz" امکان افزودن کلاس برای درج استایل به روز
    }
  }
})

ATTR On Input:

data-dtp

data-dtp-min-date

data-dtp-max-date

data-dtp-only-date

data-dtp-only-time