{"id":256,"date":"2015-08-05T21:11:20","date_gmt":"2015-08-06T00:11:20","guid":{"rendered":"https:\/\/arielnavarrete.wordpress.com\/?p=256"},"modified":"2015-08-05T21:11:20","modified_gmt":"2015-08-06T00:11:20","slug":"datepicker-jquery-dinamico","status":"publish","type":"post","link":"https:\/\/arielnavarrete.cl\/blog\/2015\/08\/05\/datepicker-jquery-dinamico\/","title":{"rendered":"Datepicker Jquery dinamico"},"content":{"rendered":"

Agregar un calendario es muy sencillo gracias a JQuery, especificamente se llama datepicker, y esta linda funcion nos permite agregar un calendario muy personalizado a nuestra pagina web o formulario.<\/p>\n

En algunas ocasiones necesitamos poner un calendario que sea dinamico, es decir, agregar en cada fila en un campo determinado un calendario, por\u00a0 ejemplo, tenemos en un formulario un boton \u00abAgregar\u00bb en donde el Usuario agregara N veces una fila que entre sus campos tiene un input con la fecha, datepicker nos es muy util aqui pero al ser dinamico tiende a marearse y la fecha la va guardando solo en el primer input.<\/p>\n

<\/p>\n

Una forma muy sencilla de solucionar esto es no instanciar o inicializar por primera vez el datepicker, si no que a nuestro input fecha le agregaremos una clase llamada fechaDP, esta clase la tendra SOLO el input que este activo (esta es una forma facil y rapida de hacerlo, tu puedes hacer lo que desees, eso lo dejo a tu imaginacion).<\/p>\n

Entonces, tenemos el siguiente input<\/p>\n

&lt;input type=&quot;text&quot; id=&quot;fecha0&quot; name=&quot;fecha0&quot; class=&quot;fechaDP&quot;&gt;<\/pre>\n
El cual se agregara de forma dinamica cada vez que pulse en el boton \u00abAgregar\u00bb y lo unico que cambiara por razones obvias debera ser el id y el name del input, para que al enviarlo se reciban todos de forma unica.<\/p>\n
Entonces, solo faltaria agregar la magia del datepicker, asi que con este sencillo codigo agregado en nuestro document de la funcion JQuery quedaria listo, porque en esa funcion? para que cuando termine de cargar la pagina, cargue estas funciones.<\/p>\n
\n\n$(&quot;.fechaDP&quot;).on('focus', function(){\n\u00a0\u00a0 \u00a0var $this = $(this);\n\n\u00a0\u00a0 \u00a0$this.datepicker({\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0prevText: '&lt;',\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0nextText: '&gt;',\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0dateFormat: &quot;dd-mm-yy&quot;\n\u00a0\u00a0 \u00a0});\n\u00a0\u00a0 \u00a0$this.datepicker(&quot;show&quot;);\n});\n\n<\/pre>\n
Entonces, cuando el Usuario hago clic en nuestro input se lanzara nuestra funcion ya que el focus estara en el campo con la clase fechaDP y se iniciaria.<\/p>\n
Esta demas decir que requiere la libreria de JQuery y la de JQuery UI, estas las puedes descargar desde la misma pagina de JQuery.<\/p>\n
EDITO:<\/p>\n
Quito esta linea del codigo, debido a que al retroceder en los meses, se buguea y pasa al a\u00f1o 1900 y fraccion<\/p>\n
$this.removeClass(&quot;hasDatepicker&quot;);<\/pre>\n
Por lo tanto, si al hacer click en un input y seleccionar una fecha, te la deja en otro input, es porque la clase \u00abhasDatepicker\u00bb esta danto problemas, prueba quitandolas en todos los demas, el solo te la agregara cuando hagas click en el input y te despliegue el calendario<\/p>\n","protected":false},"excerpt":{"rendered":"
Agregar un calendario es muy sencillo gracias a JQuery, especificamente se llama datepicker, y esta linda funcion nos permite agregar un calendario muy personalizado a nuestra pagina web o formulario. En algunas ocasiones necesitamos poner un calendario que sea dinamico, es decir, agregar en cada fila en un campo determinado un calendario, por\u00a0 ejemplo, tenemos […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-256","post","type-post","status-publish","format-standard","hentry","category-jquery"],"_links":{"self":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/posts\/256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/comments?post=256"}],"version-history":[{"count":0,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/posts\/256\/revisions"}],"wp:attachment":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/media?parent=256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/categories?post=256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/tags?post=256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}