انتخاب تاریخ شمسی در 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 دانلود و استفاده کنید.

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

آپشن ها

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

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

 

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

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

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

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

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۵۲)

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

  1. مانا ۱۸ مرداد ۱۴۰۲

    سلام و وقتتون بخیر
    ممکنه راهنمایی کنید چطور میشه تاریخ شمسی انتخاب شده بر روی تقویم را به میلادی تبدیل کنم؟
    ممنون

    پاسخ
    1. حسن شفیعی ۲۹ مرداد ۱۴۰۲

      سلام. از کتابخانه datepicker اصلی استفاده کنید. این کتابخانه ای که گذاشتیم برای تاریخ شمسی هست

      پاسخ
  2. علیرضا ۱۹ تیر ۱۴۰۲

    سلام و عرض ادب
    با سپاس از مطالب خوبتون
    متاسفانه مشکل تاریخ با فرمت ۱۴۰۲/۰۲/۰۱ حل نشد با اینکه فرمت رو در فایل تغییر دادم
    لطفا راهنمایی بفرمایید

    پاسخ
    1. حسن شفیعی ۲۲ تیر ۱۴۰۲

      سلام
      مقدار formatDate را بصورت YYYY/MM/DD وارد کنید

      پاسخ
  3. m ۶ تیر ۱۴۰۱

    سلام آقای شفیعی امکانش هست نمونه سورس وقتی تاریخ رو انتخاب می کنیم مثلا ۰۶-۰۴-۱۴۰۱ به این فرمت نمایش بده را اینجا بنویسید راهنمایی نمودین ولی من هر کاری انجام دادم اعمال نشد خیلی مهمه ممنون.

    پاسخ
  4. m ۴ تیر ۱۴۰۱

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

    پاسخ
    1. حسن شفیعی ۴ تیر ۱۴۰۱

      به متد persianDatepicker داخل کد html بخش script باید آپشن formatDate رو اضافه کنید و بهش فرمت رو بصورت “YYYY-MM-DD” بدید

      پاسخ
      1. m ۴ تیر ۱۴۰۱

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

        پاسخ
  5. m ۴ تیر ۱۴۰۱

    با سلام
    چطور مثلا تاریخ رو به صورت ۰۵-۰۴-۱۴۰۱ نمایش بدیم ممنون

    پاسخ
    1. حسن شفیعی ۴ تیر ۱۴۰۱

      سلام.
      لطفا داکیومنت کتابخانه را مطالعه کنید
      https://jdf.scr.ir/rahnama/jdate

      پاسخ
  6. سعدی ۱۰ اردیبهشت ۱۴۰۱

    سلام
    چطور میتونم وقتی از تقویم یه تاریخ رو انتخاب میکنم اسم روزش رو توی یک label نشون بدم؟
    مثلا وقتی ۱۴۰۰/۰۲/۱۰ رو انتخاب کردم توی label بنویسه شنبه

    پاسخ
    1. حسن شفیعی ۱۰ اردیبهشت ۱۴۰۱

      سلام ممنون. خود کتابخانه jdf این امکان رو داره باید داکیومنتش رو بخونید

      پاسخ
  7. سعید ۶ آبان ۱۴۰۰

    سلام وقت بخیر
    این پلاگین روی جی کوئری ورژن ۳٫۶ کار میکنه؟

    پاسخ
    1. حسن شفیعی ۶ آبان ۱۴۰۰

      سلام ممنون
      جدیدا تست نشده و باید آخرین نسخه رو دانلود و بررسی کنید

      پاسخ
  8. رحمان ۱۰ شهریور ۱۴۰۰

    سلام و احترام

    با تشکر از مطلب عالی تون . فقط اینکه من اگه بخوام همینو میلادی شو داشته باشم باید چیکار کنم؟

    پاسخ
    1. حسن شفیعی ۱۱ شهریور ۱۴۰۰

      سلام. خوشحالیم که مفید واقع شده.
      میتونید از این بخش دانلود کنید :
      https://github.com/fengyuanchen/datepicker

      پاسخ
  9. کیان ۱۱ فروردین ۱۴۰۰

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

    پاسخ
    1. حسن شفیعی ۱۲ فروردین ۱۴۰۰

      سلام.
      در فایل js/persianDatepicker.js خط ۳۱ این رو قرار بدید
      shortDowTitle: [“شنبه”, “یکشنبه”, “دوشنبه”, “سه شنبه”, “چهارشنبه”, “پنج شنبه”, “جمعه”],

      و همچنین خط ۴۵ این رو قرار بدید :
      cellWidth: 45, // by px

      پاسخ
    2. م ۲۷ اردیبهشت ۱۴۰۰

      سلام و عرض ادب.
      روز بخیر.
      ببخشید من میخواهم inputتقویم را داخل div modal قرار بدهم اما تقویم کار نمیکنه. چه تغییری باید انجام بدهم.
      ممنون

      پاسخ
      1. حسن شفیعی ۲۷ اردیبهشت ۱۴۰۰

        سلام.
        ممنون.
        داخل بخش console مرورگر ببینید دقیقا چه خطایی دارید

        پاسخ
  10. مسعود ۱۹ بهمن ۱۳۹۹

    سلام
    ممنون؛ خیلی کاربردی بود.

    پاسخ
    1. حسن شفیعی ۱۹ بهمن ۱۳۹۹

      سلام. خوشحالیم که مفید واقع شده.
      موفق باشید.

      پاسخ
  11. مهران ۲۲ تیر ۱۳۹۹

    درود مرد بزرگ،
    این قسمت رو پیدا نکردم:
    “”پیدا کردم
    فرمت یابد ۰D و ۰M باشه””
    منظورم، نمایش روز و ماه بصورت ۰۳ و ۰۹! لطفا ارشاد بفرما.

    پاسخ
    1. حسن شفیعی ۲۲ تیر ۱۳۹۹

      سلام. اگر دورقمی میخواید باشه باید حروف کوچک استفاده کنید مثلا به جای D از d یا به جای M از mکوجک استفاده کنید و نیاز نیست قبلش ۰ قرار بدید.

      پاسخ
      1. مهران ۲۲ تیر ۱۳۹۹

        Okay
        دوستانی که مثل من مشکل دارند: formatDate بشه این: formatDate: “YYYY/0M/0D”

        پاسخ
  12. مهیار ۱۵ تیر ۱۳۹۹

    سلام مهندس دیت تایم پیکر از خوشکل ترم سراغ دارین ؟؟!

    پاسخ
    1. حسن شفیعی ۱۵ تیر ۱۳۹۹

      سلام. هسته اصلی برنامه نویسیش یکی هست و باید دنبال قالب ها باشید که یکسری کد css هست که باید جایگزین یا اضافه کنید مثلا این :
      https://codepen.io/WHKane/pen/WQZvvK

      پاسخ
  13. محسن ۱۳ فروردین ۱۳۹۹

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

    پاسخ
  14. مجید ۲۱ مهر ۱۳۹۸

    سلام
    با تشکر از مطالب مفیدتون
    مهندس جان امکانش هست که روز و ماه هایی که تک رقمی هستند رو دورقمی نمایش داد مثلا ۰۱ و ۰۲ و…

    پاسخ
    1. مجید ۲۱ مهر ۱۳۹۸

      پیدا کردم
      فرمت یابد ۰D و ۰M باشه

      پاسخ
      1. حسن شفیعی ۲۱ مهر ۱۳۹۸

        سلام. خوشحالیم که مفید واقع شده.
        موفق باشید.

        پاسخ
  15. مهران ۲۸ اردیبهشت ۱۳۹۸

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

    پاسخ
    1. حسن شفیعی ۲۸ اردیبهشت ۱۳۹۸

      سلام. خوشحالیم که مفید واقع شده.
      دقت کنید که آدرس دهی های فایل در سایت به درستی خوانده شود و همچنین با زدن f12 و بررسی تب console نبایذ خطایی مشاهده کنید و همچنین تب network باید کتابخانه به درستی بصورت سبز و ۲۰۰ OK لود شده باشد.

      پاسخ
    2. طهماسب ۷ خرداد ۱۳۹۸

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

      پاسخ
      1. حسن شفیعی ۷ خرداد ۱۳۹۸

        سلام. ممنون از توجه شما.
        حساسیت حروف کوچک و بزرگ در سمت ویندوز مشکلی نداشت ولی در سرور و هاست های لینوکسی حساسیت به حروف کوچک و بزرگ وجود دارد که طبق اطلاع رسانی شما در سورس قابل دریافت از باکس دانلود اعمال شد.
        موفق و پیروز باشید.

        پاسخ
  16. حسین ۴ بهمن ۱۳۹۷

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

    پاسخ
    1. حسن شفیعی ۴ بهمن ۱۳۹۷

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

      پاسخ
  17. حسین ۴ بهمن ۱۳۹۷

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

    پاسخ
    1. حسن شفیعی ۴ بهمن ۱۳۹۷

      در هاست چون آدرس ریشه به همراه چند فولدر تو در تو هست, فایل های js ,css بدرستی لود نمی شوند. برای همین می توانید در فایل index.html اول آدرس هر دو فایل persianDatepicker-default.css , persianDatepicker.js یک اسلش بزاید یا آدرس کامل رو به اینصورت جایگزین کنید تا مشکل حل بشه
      http://avr-city.ir/weather/temp/datepicker/css/persianDatepicker-default.css
      http://avr-city.ir/weather/temp/datepicker/js/persianDatepicker.js

      پاسخ
  18. حسین ۴ بهمن ۱۳۹۷

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

    پاسخ
    1. حسن شفیعی ۴ بهمن ۱۳۹۷

      سلام. خوشحالم که مفید واقع شده.
      ابتدا f12 رو بزنید تا ببینید آیا اروری از سمت جاواسکریپت مشاهده می کنید یا خیر. همچنین با دیدین سورس صفحه ctrl+u روی لینک ها کلیک کنید تا مطمین شوید که فایل های جاواسکریپت بدرستی لود شدند.
      با بررسی این موارد مشکل رفع میشه.
      موفق باشید.

      پاسخ
  19. بهناز ۳۰ دی ۱۳۹۷

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

    پاسخ
  20. بهناز ۲۷ دی ۱۳۹۷

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

    پاسخ
    1. حسن شفیعی ۲۷ دی ۱۳۹۷

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

      موفق باشید.

      پاسخ
  21. amir ۱۴ مرداد ۱۳۹۷

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

    پاسخ
    1. حسن شفیعی ۱۴ مرداد ۱۳۹۷

      بله می تونید از reset() استفاده کنیدو یا از این آموزش بصورت ajaxی بهره ببرید.
      https://netparadis.com/create-captcha-in-php

      موفق باشید.

      پاسخ
  22. امیر ۱۱ مرداد ۱۳۹۷

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

    پاسخ
    1. حسن شفیعی ۱۱ مرداد ۱۳۹۷

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

      پاسخ
      1. amir ۱۳ مرداد ۱۳۹۷

        سلام و عرض ادب و خسته نباشید
        مهندس جان میشه راجع به درگاه بانکی تو سایت برامون توضیح بدی
        اینکه چطور باید درگاه رو بگیریم و چطور به سایت لینک کنیم
        ممنون میشم راهنمایی کنی.

        پاسخ
      2. حسن شفیعی ۱۳ مرداد ۱۳۹۷

        سلام . ممنونم.

        در این لینک کد درگاه ملت در مورد نحوه دریافت درگاه مستقیم و نحوه اتصال به اون رو نمایش دادیم .
        اگر کمی php بلد باشید میتونید این رو روی سایت پیاده کنید. اگر هم از cms های معروف مثل وردپرس , جوملا و .. استفاده می کنید هم که برای هر کدام افزونه اون موجوده و نیاز که فقط نصب و استفاده کنید.
        اگر سیستم سایت اختصاصیه که باید با برنامه نویس هماهنگ کنید که برای شما درگاه رو کدنویسی و اضافه بشه.

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

        موفق باشید

        پاسخ
      3. amir ۱۴ مرداد ۱۳۹۷

        بسیار متشکرم

        پاسخ
      4. حسن شفیعی ۱۴ مرداد ۱۳۹۷

        خواهش می کنم. موفق باشید.

        پاسخ
دوره های آموزشی