es un plugin que viene incluido dentro de jQuery UI con muchos otros, como
por ejemplo autocomplete, progressbar, dialog, etc, este plugin nos da la
posibilidad de insertar fechas con una gran variedad de formatos y asi mismo
dispone de variadas opciones para utilizarlo según sea la necesidad
o los gustos, podemos bajar de http://jqueryui.com/ la librería completa que
incluye los demos, los estilos css e incluso podemos descargar los temas que
también son muy variados. Para este ejemplo descargamos la libreria y vamos
a sacar los siguientes archivos: jquery-1.9.1.js, jquery-ui.js, esta última es la
libreria de la interfaz de usuario, con la que podemos usar autocomplete, datapicker
y todos los demás, aparte de esto vamos a necesitar los estilos que se encuentran
dentro de la carpeta llamada themes, de ahí tomamos los siguientes archivos:
jquery-ui.css y demos.css; habiendo hecho esto podemos empezar.
Paso 1
Descomprimos CodeIgniter y renombramos la aplicación como ci_datepicker, luego en la raízcreamos una carpeta con el nombre de assets, dentro de esta creamos dos carpetas,
una llamada js; en esta colocamos jquery-1.9.1.js y jquery-ui.js, la otra la llamamos
styles y aquí colocamos jquery-ui.css y demos.css
Paso 2
vamos a ci_datepicker/application/controllers/ y creamos un controlador llamado datapicker.phpCódigo del controlador
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Datepicker extends CI_Controller {
function __construct() {
parent::__Construct();
$this->load->helper('form');
}
function index($message=NULL){
$data['title'] = 'Uso de Datapicker en CodeIgniter';
$data['message'] = $message;
$this->load->view('datepicker_view', $data);
}
function verify_date(){
$date = $this->input->post('datepicker');
$error = '<p class="error">La fecha: '.$date. ' es incorrecta</p>';
$success = '<p class="success">La fecha: '.$date. ' es correcta</p>';
$array = explode('/',$date);
if(3===sizeof($array)){ // el tamaño del arreglo no puede ser mayor o menor a tres
$day = $array[0];
$month = $array[1];
$year = $array[2];
if (!checkdate($month, $day, $year)) { // validamos que la fecha sea correcta
$this->index($error);
}else{
$this->index($success);
} // fin
}else{
$this->index($error);
}
}
} // fin de la clase
Paso 3
vamos a ci_datepicker/application/views/ y cramos una vista con el nombre de datepicker_view.phpCódigo de la vista
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title><?php echo $title; ?></title>
<style type="text/css">
h1 {
color: #444;
background-color: transparent;
border-bottom: 1px solid #D0D0D0;
font-size: 19px;
font-weight: normal;
margin: 0 0 14px 0;
padding: 14px 15px 10px 15px;
}
#body{
margin: 0 15px 0 15px;
}
p.footer{
text-align: right;
font-size: 11px;
border-top: 1px solid #D0D0D0;
line-height: 32px;
padding: 0 10px 0 10px;
margin: 20px 0 0 0;
}
#container{
margin: 10px;
border: 1px solid #D0D0D0;
-webkit-box-shadow: 0 0 8px #D0D0D0;
}
/******************************************/
.success{color: green; font-size:13px;} .error{color: red; font-size:13px;}
</style>
<link rel="stylesheet" type="text/css" href="http://localhost/ci_datepicker/assets/styles/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/ci_datepicker/assets/styles/demos.css"/>
<script type="text/javascript" src="http://localhost/ci_datepicker/assets/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://localhost/ci_datepicker/assets/js/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker( "option", "dateFormat", 'dd/mm/yy'); // Le pasamos el formato de la fecha
});
</script>
</head>
<body>
<div id="container">
<h1><?php echo $title; ?></h1>
<?php if($message===NULL){?>
<?php echo form_open('datepicker/verify_date'); ?>
<p>Fecha:<input type="text" name="datepicker" value="" id="datepicker"></p>
<span>formato: DD/MM/YYYY</span>
<?php echo form_submit('date','Verificar');?>
<?php echo form_close()?>
<?php }else{ echo $message; } ?>
<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>
</body>
</html>
Último paso
vamos a ci_datepicker/application/config/ y abrimos el archivo routes.php y colocamos elcontrolador que va a cargar al iniciarse la aplicación. Más o menos por la linea 41.
$route['default_controller'] = "datepicker";
Descargar ejemplo
