کتابخانه
flatpickr یه کتابخونه سبک و بدون وابستگی جاوااسکریپت برای انتخاب تاریخ و ساعته. با وصل کردنش به یه فیلد معمولی، تقویم کشویی، انتخاب ساعت، بازه تاریخی و چند تاریخ جدا از هم رو بهش اضافه می کنی. توی فرم رزرو، ثبت سفارش و فیلتر گزارش ها به کار میاد و مجوزش MIT هست.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۸۶۹ کیلوبایت· ۱۷۷ فایل· انتشار
SHA-256: 1eeab1cb779471a0b0aaa93dd91c2eb1aa537d696f01ab05ea9dabc55e8525a1
اگه تا حالا توی فرم از input نوع date استفاده کرده باشی، می دونی مشکلش کجاست. شکلش توی هر مرورگر و سیستم عامل فرق می کنه، روی بعضی دستگاه ها رفتارش دلخواهیه و کنترل زیادی هم بهت نمی ده. flatpickr برای همین ساخته شده: یه انتخابگر تاریخ و ساعت که به یه فیلد معمولی وصل می شه و همه جا ظاهر و رفتار یکسانی داره.
کتابخونه سبکه و برای کار کردن به چیز دیگه ای مثل jQuery نیاز نداره. با یه فراخوانی ساده روی فیلد، تقویم کشویی باز می شه. فقط انتخاب یه تاریخ ساده نیست: می تونی ساعت اضافه کنی، بازه تاریخی بگیری، چند تاریخ جدا از هم رو با هم انتخاب کنی یا تقویم رو همیشه باز و داخل صفحه نشون بدی. با گزینه هایی مثل minDate و maxDate بازه مجاز رو محدود می کنی؛ مثلاً توی فرم رزرو، تاریخ های گذشته قابل انتخاب نباشن. قالب نمایش هم قابل تنظیمه و چند تم CSS آماده همراهشه که با CSS خودت می شه شخصی ترش کرد.
یه نکته مهم برای سایت های ایرانی: تقویم پیش فرض این کتابخونه میلادیه. فایل زبان فارسی داره و برچسب ها رو ترجمه می کنه، ولی این یعنی ظاهر فارسی، نه تقویم شمسی. اگه کاربرات انتظار دارن تاریخ شمسی انتخاب کنن، قبل از شروع کار این رو تست کن و اگه لازم شد، یه انتخابگر شمسی یا یه راه حل جانبی کنارش بذار. برای پنل های فنی، فرم های بین المللی یا هر جایی که تاریخ میلادی دقیقاً همونیه که لازم داری، انتخاب خوب و راحتیه. یادت باشه این یه انتخابگره، نه تقویم رویداد. اگه می خوای برنامه ماهانه با رویدادهای رنگی نشون بدی، باید سراغ ابزار دیگه ای بری.
یه نکته کاربردی هم برای ذخیره مقدار هست. بک اند معمولاً یه قالب ثابت می خواد، ولی کاربر دوست داره تاریخ رو خوانا ببینه. گزینه altInput همین مشکل رو حل می کنه و مقدار نمایشی و مقدار ارسالی رو از هم جدا می کنه. هم فایل جاوااسکریپت لازمه هم فایل CSS. توی روزهایی که اینترنت بین الملل محدوده، بهتره فایل ها از هاست خودت لود بشن، نه از یه CDN خارجی. نسخه های رسمی و بدون تغییر flatpickr توی مخزن داخلی ما هم در دسترسه.
استفاده از flatpickr توی یه صفحه معمولی چند قدم بیشتر نیست. کد آماده پایین همین صفحه رو می تونی برداری و مستقیم توی پروژه بذاری.
اگه از npm استفاده می کنی، بسته رو با نام flatpickr نصب کن و توی پروژه import کن. بعد از راه اندازی، اول روی یه صفحه آزمایشی چک کن که فرمت تاریخی که به سرور می ره همونیه که انتظار داری.
یه کتابخونه جاوااسکریپت سبکه که به فیلدهای فرم، تقویم کشویی برای انتخاب تاریخ و ساعت اضافه می کنه. هر جایی که کاربر باید تاریخ رو درست و بدون غلط تایپی وارد کنه به کار میاد، مثل فرم رزرو، ثبت سفارش یا فیلتر گزارش ها.
تقویم پیش فرضش میلادیه. فایل زبان فارسی برای ترجمه برچسب ها هست، ولی این یعنی تقویم شمسی نداره. اگه سایتت حتماً تاریخ شمسی می خواد، قبل از انتخاب این رو تست کن و اگه لازم بود، یه انتخابگر شمسی یا راه حل جانبی کنارش بذار.
نه، نیازی نیست. flatpickr مستقل کار می کنه و به کتابخونه دیگه ای وابسته نیست. اگه سایتت از jQuery استفاده می کنه هم مشکلی پیش نمیاد و هر دو کنار هم کار می کنن. فقط باید فایل جاوااسکریپت و CSS کتابخونه توی صفحه لود بشن.
برای انتخاب بازه، گزینه mode رو روی range بذار. برای اضافه کردن ساعت، enableTime رو فعال کن. با minDate و maxDate هم می تونی تاریخ های مجاز رو محدود کنی. همه این ها موقع صدا زدن تابع، روی همون فیلد تنظیم می شن.
بله. فایل های کتابخونه رو دانلود کن و روی هاست خودت بذار. اینطوری توی روزهای محدودیت اینترنت بین الملل هم صفحه درست لود می شه و به سرور خارجی وابسته نیستی. فقط مسیر فایل ها رو توی صفحه درست بنویس.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.