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

نوامبر

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

موارد اولیه

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

<div class="row">
<?php echo $form->labelEx($model,'date_from'); ?>
<?php
echo $form->textField($model, 'date_from', array(
    'size' => 10,
    'maxlength' => 10,
));
?>
<?php echo $form->error($model,'date_from'); ?>
</div>

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

<div class="row">
<?php echo $form->labelEx($model,'date_from'); ?>
<?php
$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model' => $model,
    'attribute' => 'date_from',
    'htmlOptions' => array(
        'size' => '10',         // textField size
        'maxlength' => '10',    // textField maxlength
    ),
));
?>
<?php echo $form->error($model,'date_from'); ?>
</div>

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

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

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

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

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

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'name' => 'date_from',
    'value' => $fromDateValue,
    'htmlOptions' => array(
        'size' => '10',         // textField size
        'maxlength' => '10',    // textField maxlength
    ),
));

محلی کردن

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

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model' => $model,
    'attribute' => 'date_from',
    'language' => 'fa',
    // 'i18nScriptFile' => 'jquery.ui.datepicker-ja.js',
    'htmlOptions' => array(
        'size' => '10',
        'maxlength' => '10',
    ),
));

تعیین قالب

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

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model' => $model,
    'attribute' => 'date_from',
    'language' => 'ja',
    'themeUrl' => Yii::app()->baseUrl . '/css/jui',
    'theme' => 'swsCo',
    'cssFile' => 'jquery-ui-1.9.2.custom.css',
    'htmlOptions' => array(
        'size' => '10',
        'maxlength' => '10',
    ),
));

تنظیمات

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

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model' => $model,
    'attribute' => 'date_from',
    'language' => 'fa',
    'themeUrl' => Yii::app()->baseUrl . '/css/jui',
    'theme' => 'swsCo',
    'cssFile' => 'jquery-ui-1.9.2.custom.css',
    'options' => array(
        'showOn' => 'both',             // also opens with a button
        'dateFormat' => 'yy-mm-dd',     // format of "2012-12-25"
        'showOtherMonths' => true,      // show dates in other months
        'selectOtherMonths' => true,    // can seelect dates in other months
        'changeYear' => true,           // can change year
        'changeMonth' => true,          // can change month
        'yearRange' => '2000:2099',     // range of year
        'minDate' => '2000-01-01',      // minimum date
        'maxDate' => '2099-12-31',      // maximum date
        'showButtonPanel' => true,      // show button panel
    ),
    'htmlOptions' => array(
        'size' => '10',
        'maxlength' => '10',
    ),
));

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

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

/* Component containers
----------------------------------*/
/* --- delete : use the default font of my site css ---
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
*/
...
/* --- add : font should be a little smaller --- */
#ui-datepicker-div { font-size: 80%;}
button.ui-datepicker-trigger { font-size: 80%; line-height: 1.4em; }
...

/* --- layout of year and month ... have to modify a bit ---
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}
*/
.ui-datepicker select.ui-datepicker-month { with: 35%; }
.ui-datepicker select.ui-datepicker-year { width: 40%; }
/* --- for fxxking stupid browsers --- */
* html .ui-datepicker .ui-datepicker-title select.ui-datepicker-month { width: 30%; }
* html .ui-datepicker .ui-datepicker-title select.ui-datepicker-year { width: 35%;}
/* --- highliting --- */
.ui-datepicker .ui-state-active, .ui-datepicker .ui-state-active.ui-state-highlight { border-color: #0b5110;}
.ui-datepicker .ui-state-highlight { border-color: #448844;}

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

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

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

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

$('#submit-button').click(function() {
    // post the form content by ajax
    $.ajax({
        'type' : 'POST',
        'url' : 'foo-update',
        'dataType' : 'json',
        'data' : $('#foo-form').serialize(),
        'success' : function(data){
            // update the form
            $('#foo-form').html(data.contents);
            // re-create Datepicker
            $('#foo-form .d-picker').datepicker();
        }
    });
});

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

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    ...
    'defaultOptions' => array(
        'showOn' => 'both',
        ...
        ... more options here ...
        ...
    ),
    'htmlOptions' => array(
        ...
        'class' => 'd-picker',
    ),
));

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

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

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

منبع

The post کار کردن با jQuery UI Datepicker در Yii appeared first on دست نوشته های یک تازه کار.

برچسب ها : Framework , php , tutorial , wiki , Yii , Yii Framework , آموزش , فریمورک