JQuery UI en Kumbiaphp Spirit beta2 calendar

De KumbiaPHP Framework Wiki
Saltar a: navegación, buscar

Vamos a crear un helper 'Calendar' que se pueda utilizar en cualquier vista de nuestra aplicación. ejemplo

Vamos a empezar a ver como se utiliza.

1° en la vista solo llamamos el helpers y se utiliza de esta forma.

<?php
echo Calendar::text('model.fecha');
?>


ahora como ven es sumamente sencillo de utilizarlo, ahora empezamos a la construcción del helpers.

descargamos el jquery-ui-1.7.2.custom.zip descomprimimos y copiamos los siguientes archivos. creamos la carpeta jquery en css y javascript


development-bundle/themes -> app/public/css/jquery/

development-bundle/ui -> app/public/javascript/jquery/


Helper.

Creamos el archivo en: app/extensions/helpers/calendar.php

 <?php 
  class Calendar{ 
      public static function text($field, $attrs = NULL, $value = NULL){ 
          static $i = false; 
          $code   =   ''; 
          if($i == false){ 
                  $i = true; 
                  Tag::css('jquery/themes/ui-lightness/jquery.ui.all');
                  $code  = Tag::js('jquery/ui/jquery.ui.core');
                  $code .= Tag::js('jquery/ui/jquery.ui.datepicker');
          } 
          $code   .=   Form::text($field, $attrs, $value); 
          $field  =   str_replace('.', '_', $field); 
          $code   .=  "<script type=\"text/javascript\"> 
                      $(function() { 
                          $(\"#" . $field . "\").datepicker({ 
                          altFormat: 'd/m/yy', 
                          autoSize: true, 
                          dayNames: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sábado'], 
                          dayNamesMin: ['Dom', 'Lu', 'Ma', 'Mi', 'Je', 'Vi', 'Sa'], 
                          firstDay: 1, 
                          monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'], 
                          monthNamesShort: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'], 
                          dateFormat: 'dd/mm/yy', 
                          changeMonth: true, 
                          changeYear: true}); 
                      }); 
                      </script>"; 
          return $code; 
      } 
  } 
  ?>


Recuerden que deben tener habilitado en su proyecto el Jquery