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

- visibility ۰ mode_comment

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

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

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

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

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.