use jquery date picker in yii without CForm system

We know that yii framework is built with jquery ui and we can use the CJuiDatePicker class to output a date picker component. But CJuiDatePicker needs a CFormModel or CActiveRecord, and sometimes, we have to build a form without CFormModel system. In this post, I will introduce how to build a date picker input without CFormModel and CActiveRecord system.

First, we need to register jquery ui script and css file:

$cs = Yii::app()->getClientScript();
$cs->registerScriptFile($cs->getCoreScriptUrl().'/jui/js/jquery-ui.min.js');
$cs->registerCssFile($cs->getCoreScriptUrl().'/jui/css/base/jquery-ui.css');

If you want to set the localization language of jquery ui, you should register the i18n script file too:

$cs->registerScriptFile($cs->getCoreScriptUrl().'/jui/js/jquery-ui-i18n.min.js');

Now, you will get jquery ui included in the rendered html page output, and you can use jquery date picker just like examples in official demo of jqueryui.com. For example:

jQuery('input[name=birthdate]').datepicker(
    jQuery.extend(
        {showMonthAfterYear:false, dateFormat:'yy-mm-dd', changeMonth:true, changeYear:true},
        jQuery.datepicker.regional['zh_cn']
    )
);

Don’t forget to wrap the javascript codes with <script> tags in your view template file.

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Verify Code   If you cannot see the CheckCode image,please refresh the page again!