{"id":6782,"date":"2016-06-09T14:15:08","date_gmt":"2016-06-09T14:15:08","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6782"},"modified":"2016-06-09T14:16:26","modified_gmt":"2016-06-09T14:16:26","slug":"jquery-simple-datetimepicker","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/","title":{"rendered":"jQuery Simple Datetimepicker"},"content":{"rendered":"

jQuery Simple Dtpicker<\/span> es otro plugin jQuery que permite al usuario seleccionar una fecha y hora en un campo de texto.<\/span><\/span><\/p>\n

Es un plugin muy sencillo y limpio. En m\u00e1s de un proyecto me ha sacado de un apuro y es muy sencillo de instalar.<\/span><\/p>\n

Lo primero que debes hacer es descargar los archivos del plugin. Descargar archivos de GitHub<\/a><\/p>\n

En la cabecara de tu p\u00e1gina debes incluir la librer\u00eda jQuery (en el caso de que no la tengas), el plugin y los estilos css que vienen en la descarga:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<script<\/span><\/a> src<\/span>=<\/span>"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span>\n<script<\/span><\/a> type<\/span>=<\/span>"text\/javascript"<\/span> src<\/span>=<\/span>"jquery.simple-dtpicker.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span>\n<link<\/span><\/a> type<\/span>=<\/span>"text\/css"<\/span> href<\/span>=<\/span>"jquery.simple-dtpicker.css"<\/span> rel<\/span>=<\/span>"stylesheet"<\/span> \/<\/span>><\/span><\/pre><\/div><\/div>\n
Tambi\u00e9n en la cabecera debes incluir la llamada al plugin haciendo referencia al input con id=\u00bbdate_picker\u00bb que ser\u00e1 nuestro campo para el selector de fecha y hora:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<script<\/span><\/a> type<\/span>=<\/span>"text\/javascript"<\/span>><\/span>\n$(function(){\n    $('#date_picker').dtpicker();\n});\n<\/<\/span>script<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Ahora tan solo te queda que a\u00f1adas el campo de texto (input) en tu formalario donde quieres que el usuario pueda escoger una fecha. En el caso del ejemplo en funcionamiento:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> id<\/span>=<\/span>"date_picker"<\/span> name<\/span>=<\/span>"date"<\/span> value<\/span>=<\/span>""<\/span> type<\/span>=<\/span>"text"<\/span>><\/span>\n<script<\/span><\/a> type<\/span>=<\/span>"text\/javascript"<\/span>><\/span>\n$(function(){\n    $('*[name=date]').appendDtpicker({"locale": "es"});\n});\n<\/<\/span>script<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
En el c\u00f3digo anterior estamos a\u00f1adiendo el campo de texto (que representa la fecha y hora) y debajo hacemos una llamada a una funci\u00f3n del plugin para darle las caracter\u00edsticas que incorpora dicho plugin.<\/p>\n
F\u00edjate que lo que estamos haciendo es indicar que para todos los campos de texto con nombre \u00abdate\u00bb le vamos a a\u00f1adir las propiedades o caracter\u00edsticas del plugin con el objetivo de que al hacer click se habra el selector de fecha y hora.<\/p>\n
\"jquery-simple-datepicker\"<\/a><\/p>\n
Tambi\u00e9n es importante saber que es posible pasarle algunos par\u00e1metros. En nuestro ejemplo, le estamos pasando como par\u00e1metro el \u00ablocale\u00bb con valor \u00abes\u00bb para que el contenido del datetimepicker aparezca en idioma espa\u00f1ol.<\/p>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
jQuery Simple Dtpicker es otro plugin jQuery que permite al usuario seleccionar una fecha y hora en un campo de texto. Es un plugin muy sencillo y limpio. En m\u00e1s de un proyecto me ha sacado de un apuro y es muy sencillo de instalar. Lo primero que debes hacer es descargar los archivos del […]<\/p>\n","protected":false},"author":1,"featured_media":6783,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[80,79],"class_list":["post-6782","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-datepickers","tag-inputs"],"yoast_head":"\njQuery Simple Datetimepicker - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"jQuery Simple Dtpicker es otro plugin jQuery que permite al usuario seleccionar una fecha y hora en un campo de texto.\" \/>\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=\"jQuery Simple Datetimepicker - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"jQuery Simple Dtpicker es otro plugin jQuery que permite al usuario seleccionar una fecha y hora en un campo de texto.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/\" \/>\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=\"2016-06-09T14:15:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-06-09T14:16:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/jquery-simple-datepicker.png\" \/>\n\t<meta property=\"og:image:width\" content=\"267\" \/>\n\t<meta property=\"og:image:height\" content=\"240\" \/>\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\/jquery-simple-datetimepicker\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/\",\"name\":\"jQuery Simple Datetimepicker - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/jquery-simple-datepicker.png\",\"datePublished\":\"2016-06-09T14:15:08+00:00\",\"dateModified\":\"2016-06-09T14:16:26+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"jQuery Simple Dtpicker es otro plugin jQuery que permite al usuario seleccionar una fecha y hora en un campo de texto.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/jquery-simple-datepicker.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/jquery-simple-datepicker.png\",\"width\":267,\"height\":240},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery Simple Datetimepicker\"}]},{\"@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":"jQuery Simple Datetimepicker - Jose Aguilar Blog","description":"jQuery Simple Dtpicker es otro plugin jQuery que permite al usuario seleccionar una fecha y hora en un campo de texto.","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":"jQuery Simple Datetimepicker - Jose Aguilar Blog","og_description":"jQuery Simple Dtpicker es otro plugin jQuery que permite al usuario seleccionar una fecha y hora en un campo de texto.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2016-06-09T14:15:08+00:00","article_modified_time":"2016-06-09T14:16:26+00:00","og_image":[{"width":267,"height":240,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/jquery-simple-datepicker.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\/jquery-simple-datetimepicker\/","url":"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/","name":"jQuery Simple Datetimepicker - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/jquery-simple-datepicker.png","datePublished":"2016-06-09T14:15:08+00:00","dateModified":"2016-06-09T14:16:26+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"jQuery Simple Dtpicker es otro plugin jQuery que permite al usuario seleccionar una fecha y hora en un campo de texto.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/jquery-simple-datepicker.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2016\/06\/jquery-simple-datepicker.png","width":267,"height":240},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-simple-datetimepicker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"jQuery Simple Datetimepicker"}]},{"@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\/6782","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=6782"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6782\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6783"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}