viernes, 25 de abril de 2014

Yii Framework, Widget CJuiDatePicker poder ejecutar código JS al hacer una acción


Vengo trabajando en Yii Framework, es muy bueno y fácil de aprender.

Hace unos días me encontré con un pequeño inconveniente usando el Widget CJuiDatePicker, estaba usando 2 calendarios para mi búsqueda por fechas, el problema fue cuando quize usar una función onSelect o Onclose.

Les muestro mi código inicial:

 $this->widget('zii.widgets.jui.CJuiDatePicker', array(
     'name'=>'from_date', // the name of the field
     'value'=>$model->issued_date,  // pre-fill the value
     // additional javascript options for the date picker plugin
     'options'=>array(
            'dateFormat'=>'yy-mm-dd',
            'buttonImage'=>Yii::app()->baseUrl.'/images/icons.date.png',
            'buttomImageOnly'=>true,
            'buttonText'=>'Date From',
            'showAnim'=>'fold',
            'showOn'=>'button',
            'showButtonPanel'=>false,
            'debug'=>true,
            'onClose'  => 'function( selectedDate ) {
                  $( "#to_date" ).datepicker( "option", "minDate", selectedDate );
                }',
    ),
     'htmlOptions'=>array(
       'style'=>'height:20px;'
     ),
     ));

No funcionaba como quería por que escapaba mi funcion JS onClose:
'onClose'  = 'function( selectedDate ) {
    $( \"#to_date\" ).datepicker(\ "option\", \"minDate\", selectedDate );
  }',

Para solucionar esto sólo bastaba con anteponer js a mi function para que quede así:
 $this->widget('zii.widgets.jui.CJuiDatePicker', array(
     'name'=>'from_date', // the name of the field
     'value'=>$model->issued_date,  // pre-fill the value
     // additional javascript options for the date picker plugin
     'options'=>array(
            'dateFormat'=>'yy-mm-dd',
            'buttonImage'=>Yii::app()->baseUrl.'/images/icons.date.png',
            'buttomImageOnly'=>true,
            'buttonText'=>'Date From',
            'showAnim'=>'fold',
            'showOn'=>'button',
            'showButtonPanel'=>false,
            'debug'=>true,
            'onClose'  => 'js:function( selectedDate ) {
                  $( "#to_date" ).datepicker( "option", "minDate", selectedDate );
                }',
    ),
     'htmlOptions'=>array(
       'style'=>'height:20px;'
     ),
     ));

Por lo demás funciona de maravilla, esto lo usé para una búsqueda dentro de un rango de fechas que me valide entre la fecha inicial y la final( ver documentación).

Espero les ayude en algo, saludos.

No hay comentarios.:

Publicar un comentario