طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

انتخاب تاریخ شمسی در 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 لذت برده باشید . مطمینا با استفاده از این قابلیت ها در پروژه هایی که می نویسید, کار شما بسیار حرفه ای تر می شود .

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

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

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

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

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

avatar
8 دیدگاه ها
13 پاسخ ها
0 دنبال کننده ها
 
دیدگاه با بیشترین پاسخ
پرطرفدارترین دیدگاه ها
6 تعداد نویسندگان دیدگاه
حسن شفیعیطهماسبمهرانحسینبهناز نویسنده های اخیر دیدگاه
مهران
مهران

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

طهماسب
طهماسب

سلام. قابل توجه کلیه برنامه نویسان
ضمن تشکر از آقای شفیعی
برای اینکه از این تقویم روی هاست استفاده نمائید باید به این نکته توجه داشته باشید که آدرس دهی فایل ها به حروف بزرگ و کوچک حساس می باشد در سورس آماده ایشان فایل به نام persianDatepicker-default.css می باشد در حالی که در کدنویسی persianDatePicker-default.css صدا زده شده است حرف P را در Datapicker اصلاح نمائید

حسین
حسین

مهندس جان واقعا ممنون لینک ها رو کامل قرار دادم درست شد . فقط این دو تا فایل prism/css-javascript.css/ و /prism/css-javascript.js/ که وجود نداشتن پاک کردم . تو عملکرد تقویم که تاثیر نداشتن این فایلها ؟

حسین
حسین

ممنون از پاسخگویتون ، می شه لطفا بررسی بفرمائید مشکل از کجاست ؟
این فایلها prism/css-javascript.css/ و /prism/css-javascript.js/ وجود ندارند .
فایل ها رو در این مسیر از سایتم آپلود کردم http://avr-city.ir/weather/temp/datepicker/index.html

حسین
حسین

سلام
با تشکر از به اشتراک گذاری مطلب مفیدتون ، من این فایل رو روی localhost اجرا کردم به خوبی کار می کنه ولی متاسفانه روی سایتم آپلود کردم کار نمی کنه . لطفا راهنمائی بفرمائید .
با تشکر

بهناز
بهناز

عین کد رو هم دانلود کردم و فایل ها رو هم ساختم و آدرس ها رو چک کردم.
هیچ تغییری حاصل نشد در فیلد مربوطه .
به هر حال ممنون

بهناز
بهناز

من این مراحل رو کامل انجام دادم ولی هیچ تغییری حاصل نشد:
پوشه ی پلاگین رو دانلود و در ریشه ی سایت قرار دادم.
در تگ html فراخوانی کردم.
المان input با آیدی ساختم و در نهاست در تگ اسکریپت تابع رو فراخوانی کردم.

amir
amir

ببخشید یه سوال دیگه داشتم این آخریشه!
برای انکه بخوام فقط کد کپتچای رو صفحه ریفرش بشه مگه از تابع reload استفاده نمیشه ؟
من هرچقدر دایو کد کپچا رو reload می کنم نمیشه؟
اگه میشه راهنماییم کنید.
واقعا ممنونم

امیر
امیر

سلام خوبید
مطالب خیلی خیلی عالی بود. من خودم خیلی استفاده کردم
متشکرم . امیدوارم موفق باشید

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

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

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

سورس فروشگاهی دیجی کالا

بخش کاربران

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

مجوزهای ما

logo-samandehi

دانلود کتاب

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

تخفیف 150 هزار تومانی برای سورس فروشگاهی دیجی کالا تا پایان خردادماه - کد تخفیف : np150
ثانیه
دقیقه
ساعت
روز
خرید محصول