datedropper : پلاگین jQuery مدیریت تاریخ برای input

- visibility ۲ mode_comment

در این مطلب میخوام یک پلاگین jQuery بنام datedropper رو خدمت شما معرفی کنم و اونو آموزش بدم.

datedropper

با استفاده از این پلاگین میتونین مقدار تاریخ مورد نظرتون رو با استایلی بسیار زیبا انتخاب کنید و رضایت کاربران رو جلب کنید. این ابزار امکانات زیادی رو در اختیار شما قرار میده و از مرورگرهای جدید و IE9 به بالا هم پشتیبانی میکنه.

میبینید که اگر بر روی input کلیک کنید ، یک بخش باز میشه و میتونین تاریخ مورد نظرتون رو انتخاب کنید و با زدن تیک ، اون رو در input قرار بدین.

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

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به datedropper.css و jquery.min.js و datedropper.min.js نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

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

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

اولین کاری که باید انجام بدین اینه که یک input از نوع text با id = departure قرار بدین. بصورت زیر :

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

میبینید که ابتدا input رو انتخاب کردیم و متد dateDropper رو برای اون فراخوانی کردیم. بهمین سادگی. تا اینحا اگر در خروجی ببینید ، تنظیمات پیش فرض اعمال شده هست. این متد ، ویژگی های زیادی داره که چنتا از مهمتریناش رو در اینجا میارم :

 توضیح هر کدام :

  • placeholder : میتونین متن placeholder درون input رو تغییر بدین
  • minYear : کمترین سال موجود در این ابزار رو مشخص میکنه
  • animation : میتونین نوع انیمیشن در موقع باز شدن رو انتخاب کنید که سه حالت dropdown و bounce و fadein رو قبول میکنه
  • color : رنگ کلی و پایه ابزار
  • textColor : رنگ نوشته ها
  • bgColor : رنگ پس زمینه
  • borderColor : رنگ border
  • borderRadius : میزان گردی گوشه ها

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

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

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

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

تاریخش فارسی باشه خوبه

محمد اسفندیاری

میتونین با کمی وقت گذاشتن روش ، کاری کنید که از زبان فارسی هم پشتیبانی کنه
موفق باشید

نیاز به لاگین

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