Busqueda por fechas con JQUERY - Datepicker

En ocaciones necesitamos crear un formulario donde las búsquedas se prioricen por fechas "desde" y "hasta", pero usando solo php puede a veces resultar muy tedioso. Por esto hoy voy a mostrarles como usar la librería script datepiker, que permitirá visualizar un calendario, asignar la fecha y formatearla si es necesario para buscar la información correspondiente en la base de datos.

El código que usaremos sera en jquery, es corto pero funciona perfectamente. Manos a la obra.

Para estilos de calendario utilizaremos la siguiente librería css


<link href="https://dl.dropboxusercontent.com/s/vlpbj1w2e5ty7i7/jquery.sidr.dark.css?dl=0" rel="stylesheet"></link>

<link href="https://dl.dropboxusercontent.com/s/sgzcu4kvh9brayv/jquery-ui-1.10.2.css?dl=0" rel="stylesheet"></link>

Traemos la libreria jqueri y jquery UI que es la encargada del funcionamiento y adicional Inicializamos el script de UI datepicker.


<!--Incluir jquery y libreria para el calendario y su traduccion al español-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script>
/* Inicialización en español para la extensión 'UI date picker' para jQuery. */
/* Traducido por Vester (xvester@gmail.com). */
jQuery(function($){
 $.datepicker.regional['es'] = {
  closeText: 'Cerrar',
  prevText: '<Ant',
  nextText: 'Sig>',
  currentText: 'Hoy',
  monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
  'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
  monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
  'Jul','Ago','Sep','Oct','Nov','Dic'],
  dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
  dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
  dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
  weekHeader: 'Sm',
  dateFormat: 'dd/mm/yy',
  firstDay: 1,
  isRTL: false,
  showMonthAfterYear: false,
  yearSuffix: ''};
 $.datepicker.setDefaults($.datepicker.regional['es']);
});
</script>

Este sería el script para llamar el calendario en las cajas de texto asignadas.

var jQ = jQuery.noConflict();
jQ(document).ready(function() {

 jQ( "#txt_desde" ).datepicker({
   changeMonth: true,
   changeYear: true,
   numberOfMonths: 1,
   dateFormat: "yy / mm / dd",
   altField: "#txt_desdesel",
   altFormat: "yymmdd"
 });
 
 jQ( "#txt_hasta" ).datepicker({
   changeMonth: true,
   changeYear: true,
   numberOfMonths:1,
   dateFormat: "yy / mm / dd",
   altField: "#txt_hastasel",
   altFormat: "yymmdd"
 });
    });

Como se pueden dar cuenta se agregaron personalizaciones al código, vamos a explicar algunas:

changeMonth: permite mostrar una lista desplegable de meses para poder desplazarse con mejor facilidad.

changeYear: permite mostrar una lista desplegable de años para poder desplazarse con mejor facilidad.

numberOfMonths: Elige el numero de meses que va a salir. Si colocas numberOfMonths:2 , saldrá dos meses para escoger fechas el mes actual y el siguiente. En este ejemplo se colocó :1 porque solo necesito elegir el mes actual.

dateFormat: se usa para cambiar el formato en el que se coloca la fecha al input. En el ejemplo esta como 'yy/mm/dd'. Otras opciones son por ejemplo 'DD,MM,yy'; 'dd/mm/yy'

altField: guarda la fecha elegida en otro campo. preferiblemente uno oculto.

altFormat: crea el formato que queremos guardar en el campo anterior. Ejemplo si queremos mostrar al usuario un formato pero queremos que nos guarde en la base de datos uno diferente.

Todo el código quedaría de la siguiente manera:

Código


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calendario Datepicker</title>

<link href="https://dl.dropboxusercontent.com/s/vlpbj1w2e5ty7i7/jquery.sidr.dark.css?dl=0" rel="stylesheet"></link>

<link href="https://dl.dropboxusercontent.com/s/sgzcu4kvh9brayv/jquery-ui-1.10.2.css?dl=0" rel="stylesheet"></link>

<!--Incluir jquery y libreria para el calendario y su traduccion al español-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script>
/* Inicialización en español para la extensión 'UI date picker' para jQuery. */
/* Traducido por Vester (xvester@gmail.com). */
jQuery(function($){
 $.datepicker.regional['es'] = {
  closeText: 'Cerrar',
  prevText: '<Ant',
  nextText: 'Sig>',
  currentText: 'Hoy',
  monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
  'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
  monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
  'Jul','Ago','Sep','Oct','Nov','Dic'],
  dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
  dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
  dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
  weekHeader: 'Sm',
  dateFormat: 'dd/mm/yy',
  firstDay: 1,
  isRTL: false,
  showMonthAfterYear: false,
  yearSuffix: ''};
 $.datepicker.setDefaults($.datepicker.regional['es']);
});
</script>

<!--Para los Calendarios-->
<script language="javascript" type="text/javascript">
var jQ = jQuery.noConflict();
jQ(document).ready(function() {
 jQ( "#txt_desde" ).datepicker({
   changeMonth: true,
   changeYear: true,
   numberOfMonths: 1,
   dateFormat: "yy / mm / dd",
   altField: "#txt_desdesel",
   altFormat: "yymmdd"
 });
 
 jQ( "#txt_hasta" ).datepicker({
   changeMonth: true,
   changeYear: true,
   numberOfMonths:1,
   dateFormat: "yy / mm / dd",
   altField: "#txt_hastasel",
   altFormat: "yymmdd"
 });
    });
</script>
<!-- Fin Calendario -->
<body>
<table>
    <tr>
     <td align="left" bgcolor="#4199d0" style="color: white;" valign="middle">  
         <strong>Reporte Desde:</strong>
        </td>
        <td align="left" bgcolor="#E6E6E6" valign="middle">
            <input class="selt" id="txt_desde" name="txt_desde" size="10" type="text" />
            <input class="tooltip" id="txt_desdesel" name="txt_desdesel" size="10" type="hidden" />
       </td>
    </tr>
    <tr>
        <td align="left" bgcolor="#4199d0" style="color: white;" valign="middle">  
           <strong>Reporte Hasta:</strong>
        </td>
        <td align="left" bgcolor="#E6E6E6" valign="middle">
           <input class="selt" id="txt_hasta" name="txt_hasta" size="10" type="text" />
           <input class="tooltip" id="txt_hastasel" name="txt_hastasel" size="10" type="hidden" />
        </td>
    </tr>
</table>
</body>
</html>

ver Demostración: