{"id":15796,"date":"2024-04-03T14:11:39","date_gmt":"2024-04-03T17:11:39","guid":{"rendered":"https:\/\/categoriaoutros.com.br\/?p=15796"},"modified":"2024-04-03T14:20:23","modified_gmt":"2024-04-03T17:20:23","slug":"bootstrap-campo-input-com-data-e-hora-datetimepicker","status":"publish","type":"post","link":"https:\/\/categoriaoutros.com.br\/?p=15796","title":{"rendered":"Bootstrap: Campo Input com data e hora (datetimepicker)"},"content":{"rendered":"\n<p>Nesse post irei falar sobre como criar um campo em um formul\u00e1rio HTML para data e hora.<\/p>\n\n\n\n<p>Ao final posto o c\u00f3digo completo, mas aqui irei postar as partes com suas respectivas explica\u00e7\u00f5es.<\/p>\n\n\n\n<p>Entre as tags<strong> &lt;head&gt;<\/strong> e <strong>&lt;\/head&gt;<\/strong> inserimos os <a href=\"https:\/\/categoriaoutros.com.br\/?p=14597\">links CDNs<\/a>, que nada mais s\u00e3o do que links que apontam para servidores na internet de onde podemos pegar os pacotes das bibliotecas necess\u00e1rias para criarmos o campo de data e hora.<\/p>\n\n\n\n<pre><font color=\"#CD00CD\">        <\/font><font color=\"#0000EE\">&lt;!--  Bootstrap CDN --&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">link<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">href<\/font><font color=\"#00CDCD\">=<\/font>\n<font color=\"#CD0000\">&quot;https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css&quot;<\/font>\n<font color=\"#00CDCD\">                <\/font><font color=\"#00CD00\">rel<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;stylesheet&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">src<\/font><font color=\"#00CDCD\">=<\/font>\n<font color=\"#CD0000\">&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.js&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">src<\/font><font color=\"#00CDCD\">=<\/font>\n<font color=\"#CD0000\">&quot;https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n<font color=\"#CD00CD\">        <\/font><font color=\"#0000EE\">&lt;!--  Moment.js CDN --&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">type<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;text\/javascript&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">src<\/font><font color=\"#00CDCD\">=<\/font>\n<font color=\"#CD0000\">&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/moment.js\/2.9.0\/moment.min.js&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n<font color=\"#CD00CD\">        <\/font><font color=\"#0000EE\">&lt;!--  Bootstrap DateTimePicker CDN --&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">link<\/font>\n<font color=\"#00CDCD\">                <\/font><font color=\"#00CD00\">href<\/font><font color=\"#00CDCD\">=<\/font>\n<font color=\"#CD0000\">&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-datetimepicker\/4.17.37\/css\/bootstrap-datetimepicker.min.css&quot;<\/font>\n<font color=\"#00CDCD\">                <\/font><font color=\"#00CD00\">rel<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;stylesheet&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">src<\/font><font color=\"#00CDCD\">=<\/font>\n<font color=\"#CD0000\">&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-datetimepicker\/4.17.37\/js\/bootstrap-datetimepicker.min.js&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<font color=\"#CD00CD\">                <\/font><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\">&gt;<\/font><\/pre>\n\n\n\n<p>Abaixo criamos o campo do tipo texto com id datetime para ser vinculado \u00e0 biblioteca datetimepicker.<\/p>\n\n\n\n<p>O <strong>class=&#8221;form-control&#8221;<\/strong> faz parte do bootstrap e serve para aplica estilo (modificar apar\u00eancia)<\/p>\n\n\n\n<pre> <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;container&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">style<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;margin:100px&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n                <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">style<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;position: relative&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n                        <font color=\"#0000EE\">&lt;!-- Inclui campo input com id para usarmos em  JavaScript e definir atributos --&gt;<\/font>\n                        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">input<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;form-control&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">type<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;text&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">id<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;<\/font><font color=\"#00CDCD\">datetime<\/font><font color=\"#CD0000\">&quot;<\/font><font color=\"#00CDCD\"> \/&gt;<\/font>\n                <font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\">&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\">&gt;<\/font><\/pre>\n\n\n\n<p>Este script inicializa o plugin DateTimePicker no campo de entrada com o ID <code>datetime<\/code>. Ele define o formato da data e hora como &#8216;D\/M\/YYYY hh:mm&#8217;, onde &#8216;D&#8217; representa o dia, &#8216;M&#8217; representa o m\u00eas, &#8216;YYYY&#8217; representa o ano com quatro d\u00edgitos, &#8216;hh&#8217; representa a hora em formato de 12 horas e &#8216;mm&#8217; representa os minutos.<\/p>\n\n\n\n<pre> <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n<font color=\"#CD00CD\">                <\/font><font color=\"#0000EE\">\/\/ Formata o datetimepicker <\/font>\n<font color=\"#CD00CD\">                $<\/font>(<font color=\"#CD0000\">&apos;#datetime&apos;<\/font>)<font color=\"#CD00CD\">.datetimepicker<\/font>(<font color=\"#00CDCD\">{<\/font>\n<font color=\"#CD00CD\">                format: <\/font><font color=\"#CD0000\">&apos;D\/M\/YYYY hh:mm&apos;<\/font>\n<font color=\"#CD00CD\">                <\/font><font color=\"#00CDCD\">}<\/font>)<font color=\"#CD00CD\">;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Exemplo de c\u00f3digo completo para pegar data e hora<\/h2>\n\n\n\n<p>Abaixo est\u00e1 exemplo completo de como criar um campo de formul\u00e1rio em HTML para pegar data e hora.<\/p>\n\n\n\n<pre><font color=\"#0000EE\">&lt;!DOCTYPE html&gt;<\/font>\n<font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">html<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n<font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">head<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">title<\/font><font color=\"#00CDCD\">&gt;<\/font><font color=\"#CD00CD\">DateTimepicker<\/font><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">title<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n<font color=\"#CD00CD\">        <\/font><font color=\"#0000EE\">&lt;!--  Bootstrap CDN --&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">link<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">href<\/font><font color=\"#00CDCD\">=<\/font>\n<font color=\"#CD0000\">&quot;https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css&quot;<\/font>\n<font color=\"#00CDCD\">                <\/font><font color=\"#00CD00\">rel<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;stylesheet&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">src<\/font><font color=\"#00CDCD\">=<\/font>\n<font color=\"#CD0000\">&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.js&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">src<\/font><font color=\"#00CDCD\">=<\/font>\n<font color=\"#CD0000\">&quot;https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n<font color=\"#CD00CD\">        <\/font><font color=\"#0000EE\">&lt;!--  Moment.js CDN --&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">type<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;text\/javascript&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">src<\/font><font color=\"#00CDCD\">=<\/font>\n<font color=\"#CD0000\">&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/moment.js\/2.9.0\/moment.min.js&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n<font color=\"#CD00CD\">        <\/font><font color=\"#0000EE\">&lt;!--  Bootstrap DateTimePicker CDN --&gt;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">link<\/font>\n<font color=\"#00CDCD\">                <\/font><font color=\"#00CD00\">href<\/font><font color=\"#00CDCD\">=<\/font>\n<font color=\"#CD0000\">&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-datetimepicker\/4.17.37\/css\/bootstrap-datetimepicker.min.css&quot;<\/font>\n<font color=\"#00CDCD\">                <\/font><font color=\"#00CD00\">rel<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;stylesheet&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">src<\/font><font color=\"#00CDCD\">=<\/font>\n<font color=\"#CD0000\">&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-datetimepicker\/4.17.37\/js\/bootstrap-datetimepicker.min.js&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<font color=\"#CD00CD\">                <\/font><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">head<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n<font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">body<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n        <font color=\"#0000EE\">&lt;!-- Inclui campo input <\/font><font color=\"#00CDCD\">datetime<\/font><font color=\"#0000EE\"> datetimepicker dentro de   container posicao relativa --&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;container&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">style<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;margin:100px&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n                <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">style<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;position: relative&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n                        <font color=\"#0000EE\">&lt;!-- Inclui campo input com id para usarmos em  JavaScript e definir atributos --&gt;<\/font>\n                        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">input<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;form-control&quot;<\/font>\n<font color=\"#00CDCD\">                                <\/font><font color=\"#00CD00\">type<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;text&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">id<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;<\/font><font color=\"#00CDCD\">datetime<\/font><font color=\"#CD0000\">&quot;<\/font><font color=\"#00CDCD\"> \/&gt;<\/font>\n                <font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\">&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n<font color=\"#CD00CD\">                <\/font><font color=\"#0000EE\">\/\/ Formata o datetimepicker <\/font>\n<font color=\"#CD00CD\">                $<\/font>(<font color=\"#CD0000\">&apos;#datetime&apos;<\/font>)<font color=\"#CD00CD\">.datetimepicker<\/font>(<font color=\"#00CDCD\">{<\/font>\n<font color=\"#CD00CD\">                format: <\/font><font color=\"#CD0000\">&apos;D\/M\/YYYY hh:mm&apos;<\/font>\n<font color=\"#CD00CD\">                <\/font><font color=\"#00CDCD\">}<\/font>)<font color=\"#CD00CD\">;<\/font>\n<font color=\"#CD00CD\">        <\/font><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">script<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">body<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n<font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">html<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Formato de data<\/h2>\n\n\n\n<p>Para a linha <strong>format: &#8216;D\/M\/YYYY hh:mm&#8217;<\/strong> temos os seguintes formatos que podemos aplicar:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>rmat<\/th><th>Description<\/th><th>Example (6\/7\/2021 06:02:09)<\/th><\/tr><\/thead><tbody><tr><td><strong>d<\/strong><\/td><td>Exibe o dia do m\u00eas sem zeros \u00e0 esquerda<\/td><td>6<\/td><\/tr><tr><td><strong>dd<\/strong><\/td><td>Exibe o dia do m\u00eas<\/td><td>Fr<\/td><\/tr><tr><td><strong>M<\/strong><\/td><td>Exibe o m\u00eas sem zeros \u00e0 esquerda<\/td><td>7<\/td><\/tr><tr><td><strong>MM<\/strong><\/td><td>Exibe o m\u00eas com zeros \u00e0 esquerda<\/td><td>07<\/td><\/tr><tr><td><strong>YY<\/strong><\/td><td>Exibe o ano no formato de 2 d\u00edgitos<\/td><td>21<\/td><\/tr><tr><td><strong>YYYY<\/strong><\/td><td>Exibe o ano no formato de 4 d\u00edgitos<\/td><td>2021<\/td><\/tr><tr><td><strong>a<\/strong><\/td><td>Exibe o meridiano em letras min\u00fasculas<\/td><td>am<\/td><\/tr><tr><td><strong>A<\/strong><\/td><td>Exibe o meridiano em letras mai\u00fasculas<\/td><td>AM<\/td><\/tr><tr><td><strong>s<\/strong><\/td><td>Exibe segundos sem zeros \u00e0 esquerda<\/td><td>9<\/td><\/tr><tr><td><strong>ss<\/strong><\/td><td>Exibe segundos com zeros \u00e0 esquerda<\/td><td>09<\/td><\/tr><tr><td><strong>m<\/strong><\/td><td>Exibe minutos sem zeros \u00e0 esquerda<\/td><td>2<\/td><\/tr><tr><td><strong>mm<\/strong><\/td><td>Exibe minutos com zeros \u00e0 esquerda<\/td><td>02<\/td><\/tr><tr><td><strong>h<\/strong><\/td><td>Exibe uma hora sem zeros \u00e0 esquerda no formato de 24 horas<\/td><td>18<\/td><\/tr><tr><td><strong>hh<\/strong><\/td><td>Exibe a hora com zeros \u00e0 esquerda no formato de 24 horas<\/td><td>18<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/12\/formulario-html.jpeg\" alt=\"Campo Input com data e hora\" class=\"wp-image-14903\" style=\"aspect-ratio:1;width:575px;height:auto\" srcset=\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/12\/formulario-html.jpeg 1024w, https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/12\/formulario-html-300x300.jpeg 300w, https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/12\/formulario-html-150x150.jpeg 150w, https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/12\/formulario-html-768x768.jpeg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Campo Input com data e hora<\/figcaption><\/figure><\/div>","protected":false},"excerpt":{"rendered":"<p>Nesse post irei falar sobre como criar um campo em um formul\u00e1rio HTML para data e hora. Ao final posto o c\u00f3digo completo, mas aqui irei postar as partes com suas respectivas explica\u00e7\u00f5es. Entre as tags &lt;head&gt; e &lt;\/head&gt; inserimos os links CDNs, que nada mais s\u00e3o do que links que apontam para servidores na&#8230;<\/p>\n<p class=\"more-link-wrap\"><a href=\"https:\/\/categoriaoutros.com.br\/?p=15796\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> &ldquo;Bootstrap: Campo Input com data e hora (datetimepicker)&rdquo;<\/span> &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[669,16],"tags":[4825,4824],"class_list":["post-15796","post","type-post","status-publish","format-standard","hentry","category-html","category-informatica-dicas","tag-data-e-hora","tag-datetimepicker"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap: Campo Input com data e hora (datetimepicker) - Categoria Outros<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/categoriaoutros.com.br\/?p=15796\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap: Campo Input com data e hora (datetimepicker) - Categoria Outros\" \/>\n<meta property=\"og:description\" content=\"Nesse post irei falar sobre como criar um campo em um formul\u00e1rio HTML para data e hora. Ao final posto o c\u00f3digo completo, mas aqui irei postar as partes com suas respectivas explica\u00e7\u00f5es. Entre as tags &lt;head&gt; e &lt;\/head&gt; inserimos os links CDNs, que nada mais s\u00e3o do que links que apontam para servidores na...Read More &ldquo;Bootstrap: Campo Input com data e hora (datetimepicker)&rdquo; &raquo;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/categoriaoutros.com.br\/?p=15796\" \/>\n<meta property=\"og:site_name\" content=\"Categoria Outros\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/categoriaoutros\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-03T17:11:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-03T17:20:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/12\/formulario-html.jpeg\" \/>\n<meta name=\"author\" content=\"Categoria: Outros\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:site\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Categoria: Outros\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15796#article\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15796\"},\"author\":{\"name\":\"Categoria: Outros\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\"},\"headline\":\"Bootstrap: Campo Input com data e hora (datetimepicker)\",\"datePublished\":\"2024-04-03T17:11:39+00:00\",\"dateModified\":\"2024-04-03T17:20:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15796\"},\"wordCount\":351,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"keywords\":[\"data e hora\",\"datetimepicker\"],\"articleSection\":[\"html\",\"Inform\u00e1tica\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=15796#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15796\",\"url\":\"https:\/\/categoriaoutros.com.br\/?p=15796\",\"name\":\"Bootstrap: Campo Input com data e hora (datetimepicker) - Categoria Outros\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\"},\"datePublished\":\"2024-04-03T17:11:39+00:00\",\"dateModified\":\"2024-04-03T17:20:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15796#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=15796\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15796#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/categoriaoutros.com.br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap: Campo Input com data e hora (datetimepicker)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"name\":\"Categoria Outros\",\"description\":\"Assuntos Diversos\",\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/categoriaoutros.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\",\"name\":\"Categoria Outros\",\"alternateName\":\"Categoria Outros\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"contentUrl\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Categoria Outros\"},\"image\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/categoriaoutros\",\"https:\/\/twitter.com\/CategoriaOutros\",\"https:\/\/br.pinterest.com\/CategoriaOutros\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\",\"name\":\"Categoria: Outros\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"caption\":\"Categoria: Outros\"},\"sameAs\":[\"http:\/\/categoriaoutros.com.br\"],\"url\":\"https:\/\/categoriaoutros.com.br\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap: Campo Input com data e hora (datetimepicker) - Categoria Outros","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/categoriaoutros.com.br\/?p=15796","og_locale":"pt_BR","og_type":"article","og_title":"Bootstrap: Campo Input com data e hora (datetimepicker) - Categoria Outros","og_description":"Nesse post irei falar sobre como criar um campo em um formul\u00e1rio HTML para data e hora. Ao final posto o c\u00f3digo completo, mas aqui irei postar as partes com suas respectivas explica\u00e7\u00f5es. Entre as tags &lt;head&gt; e &lt;\/head&gt; inserimos os links CDNs, que nada mais s\u00e3o do que links que apontam para servidores na...Read More &ldquo;Bootstrap: Campo Input com data e hora (datetimepicker)&rdquo; &raquo;","og_url":"https:\/\/categoriaoutros.com.br\/?p=15796","og_site_name":"Categoria Outros","article_publisher":"https:\/\/www.facebook.com\/categoriaoutros","article_published_time":"2024-04-03T17:11:39+00:00","article_modified_time":"2024-04-03T17:20:23+00:00","og_image":[{"url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/12\/formulario-html.jpeg"}],"author":"Categoria: Outros","twitter_card":"summary_large_image","twitter_creator":"@CategoriaOutros","twitter_site":"@CategoriaOutros","twitter_misc":{"Escrito por":"Categoria: Outros","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/categoriaoutros.com.br\/?p=15796#article","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/?p=15796"},"author":{"name":"Categoria: Outros","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40"},"headline":"Bootstrap: Campo Input com data e hora (datetimepicker)","datePublished":"2024-04-03T17:11:39+00:00","dateModified":"2024-04-03T17:20:23+00:00","mainEntityOfPage":{"@id":"https:\/\/categoriaoutros.com.br\/?p=15796"},"wordCount":351,"commentCount":0,"publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"keywords":["data e hora","datetimepicker"],"articleSection":["html","Inform\u00e1tica"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/categoriaoutros.com.br\/?p=15796#respond"]}]},{"@type":"WebPage","@id":"https:\/\/categoriaoutros.com.br\/?p=15796","url":"https:\/\/categoriaoutros.com.br\/?p=15796","name":"Bootstrap: Campo Input com data e hora (datetimepicker) - Categoria Outros","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/#website"},"datePublished":"2024-04-03T17:11:39+00:00","dateModified":"2024-04-03T17:20:23+00:00","breadcrumb":{"@id":"https:\/\/categoriaoutros.com.br\/?p=15796#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/categoriaoutros.com.br\/?p=15796"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/categoriaoutros.com.br\/?p=15796#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/categoriaoutros.com.br\/"},{"@type":"ListItem","position":2,"name":"Bootstrap: Campo Input com data e hora (datetimepicker)"}]},{"@type":"WebSite","@id":"https:\/\/categoriaoutros.com.br\/#website","url":"https:\/\/categoriaoutros.com.br\/","name":"Categoria Outros","description":"Assuntos Diversos","publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/categoriaoutros.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/categoriaoutros.com.br\/#organization","name":"Categoria Outros","alternateName":"Categoria Outros","url":"https:\/\/categoriaoutros.com.br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","contentUrl":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","width":400,"height":400,"caption":"Categoria Outros"},"image":{"@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/categoriaoutros","https:\/\/twitter.com\/CategoriaOutros","https:\/\/br.pinterest.com\/CategoriaOutros\/"]},{"@type":"Person","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40","name":"Categoria: Outros","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","caption":"Categoria: Outros"},"sameAs":["http:\/\/categoriaoutros.com.br"],"url":"https:\/\/categoriaoutros.com.br\/?author=1"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/15796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15796"}],"version-history":[{"count":8,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/15796\/revisions"}],"predecessor-version":[{"id":15806,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/15796\/revisions\/15806"}],"wp:attachment":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}