معرفی کتابخانه Multi-Calendar DatePicker
در یک پروژه در ASP.NET Core نیاز به یک کتابخانه DatePicker داشتم که علاوه بر تاریخ شمسی از تاریخ میلادی و قمری نیز پشتیبانی کند. کتابخانه های موجود مانند MD.BootstrapPersianDateTimePicker (با پشتیبانی از تاریخ شمسی و میلادی) و JalaliDatePicker (فقط پشتیبانی از تاریخ شمسی) نه به صورت کامل از استایل ها و تم های Bootstrap پشتیبانی می کنند و نه هر سه تقویم مورد نیز پروژه را پوشش می دادند. بنابراین جهت توسعه DatePicker مورد نظر اقدام کردم.
ویژگیهای کلیدی
• پشتیبانی از ۳ سیستم تقویمی:
• تقویم میلادی، محدوده ۱۹۰۰-۲۱۰۰
• تقویم شمسی/جلالی، محدوده ۱۲۰۰-۱۵۰۰ با الگوریتم کبیسه تأیید شده
• تقویم هجری - محدوده ۱۰۰۰-۲۰۰۰ با الگوریتم بهبود یافته
• Time Picker با فرمت ۱۲ و ۲۴ ساعته
• پشتیبانی از حالت Dark Mode
• پشتیبانی از حالت LTR و RTL
• امکان تایپ تاریخ در Input ها و همزمان سازی تقویم در DatePicker با تاریخ وارد شده
• امکان مشخص کردن محدوده تاریخ و غیرفعال کردن تاریخ های خارج از آن محدوده
• پشتیبانی از حالت Responsive و نمایش صحیح در موبایل و تبلت
• اعتبارسنجی مقادیر وارد شده در Input ها با تایم اوت قابل تنظیم
• امکان استفاده از API در Javascript
• قابلیت پیکربندی DatePicker از طریق Data Attribute های المنت در HTML
دمو پروژه:
https://delphiassistant.github.io/MultiCalendarDatePicker
لینک پروژه در گیت هاب:
https://github.com/delphiassistant/MultiCalendarDatePicker
لازم به ذکر است که در هنگام برنامه نویسی این پروژه متوجه شدم ورژن شمسی و قمری کتابخانه Moment.js که معمولا در چنین کاربردهایی استفاده می شود و در مخزن های عمومی مانند NPM موجود است باگهایی مانند عدم محاسبه صحیح تاریخ ها در سالهای کبیسه، درست کار نکردن تابع هایی مانند getDay و ... دارند. نسخه اصلاح شده کتابخانه های فوق در فولدر moment.js-fixes مخزن گیت هاب فوق موجود است و باگهای فوق الذکر در ورژن موجود در فولدر فوق رفع شده است.
اگر در استفاده از کتابخانه فوق به باگ خاصی برخوردید یا پیشنهاد خاصی برای افزودن امکانات به این کتابخانه دارید خوشحالی می شوم بشنوم.
#WebDevelopment #OpenSource #JavaScript #jQuery #DatePicker #PersianCalendar #HijriCalendar #GregorianCalendar #RTL #Internationalization #i18n
در یک پروژه در ASP.NET Core نیاز به یک کتابخانه DatePicker داشتم که علاوه بر تاریخ شمسی از تاریخ میلادی و قمری نیز پشتیبانی کند. کتابخانه های موجود مانند MD.BootstrapPersianDateTimePicker (با پشتیبانی از تاریخ شمسی و میلادی) و JalaliDatePicker (فقط پشتیبانی از تاریخ شمسی) نه به صورت کامل از استایل ها و تم های Bootstrap پشتیبانی می کنند و نه هر سه تقویم مورد نیز پروژه را پوشش می دادند. بنابراین جهت توسعه DatePicker مورد نظر اقدام کردم.
ویژگیهای کلیدی
• پشتیبانی از ۳ سیستم تقویمی:
• تقویم میلادی، محدوده ۱۹۰۰-۲۱۰۰
• تقویم شمسی/جلالی، محدوده ۱۲۰۰-۱۵۰۰ با الگوریتم کبیسه تأیید شده
• تقویم هجری - محدوده ۱۰۰۰-۲۰۰۰ با الگوریتم بهبود یافته
• Time Picker با فرمت ۱۲ و ۲۴ ساعته
• پشتیبانی از حالت Dark Mode
• پشتیبانی از حالت LTR و RTL
• امکان تایپ تاریخ در Input ها و همزمان سازی تقویم در DatePicker با تاریخ وارد شده
• امکان مشخص کردن محدوده تاریخ و غیرفعال کردن تاریخ های خارج از آن محدوده
• پشتیبانی از حالت Responsive و نمایش صحیح در موبایل و تبلت
• اعتبارسنجی مقادیر وارد شده در Input ها با تایم اوت قابل تنظیم
• امکان استفاده از API در Javascript
• قابلیت پیکربندی DatePicker از طریق Data Attribute های المنت در HTML
دمو پروژه:
https://delphiassistant.github.io/MultiCalendarDatePicker
لینک پروژه در گیت هاب:
https://github.com/delphiassistant/MultiCalendarDatePicker
لازم به ذکر است که در هنگام برنامه نویسی این پروژه متوجه شدم ورژن شمسی و قمری کتابخانه Moment.js که معمولا در چنین کاربردهایی استفاده می شود و در مخزن های عمومی مانند NPM موجود است باگهایی مانند عدم محاسبه صحیح تاریخ ها در سالهای کبیسه، درست کار نکردن تابع هایی مانند getDay و ... دارند. نسخه اصلاح شده کتابخانه های فوق در فولدر moment.js-fixes مخزن گیت هاب فوق موجود است و باگهای فوق الذکر در ورژن موجود در فولدر فوق رفع شده است.
اگر در استفاده از کتابخانه فوق به باگ خاصی برخوردید یا پیشنهاد خاصی برای افزودن امکانات به این کتابخانه دارید خوشحالی می شوم بشنوم.
#WebDevelopment #OpenSource #JavaScript #jQuery #DatePicker #PersianCalendar #HijriCalendar #GregorianCalendar #RTL #Internationalization #i18n
GitHub
GitHub - delphiassistant/MultiCalendarDatePicker: A Bootstrap 5/jquery Date Picker with Persian/Hijri/Gregorin Calendars Support.
A Bootstrap 5/jquery Date Picker with Persian/Hijri/Gregorin Calendars Support. - delphiassistant/MultiCalendarDatePicker
❤10👍2🔥1🤩1
معرفی کتابخانه Flyout Menu
در طراحی رابط کاربری، همیشه ساخت یک منوی چندسطحی زیبا و در عین حال کاربردی، چالشی تکراری بوده است. منویی که هم روی دسکتاپ روان باز شود، هم روی موبایل درست کار کند، و در عین حال با زبانهای راستبهچپ هم مشکلی نداشته باشد.
مدتی پیش به دنبال راهحلی سبک و حرفهای برای این موضوع بودم و نتیجهی آن، کتابخانهی Multi-Level Flyout Menu شد.
این کتابخانهی متنباز با جاوااسکریپت و Bootstrap 5 کار میکند و به شما اجازه میدهد منوهایی با بینهایت سطح زیرمنو بسازید؛ منوهایی که بسته به زبان صفحه، خودشان تصمیم میگیرند به چپ باز شوند یا به راست، و روی دستگاههای لمسی یا دسکتاپ، رفتار متفاوت و هوشمندی دارند.
یکی از جذابترین بخشهای پروژه برای من، پشتیبانی کامل از حالت تاریک بود. در هر مرورگر و سیستمی که کاربر تم تیره فعال کرده باشد، منو بهصورت خودکار تطبیق پیدا میکند و حتی رنگها را از طریق CSS Variables میتوان تغییر داد. هیچ لرزشی در تغییر تم دیده نمیشود و تجربهای نرم و چشمنواز ارائه میدهد.
از نظر پیادهسازی، کار سادهتر از آن چیزی است که فکرش را کنید. تنها با چند خط کد و یک ساختار سادهی JSON میتوانید یک منوی کامل داشته باشید. بهعنوان نمونه، چند سطر زیر کافی است تا یک دستهبندی الکترونیک با زیرمنوهای لپتاپ و موبایل بسازید.
برای صفحات فارسی، تنها کافی است تگ والد را با ویژگی dir="rtl" بنویسید و تمام. منو خودش جهت باز شدن را تشخیص میدهد.
در توسعه این پروژه به دسترسیپذیری هم توجه ویژهای شده است. تمام ناوبریها با کیبورد انجام میشود، رنگها نسبت کنتراست استاندارد دارند و تمام المانها با Screen Readerها سازگارند. در اندازههای کوچکتر از ۷۶۸ پیکسل هم منو بهصورت خودکار به حالت آکاردئون تبدیل میشود تا روی موبایل تجربهی بهتری ارائه دهد.
در عین سادگی، Multi-Level Flyout Menu گزینههای سفارشیسازی زیادی دارد. از تمهای آماده مثل Dracula و Nord گرفته تا رنگهای دلخواه خودتان که با چند خط CSS میتوانید تعریف کنید. همه چیز ماژولار، سبک و سریع است؛ تنها ۸ کیلوبایت حجم برای چیزی که بهسادگی در هر پروژهای جا میگیرد.
اگر در حال ساخت یک پنل مدیریتی، فروشگاه آنلاین یا داشبورد تحلیلی هستید، احتمالاً این کتابخانه همان چیزی است که همیشه دنبالش بودید. با پشتیبانی کامل از RTL، Dark Mode، و رعایت استانداردهای WCAG 2.1، دیگر لازم نیست نگران جزئیات ریز منوها باشید.
پروژه روی گیتهاب در دسترس است و مستندات کامل فارسی و انگلیسی به همراه مثالهای آماده در آن وجود دارد.
اگر علاقهمند بودید، خوشحال میشوم بازخوردتان را در گیتهاب یا شبکههای اجتماعی بخوانم — اینکه چطور از آن استفاده کردید و چه ویژگیهایی را دوست دارید به نسخههای بعدی اضافه شود.
آیا تا به حال در پروژهای مجبور شدهاید یک منوی چندسطحی از صفر بسازید؟
اگر بله، فکر میکنید این کتابخانه چه تغییری در روند کارتان ایجاد میکند؟
لینک پروژه در گیت هاب:
https://github.com/delphiassistant/FlyoutMenu
#JavaScript
#Bootstrap5
#RTL
#DarkMode
#UI
#UX
#توسعه_وب
#جاوااسکریپت
#رابط_کاربری
#کتابخانه_جاوااسکریپت
در طراحی رابط کاربری، همیشه ساخت یک منوی چندسطحی زیبا و در عین حال کاربردی، چالشی تکراری بوده است. منویی که هم روی دسکتاپ روان باز شود، هم روی موبایل درست کار کند، و در عین حال با زبانهای راستبهچپ هم مشکلی نداشته باشد.
مدتی پیش به دنبال راهحلی سبک و حرفهای برای این موضوع بودم و نتیجهی آن، کتابخانهی Multi-Level Flyout Menu شد.
این کتابخانهی متنباز با جاوااسکریپت و Bootstrap 5 کار میکند و به شما اجازه میدهد منوهایی با بینهایت سطح زیرمنو بسازید؛ منوهایی که بسته به زبان صفحه، خودشان تصمیم میگیرند به چپ باز شوند یا به راست، و روی دستگاههای لمسی یا دسکتاپ، رفتار متفاوت و هوشمندی دارند.
یکی از جذابترین بخشهای پروژه برای من، پشتیبانی کامل از حالت تاریک بود. در هر مرورگر و سیستمی که کاربر تم تیره فعال کرده باشد، منو بهصورت خودکار تطبیق پیدا میکند و حتی رنگها را از طریق CSS Variables میتوان تغییر داد. هیچ لرزشی در تغییر تم دیده نمیشود و تجربهای نرم و چشمنواز ارائه میدهد.
از نظر پیادهسازی، کار سادهتر از آن چیزی است که فکرش را کنید. تنها با چند خط کد و یک ساختار سادهی JSON میتوانید یک منوی کامل داشته باشید. بهعنوان نمونه، چند سطر زیر کافی است تا یک دستهبندی الکترونیک با زیرمنوهای لپتاپ و موبایل بسازید.
برای صفحات فارسی، تنها کافی است تگ والد را با ویژگی dir="rtl" بنویسید و تمام. منو خودش جهت باز شدن را تشخیص میدهد.
در توسعه این پروژه به دسترسیپذیری هم توجه ویژهای شده است. تمام ناوبریها با کیبورد انجام میشود، رنگها نسبت کنتراست استاندارد دارند و تمام المانها با Screen Readerها سازگارند. در اندازههای کوچکتر از ۷۶۸ پیکسل هم منو بهصورت خودکار به حالت آکاردئون تبدیل میشود تا روی موبایل تجربهی بهتری ارائه دهد.
در عین سادگی، Multi-Level Flyout Menu گزینههای سفارشیسازی زیادی دارد. از تمهای آماده مثل Dracula و Nord گرفته تا رنگهای دلخواه خودتان که با چند خط CSS میتوانید تعریف کنید. همه چیز ماژولار، سبک و سریع است؛ تنها ۸ کیلوبایت حجم برای چیزی که بهسادگی در هر پروژهای جا میگیرد.
اگر در حال ساخت یک پنل مدیریتی، فروشگاه آنلاین یا داشبورد تحلیلی هستید، احتمالاً این کتابخانه همان چیزی است که همیشه دنبالش بودید. با پشتیبانی کامل از RTL، Dark Mode، و رعایت استانداردهای WCAG 2.1، دیگر لازم نیست نگران جزئیات ریز منوها باشید.
پروژه روی گیتهاب در دسترس است و مستندات کامل فارسی و انگلیسی به همراه مثالهای آماده در آن وجود دارد.
اگر علاقهمند بودید، خوشحال میشوم بازخوردتان را در گیتهاب یا شبکههای اجتماعی بخوانم — اینکه چطور از آن استفاده کردید و چه ویژگیهایی را دوست دارید به نسخههای بعدی اضافه شود.
آیا تا به حال در پروژهای مجبور شدهاید یک منوی چندسطحی از صفر بسازید؟
اگر بله، فکر میکنید این کتابخانه چه تغییری در روند کارتان ایجاد میکند؟
لینک پروژه در گیت هاب:
https://github.com/delphiassistant/FlyoutMenu
#JavaScript
#Bootstrap5
#RTL
#DarkMode
#UI
#UX
#توسعه_وب
#جاوااسکریپت
#رابط_کاربری
#کتابخانه_جاوااسکریپت
👍6❤1🔥1