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.