{"id":773,"date":"2011-09-15T20:47:13","date_gmt":"2011-09-15T20:47:13","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=773"},"modified":"2012-10-03T09:33:55","modified_gmt":"2012-10-03T09:33:55","slug":"datepicker-jquery-dob","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/","title":{"rendered":"Datepicker jQuery para fechas de nacimiento"},"content":{"rendered":"<p>En el siguiente script mostramos un formulario con un input para obtener la fecha de nacimiento de un usuario utilizando la librer\u00eda jQuery. La fecha enviada es recibida mediante PHP.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/09\/dob.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1390\" title=\"dob\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/09\/dob-300x169.png\" alt=\"\" width=\"300\" height=\"169\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/09\/dob-300x169.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/09\/dob.png 486w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Para poner en marcha este script debemos antes de nada insertar dentro de la etiqueta &lt;head&gt; los estilos y los scripts de la librer\u00eda jQuery.<\/p>\n<pre id=\"line1\">&lt;link type=\"text\/css\" href=\"jquery-ui-1.8.6.css\" rel=\"Stylesheet\" \/&gt;\r\n&lt;script type=\"text\/javascript\" src=\"jquery-1.4.2.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"jquery-ui-1.8.6.min.js\"&gt;&lt;\/script&gt;<\/pre>\n<p>Seguidamente, tambi\u00e9n en dentro de la etiqueta &lt;head&gt; debemos incoorporar lo siguiente:<\/p>\n<pre id=\"line1\">&lt;script type=\"text\/javascript\"&gt;\r\n$(function() {\r\n\t$('#dob').datepicker({dateFormat: 'dd\/mm\/yy', changeMonth: true, changeYear: true, yearRange: '-100:+0'});\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p>En este trozo de c\u00f3digo lo que estamos diciendo es que el input con id=\u00bbdob\u00bb va a ser tipo datepicker con el formato de fecha especificado a \u00abdd\/mm\/yy\u00bb, se puede cambiar el mes y el a\u00f1o en un rango de 100 a\u00f1os.<\/p>\n<p>En el &lt;body&gt; deber\u00edamos poner algo como lo siguiente:<\/p>\n<pre>&lt;?php\r\nif (isset($_POST['nuevafecha'])) {\r\n\u00a0\u00a0 \u00a0echo 'Fecha de nacimiento recibida: '.$_POST['dob'].'&lt;br&gt;';\r\n\u00a0\u00a0 \u00a0\/\/Procesamos la fecha\r\n}\r\n?&gt;\r\n&lt;form action=\"index.php\" method=\"POST\"\/&gt;\r\n\u00a0\u00a0 \u00a0&lt;div&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0Introduce tu fecha de nacimiento:\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;input type=\"text\" name=\"dob\" id=\"dob\" \/&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;input type=\"submit\" name=\"nuevafecha\" value=\"Enviar\"\/&gt;\r\n\u00a0\u00a0 \u00a0&lt;\/div&gt;\r\n&lt;\/form&gt;<\/pre>\n<p>En el c\u00f3digo anterior tenemos el formulario donde el usuario introduce su fecha de nacimiento. Nos damos cuenta que el campo input tiene como id=\u00bbdob\u00bb que es lo que utiliza el jQuery para comunicarse. Y luego tenemos el bot\u00f3n de enviar.<\/p>\n<p>Cuando se pulsa el bot\u00f3n de enviar pasa a trabajar el c\u00f3digo PHP donde lo \u00fanico que hacemos es mostrar la fecha enviada.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/datepicker_dob\/index.php\">Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En el siguiente script mostramos un formulario con un input para obtener la fecha de nacimiento de un usuario utilizando la librer\u00eda jQuery. La fecha enviada es recibida mediante PHP. Para poner en marcha este script debemos antes de nada insertar dentro de la etiqueta &lt;head&gt; los estilos y los scripts de la librer\u00eda jQuery. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1390,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,3],"tags":[80,84],"class_list":["post-773","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-php","tag-datepickers","tag-formularios"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Datepicker jQuery para fechas de nacimiento - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Datepicker jQuery para fechas de nacimiento - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En el siguiente script mostramos un formulario con un input para obtener la fecha de nacimiento de un usuario utilizando la librer\u00eda jQuery. La fecha enviada es recibida mediante PHP. Para poner en marcha este script debemos antes de nada insertar dentro de la etiqueta &lt;head&gt; los estilos y los scripts de la librer\u00eda jQuery. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2011-09-15T20:47:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-10-03T09:33:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/09\/dob.png\" \/>\n\t<meta property=\"og:image:width\" content=\"486\" \/>\n\t<meta property=\"og:image:height\" content=\"274\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/\",\"name\":\"Datepicker jQuery para fechas de nacimiento - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/09\/dob.png\",\"datePublished\":\"2011-09-15T20:47:13+00:00\",\"dateModified\":\"2012-10-03T09:33:55+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/09\/dob.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/09\/dob.png\",\"width\":486,\"height\":274},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Datepicker jQuery para fechas de nacimiento\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Datepicker jQuery para fechas de nacimiento - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Datepicker jQuery para fechas de nacimiento - Jose Aguilar Blog","og_description":"En el siguiente script mostramos un formulario con un input para obtener la fecha de nacimiento de un usuario utilizando la librer\u00eda jQuery. La fecha enviada es recibida mediante PHP. Para poner en marcha este script debemos antes de nada insertar dentro de la etiqueta &lt;head&gt; los estilos y los scripts de la librer\u00eda jQuery. [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2011-09-15T20:47:13+00:00","article_modified_time":"2012-10-03T09:33:55+00:00","og_image":[{"width":486,"height":274,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/09\/dob.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/","url":"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/","name":"Datepicker jQuery para fechas de nacimiento - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/09\/dob.png","datePublished":"2011-09-15T20:47:13+00:00","dateModified":"2012-10-03T09:33:55+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/09\/dob.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/09\/dob.png","width":486,"height":274},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/datepicker-jquery-dob\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Datepicker jQuery para fechas de nacimiento"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=773"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/773\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/1390"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}