خانه > PHP, Tutorial, Yii Framework > کار کردن با jQuery UI Datepicker در Yii

کار کردن با jQuery UI Datepicker در Yii

همه ما کار کردن با ابزارهای کوچک و ساده و قشنگ را دوست داریم، یکی از آن ابزارها به نام JQuery UI Datepicker به عنوان یک المان ورودی برای تاریخ است. فریمورک Yii نیز این ابزار به عنوان یک ویدجت با نام CJuiDatePicker ارائه داده است. اکنون اجازه بدید با هم نگاهی به نحوه کارکرد آن داشته باشیم.

موارد اولیه

فرض کنید که یک تگ ورودی متنی معمولی برای تاریخ در فرم داریم:

همانطور که مشاهده می کنید از یم CActiveForm استفاده کردیم. اکنون آن تگ ورودی متنی را با CJuiDatePicker به ترتیب زیر تعویض می کنیم:

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

  1. بارگزاری فایلها جاوا اسکریپت (از قبیل jQuery و jQuery UI) و فایلهای CSS .
  2. نوشتن کدهای مربوط با این ابزار.
  3. نوشتن کدهایی برای تبدیل فیلد متن معمولی به DatePicker.

ولی در فریمورک نیازی به انجام هیچ کدام از این موارد نیست، ویدجت CJuiDatePicker خودش تمامی این کارها را انجام می دهد.

در مثال بالا، ما از این ویدجت به جای CActiveForm::textField استفاده کرده ایم، و در تنظیمات آن مقادیر model$ را به model و خصیصه ‘date_from’ مربوط به model$ را به attribute اختصاص دادیم. با این تنظیمات، این ویدجت دقیقا همانند CActiveForm::textField خصیصه های تگ ورودی آن را از قبیل name و value را به آن مرتبط می کند.

اگر از CActiveForm استفاده نمی کنید، به عنوان مثال، زمانی که از CHtml::textfield استفاده می کنید؛ به جای تنظیمات بالا، مقادیر را باید به خصیصه های name و value تخصیص دهید.

datepicker1

محلی کردن

اکنون قصد داریم تا DatePicker را برای تنظیمات محلی خود پیگر بندی کنیم، برای این کار کافی است تا خصیصه language آن را مقدار دهی مناسب کنیم. اگر از آخرین نسخه jQuery UI استفاده می کنید نیاز به بارگزاری فایل ‘i18nScriptFile’ نمی باشد:

datepicker2

تعیین قالب

همچنین می توانیم به این ابزار جالب قالب هم تخصیص دهیم. فرض می کنیم که یک قالب با نام swsCo در مسیر css/jui/ قرار دارد. حالا باید یک قالب jQuery UI با استفاده از ThemeRoller تولید کنید. البته تولید یک قالب مناسب و شکیل کار ساده ای نیست:

تنظیمات

همچنین می توانیم گزینه های مختلفی ر ا برای این ویدجت تنظیم کنیم. تمامی این گزینه ها بستگی به انتخاب های شما دارد. لطفا DEMO و API مربوطه را برای اطلاعات بیشتر مطالعه نمایید.

datepicker3

 تنظیمات ظاهری ویدجت

اما اگر ظاهر آن را نمی پسندید، وقتی روی آن فیلد کلیک می کنید یک پنجره کوچک باز می شود که به دو بخش تقسیم می شود، لیست کشویی سال و ماه که خیلی بزرگ است، و شما می خواهید که اندازه فونت های آنها کوچکتر شوند. برای انجام این کار لازم است تا فایل CSSای که با ThemeRoller ایجاد می شود را دستکاری کنیم:

به روز رسانی با AJAX

در برنامه امروزی، جابجایی یا به روز رسانی محتویات یک فیلد با استفاده از AJAX امری مرسوم و عادی است. اگر شما هم برای به روز رسانی این فیلد خاص با AJAX در فرم نیاز دارید، باید بشتر روی آن کار کنید. برای انجام این کار دو راه پیشنهاد می شود:

  1. یاستفاده از یک اسکریپت جداگانه برای ایجاد مجدد DatePicker با پاسخگویی AJAX.
  2. تولید DatePicker به صورت دستی بعد از به روز رسانی با AJAX.

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

و کد نمونه برای DatePicker ای که باید با AJAX به روز رسانی شود به ترتیب زیر است:

ما calss را در htmlOptions به خاطر انتخاب این المان توسط jQuery مقدار دهی کردیم.

در نهایت پیشنهاد می شود که به جای ویدجت CJuiDatePicker خود فریمورک به دلیل مسائل و مشکلاتی که ممکن است در استفاده با زبان فارسی پیش آید از اکستنشنی که توسط یکی از دوستان تهیه شده است به نام jalalicalendar استفاده کنید.

امیدوارم که این مطلب هم مفید بوده باشد.

منبع

دسته هاPHP, Tutorial, Yii Framework برچسب ها:, , , , ,
  1. ۲۲ بهمن ۱۳۹۲ در ۱۴:۱۸ | #1

    بسیار عالی
    تشکر

  1. بدون بازتاب


3 − = 1