• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

pickadate : قرار دادن date picker و time picker زیبا و Responsive

0 1710 ۱۹ اسفند ۹۳

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

pickadate

 

Date Picker :

pickadate1

Time picker :

pickadate2

 

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به فایلهای زیر نیاز داریم :

  • jquery.min.js
  • picker.min.js
  • picker.date.min.js
  • picker.time.min.js
  • fa_ir.js
  • default.css
  • default.date.css
  • default.time.css
  • rtl.css

من این فایلهارو رو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید. حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML مورد نظر رو نوشتیم.

فایلهای زیر هم برای date picker و time picker مشترک هستن :

  • jquery.min.js
  • picker.min.js
  • default.css

فایلهای مخصوص date picker :

  • picker.date.min.js
  • default.date.css

فایلهای مخصوص time picker :

  • picker.time.min.js
  • default.time.css

قرار دادن date picker :

در ابتدا باید یک input از نوع text قرار بدین و کلاس datepicker رو به اون نسبت بدین. بصورت زیر :

بعد از اون هم باید در تگ اسکریپت نهایی کد زیر رو قرار بدین :

بهمین سادگی.

قرار دادن time picker :

در ابتدا باید یک input از نوع text قرار بدین و کلاس timepicker رو به اون نسبت بدین. بصورت زیر :

بعد از اون هم باید در تگ اسکریپت نهایی کد زیر رو قرار بدین :

متدهای pickadate و pickatime خصوصیتهای زیادی دارن که میتونین در سایت مربوطه اونا رو ببینید ، ولی خیلی لازم نیستن.

اگر دقت کرده باشین ابزار متنش انگلیسی هست و همچنین از چپ به سمت راست هست. بصورت زیر :

pickadate3

این ابزار به 40 زبان ترجمه شده بود ، ولی جست و جو که کردم زیان فارسی رو پیدا نکردم. خودم اون رو ترجمه کردم و اون رو بنام fa_IR.js قرار دادم. بصورت زیر :

حالا برای اینکه زبانشو فارسی کنید ، باید هم فایل fa_IR.js و هم فایل rtl.css رو به index.html اضافه کنیم. با اینکار این ابزار راست به چپ میشه و همچنین ماه ها و روزها به زبان فارسی نشون داده میشوند.

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

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram