انتخاب تاریخ شمسی در jQuery


انتخاب تاریخ شمسی در jQuery

امروز قصد داریم به شما نحوه ساخت یک تقویم جلالی فارسی و انتخاب تاریخ شمسی در jQuery را در صفحات وب و با استفاده از کتابخانه datepicker را نشان بدیم.

Datepicker یکی پلاگین های بسیار عالی است که به صورت گرافیکی به کاربر اجازه انتخاب تاریخ دلخواه از روی تقویم با فرمت صحیح را می دهد.

در این آموزش قصد داریم به شما نحوه افزودن یک قسمت برای انتخاب تاریخ شمسی (جلالی) را با استفاده از جی کوئری را نشان بدیم.

 

پلاگین Datepicker جی کوئری آپشن و متدهای مختلفی را در اختیار ما قرار می دهد, که می توانیم با استفاده از آن رابط کاربری تقویم را بنابر سلیقه  و layout تغییر بدیم.

بیایید یک مثال از نحوه اضافه کردن قابلیت انتخاب تاریخ شمسی در jQuery به صفحات وب را ببینیم. در این مثال ما ابتدا تقویم شمسی را با گزینه های دلخواه و بدون سفارشی سازی نمایش می دهیم .

انتخاب تاریخ شمسی در jQuery

انتخاب تاریخ شمسی در jQuery

برای افزون پلاگین Datepicker شمسی به صفحه وب مراحل زیر را دنبال کنید.

  • فایل های jQuery & persianDatepicker.js & persianDatepicker.css در تگ <head> صفحه html خود فراخوانی کنید.

  • المنتی که قصد تبدیل آن به یک انتخاب کننده تاریخ شمسی دارید را اضافه کنید و یک مشخصه ID برای ان وارد کنید

  • تابع persianDatepicker مربوط به پلاگین را فراخوانی کنید.

اگر تمام مراحل ساده بالا را پیاده کردید به راحتی میتوانید با کلیک بر روی المنت (input و یا تگ span) خود تقویم شمسی خود را برای انتخاب تاریخ ببینید.

مثال : انتخاب تاریخ شمسی در jQuery

خروجی

انتخاب تاریخ شمسی در jQuery

اگر هیچ نتیجه ای نمایان نشد , نگران نباشید , کافیست سورس کد کامل را از آخر مقاله آموزشی انتخاب تاریخ شمسی در jQuery دانلود و استفاده کنید.

حتما بخوانید  ساخت بازی تیک تاک تو در jQuery

همچنین می توانید انواع تم های دلخواه که از پیش تعریف شده است را برای نمایش تقویم با استفاده از آپشن ها تعیین کنید .

آپشن ها

  • selectedBefore – اگر مقدار true باشد , مقدار تاریخ امروز بصورت خودکار انتخاب و در فیلد متنی نمایش داده خواهد شد.
  • alwaysShow – در هر بار اجرای صفحه وب , بصورت خودکار بخش تقویم نمایان خواهد شد.
  • formatDate – نوع نومایش تاریخ و زمان را مشخص می کند (بصورت پیش فرض : “YYYY/MM/DD” که بدون زمان است)
  • persianNumbers – اعداد را بصورت فارسی قرار می دهد (مقادیر : true,false)
  • fontSize – اندازه فونت را بصورت پیکسلی و عددی دریافت میکند (پیشفرض : ۱۳)
  • theme – تغییر قالب نمایش تقویم (مقادیر قابل قبول : dark , latoja , lightorang , melon)

و کلی آپشن های دیگر که مهمترین های آنها در بالا ذکر شد .

 

امیدوارم از مقاله آموزشی انتخاب تاریخ شمسی در jQuery لذت برده باشید . مطمینا با استفاده از این قابلیت ها در پروژه هایی که می نویسید, کار شما بسیار حرفه ای تر می شود .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

حسن شفیعی
مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان php و امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعاتم را در وب به اشتراک بگذارم

دیدگاه کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

نظر کاربران عزیز

آموزش های آنلاین در چه زمینه ای تهیه کنیم ؟

نظر شما برای ما بسیار مهم است

Loading ... Loading ...

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

دانلود کتاب

عضویت در خبرنامه