شروع پروژه
معرفی پروژه
Djalali Datepicker یک کامپوننت سبک و بدون وابستگی برای انتخاب تاریخ جلالی در فیلدهای معمولی HTML است. این پروژه بهصورت یک ماژول مستقل توسعه داده شده تا بتوان آن را بدون نیاز به انتقال وابستگیهای پروژه اصلی، در وبسایتها و فرمهای دیگر نیز استفاده کرد.
این Datepicker با JavaScript و بهصورت ES Module پیادهسازی شده و دارای استایل آماده برای استفاده، رابط کاربری popup، امکان جابهجایی بین ماهها و نمایش وضعیت روز جاری و تاریخ انتخابشده است. این ماژول بهطور پیشفرض خروجی را با اعداد فارسی نمایش میدهد، اما هنگام ورود دستی، هم اعداد فارسی و هم اعداد انگلیسی را میپذیرد.
ساختار پروژه ساده و ماژولار نگه داشته شده و شامل فایل اصلی JavaScript، فایل CSS و یک فایل example.html برای نمایش نمونه استفاده است. همچنین API پروژه امکان شخصیسازی selector، لیبلها، نام ماهها، قالب خروجی، رویدادهای انتخاب و باز و بسته شدن Datepicker را در اختیار توسعهدهنده قرار میدهد.
مسئله اصلی
چالش پروژه
در بسیاری از پروژههای فارسی، انتخاب تاریخ جلالی معمولاً وابسته به کتابخانههای سنگین یا فریمورکهای خاص است. این موضوع باعث میشود استفاده مجدد از Datepicker در پروژههای ساده یا مستقل دشوار شود.
چالش اصلی این پروژه، ساخت یک Datepicker جلالی سبک، مستقل و بدون وابستگی بود که هم روی inputهای معمولی HTML کار کند و هم از نظر تجربه کاربری، شخصیسازی و سازگاری با ظاهر پروژههای مختلف انعطافپذیر باشد.
مسیر اجرا
راه حل اجرا
برای حل این مسئله، یک ماژول مستقل با JavaScript طراحی شد که بدون هیچ وابستگی runtime کار میکند و بهراحتی در هر صفحه HTML قابل استفاده است. منطق تبدیل تاریخ جلالی نیز مستقیماً داخل پکیج قرار داده شد تا نیاز به کتابخانه خارجی از بین برود.
در بخش رابط کاربری، یک popup date picker مشترک ایجاد شد که به inputهای انتخابشده متصل میشود. همچنین برای توسعهپذیری بیشتر، گزینههایی مانند selector سفارشی، مجموعه inputها، نام کلاس پایه، لیبلهای دسترسیپذیری، قالب خروجی، callbackهای مختلف و کنترل ماه شروع در API پروژه در نظر گرفته شد.
در بخش استایل نیز CSS بهگونهای نوشته شد که با متغیرهای سفارشی پروژه هماهنگ شود، اما در صورت نبود این متغیرها همچنان با مقادیر پیشفرض بهدرستی کار کند.
دستاورد نهایی
خروجی و نتیجه
خروجی پروژه یک Datepicker جلالی سبک، ساده و قابل استفاده مجدد است که بهراحتی میتوان آن را در فرمها و پروژههای مختلف فرانتاند استفاده کرد. این ماژول بدون وابستگی اضافه، تجربه کاربری مناسبی برای انتخاب تاریخ شمسی فراهم میکند و برای پروژههایی که به یک راهکار مستقل و تمیز نیاز دارند گزینه مناسبی است.
این پروژه همچنین با داشتن ساختار مستقل و API قابل شخصیسازی، امکان استفاده در وبسایتها و سیستمهای دیگر را بدون وابستگی به پروژه اولیه فراهم کرده است.
زیرساخت اجرا
فناوری های پروژه
این پروژه با مجموعهای از ابزارها و فناوریهایی پیادهسازی شده که برای سرعت توسعه، پایداری و مقیاس مناسب انتخاب شدهاند.
JavaScript
ES Modules
HTML
CSS
Jalali Calendar
UI Component
Frontend
گام بعدی
لینک های پروژه
برای بررسی اجرای نهایی یا مرور ساختار کد، از مسیرهای زیر وارد خود پروژه یا مخزن آن شوید.
وبسایت آموزشی / مدرسه
فروشگاه اینترنتی / تجارت الکترونیک
Codex Skill