Finalizando con los retoques al componente datepicker, ahora lo que queremos es que con solo agregar la etiqueta datepicker dentro de mi código html, se genere un datepicker automáticamente, para eso he especificado ciertos elementos que hay que incluir en esta etiqueta:
id: es el id del datepicker
tabla: es la tabla de la bd
campo: el campo de la tabla que contiene la fecha a mostrar
<datepicker id="el id" tabla="mi tabla" campo="mi campo"></datepicker>
Incluyo el javascript que contiene la nueva función html_datepickers, lo que hace básicamente es buscar en el dom del documento html todas las instancias de la etiqueta <datepicker></datepicker> , los convierte a inputs y finalmente crea los datepicker usando la función datepicker, los comentarios explican paso a paso lo que se hizo.
/js/dp.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | jQuery(document).ready(function(){ html_datepickers(); // ejecuta la función que detecta los datepicker function html_datepickers(){ var arr_datepickers = $("datepicker"); // Obtiene todos los datepickers del documento html // Recorre cada uno de los datepicker $.each(arr_datepickers, function(key, value) { // obtiene los id tabla y campo del datepicker y los convierte en inputs var id_datepicker = $(this).attr("id"); var nombre_tabla = $(this).attr("tabla"); var nombre_campo = $(this).attr("campo"); // aqui crea un un input usando html var string_input = '<input id="'+ id_datepicker + '" type="text" tabla="'+nombre_tabla+'" campo="'+nombre_campo+'" >'; // con la función replaceWith reemplaza el html datepicker por inputs $(this).replaceWith(string_input); // al finalizar crea el datepicker enviando el id unico datepicker("#"+id_datepicker); }); } |
Ahora creo el html en mi vista para demostrar la utilización de mi componente, en este caso cree 3 datepickers, solo inclui mi archivo dp.js y las correspondientes librerias, como solo tengo 1 tabla (historial) en mi bd es la misma en cada datepicker.
/views/dp_view.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!doctype html> <html lang="es"> <head> <link type="text/css" href="../js/css/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet" /> <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="../js/jquery-ui-1.8.17.custom.min.js"></script> <script language="JavaScript" type="text/javascript" src="../js/jquery.json-2.3.min.js"></script> <script type="text/javascript" src="../js/dp.js"></script> </head> <body> <div> <datepicker id="datepicker1" tabla="historial" campo="fecha"></datepicker> <datepicker id="datepicker2" tabla="historial" campo="fecha"></datepicker> <datepicker id="datepicker3" tabla="historial" campo="fecha"></datepicker> </div> </body> </html> |
Este es el resultado cada datepicker inicializado con una fecha que obtuve de la base de datos
No hay comentarios:
Publicar un comentario