کتابخانه
daterangepicker یه کتابخانه جاوااسکریپت برای انتخاب بازه تاریخ توی فرم ها و داشبوردهاست که به شکل یه تقویم بازشو کنار فیلد ظاهر می شه. ساخته Dan Grossman و با مجوز MIT منتشر شده. برای فیلتر گزارش ها، فرم رزرو و هر جایی که کاربر باید «از تاریخ تا تاریخ» انتخاب کنه به کار میاد.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۴۰۱ کیلوبایت· ۱۵ فایل· انتشار
SHA-256: e22419e8154be2a34a950dbb4c4c448413751c53ef02f00c6c56af28aa2c4964
daterangepicker یه کامپوننت جاوااسکریپتی برای انتخاب بازه تاریخ توی صفحه های وبه و در اصل با ظاهر بوت استرپ ساخته شده. به جای اینکه کاربر دو تا فیلد جدا رو دستی پر کنه، روی یه input کلیک می کنه، تقویم باز می شه و تاریخ شروع و پایان رو با دو کلیک انتخاب می کنه. مقدار انتخاب شده هم توی همون input نوشته می شه و می تونی توی کدت ازش استفاده کنی.
کاربرد اصلیش جاهاییه که بازه زمانی مهمه: گزارش فروش یه فروشگاه آنلاین، فیلتر سفارش ها توی پنل مدیریت، رزرو اقامتگاه یا نوبت، یا یه داشبورد آماری که باید بین هفته گذشته و ماه جاری جابه جا بشی. برای همین بازه های آماده (ranges) هم داره. گزینه هایی مثل «امروز» یا «۷ روز گذشته» رو کنار تقویم می ذاری و کاربر با یه کلیک بازه رو برمی داره.
چند تا تنظیم کاربردی داره که زود به کارت میاد. با singleDatePicker فقط یه تاریخ می گیری، با timePicker ساعت و دقیقه اضافه می شه، با minDate و maxDate محدوده مجاز رو می بندی و با autoApply دکمه تایید حذف می شه. برچسب ها و قالب نمایش تاریخ رو هم با locale عوض می کنی. موقع تغییر تاریخ هم می تونی یه تابع callback صدا بزنی.
یه نکته مهم برای سایت های ایرانی: تقویمش به صورت پیش فرض میلادیه. اگه کاربرهات تقویم شمسی انتظار دارن، عوض کردن متن ها و اسم ماه ها توی locale کافی نیست، چون خود محاسبه تاریخ ها هم باید شمسی باشه. پس قبل از انتخاب، توی پروژه خودت تستش کن یا سراغ کتابخانه ای برو که تقویم جلالی رو مستقیم پشتیبانی می کنه. اگه سایتت راست به چپه هم ظاهر تقویم رو توی مرورگر چک کن و در صورت نیاز با CSS درستش کن.
یه چیز دیگه هم وابستگی هاشه. در نسخه های رایجش به jQuery و Moment.js نیاز داره، پس برای پروژه ای که jQuery نداره شاید انتخاب سنگینی باشه. نسخه های رسمی و بدون تغییر daterangepicker توی مخزن داخلی ما هم هست و وقتی دسترسی به منبع اصلی محدود می شه، می تونی از همین جا برداری.
راه اندازی daterangepicker توی یه صفحه معمولی چند قدم بیشتر نداره و کد آماده اش پایین همین صفحه هست. فقط ترتیب بارگذاری فایل ها مهمه.
بعدش یه بار روی موبایل و صفحه های کوچک امتحانش کن و ببین تقویم از کادر بیرون می زنه یا نه. اگه می زنه، گزینه opens و drops رو عوض کن.
یه کتابخانه جاوااسکریپته که یه تقویم بازشو برای انتخاب بازه تاریخ به input اضافه می کنه. کاربر تاریخ شروع و پایان رو انتخاب می کنه و مقدار توی فیلد نوشته می شه. بیشتر توی فیلتر گزارش ها، پنل های مدیریت، داشبوردها و فرم های رزرو استفاده می شه.
به صورت پیش فرض نه. تقویم اصلیش میلادیه و با تغییر locale فقط متن ها و قالب نمایش عوض می شه. اگه تقویم جلالی واقعی لازم داری، باید سراغ یه فورک یا افزونه جداگانه بری یا کتابخانه ای انتخاب کنی که شمسی رو مستقیم داره. قبل از استفاده توی پروژه اصلی حتماً تستش کن.
jQuery و Moment.js لازم داری و باید قبل از خود کتابخانه بارگذاری بشن. فایل CSS خودش رو هم به صفحه اضافه کن. بوت استرپ اجباری نیست، ولی اگه پروژه ات باهاش ساخته شده باشه، ظاهر تقویم راحت تر با بقیه صفحه هماهنگ می شه. برای تست اولیه همین چند تا فایل کافیه.
آره. گزینه singleDatePicker رو فعال کن تا تقویم فقط یه تاریخ بگیره. اگه ساعت و دقیقه هم می خوای، timePicker رو روشن کن. این حالت برای فرم هایی مثل زمان بندی انتشار یا ثبت نوبت که بازه نمی خوان، خیلی به درد می خوره.
از گزینه ranges استفاده کن. هر بازه یه اسم داره و مقدارش یه آرایه از تاریخ شروع و پایانه که با Moment.js می سازی. این بازه ها کنار تقویم نشون داده می شن و کاربر با یه کلیک انتخابشون می کنه. اسم ها رو هم می تونی فارسی بنویسی.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.