{"id":22782,"date":"2024-03-10T03:15:33","date_gmt":"2024-03-10T02:15:33","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/formularios-con-etiqueta-html-input-de-fechas-todo-lo-que-necesitas-saber\/"},"modified":"2024-06-03T18:40:56","modified_gmt":"2024-06-03T17:40:56","slug":"formularios-con-etiqueta-html-input-de-fechas-todo-lo-que-necesitas-saber","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/forms-with-html-tag-date-input-everything-you-need-to-know\/","title":{"rendered":"Forms with HTML date input tag: Everything you need to know"},"content":{"rendered":"<p>Welcome to my blog, this time I will talk about how to use the HTML input tag to manage dates in forms. If you are a web developer and need users to enter dates in your forms, this article is for you.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-html-tag-date-input-everything-you-need-to-know\/#El_input_type_date_y_sus_funcionalidades\" >The input type date and its functionalities<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-html-tag-date-input-everything-you-need-to-know\/#Formatear_fechas_en_PHP_y_JavaScript\" >Format dates in PHP and JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-html-tag-date-input-everything-you-need-to-know\/#PHP\" >PHP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-html-tag-date-input-everything-you-need-to-know\/#JavaScript\" >JavaScript<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-html-tag-date-input-everything-you-need-to-know\/#Como_hacer_un_menu_desplegable_en_HTML\" >How to make a dropdown menu in HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-html-tag-date-input-everything-you-need-to-know\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-html-tag-date-input-everything-you-need-to-know\/#%C2%BFComo_puedo_obtener_la_fecha_y_hora_actual_en_JavaScript\" >How can I get the current date and time in JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-html-tag-date-input-everything-you-need-to-know\/#%C2%BFComo_puedo_formatear_una_fecha_en_PHP\" >How can I format a date in PHP?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-html-tag-date-input-everything-you-need-to-know\/#%C2%BFQue_otros_tipos_de_input_existen_en_HTML_para_manejar_fechas\" >What other input types exist in HTML to handle dates?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"El_input_type_date_y_sus_funcionalidades\"><\/span>The input type date and its functionalities<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The input type date element is one of the most useful options for working with dates in HTML. With this type of input, users can select a date from a drop-down calendar. Its implementation is quite simple:<\/p>\n<pre>\n<input type=\"date\" name=\"fecha\" id=\"fecha\">\n<\/pre>\n<p>Using this code will display a drop-down calendar on the form, allowing users to select a specific date. Additionally, it is possible to set a range of allowed dates using the min and max attributes:<\/p>\n<pre>\n<input type=\"date\" name=\"fecha\" id=\"fecha\" min=\"2022-01-01\" max=\"2022-12-31\">\n<\/pre>\n<p>Another interesting functionality offered by this type of input is the possibility of defining a default value using the value attribute:<\/p>\n<pre>\n<input type=\"date\" name=\"fecha\" id=\"fecha\" value=\"2022-01-01\">\n<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Formatear_fechas_en_PHP_y_JavaScript\"><\/span>Format dates in PHP and JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Although the input type date is responsible for displaying and capturing the date in the form, it is common that you need to format and manipulate that date in the backend. Here I will show you how to do it in both PHP and JavaScript.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"PHP\"><\/span>PHP<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In PHP, the date() function will allow you to format the date according to your needs. For example, if you want to display the current date in dd\/mm\/yyyy format, you can use the following code:<\/p>\n<pre>\n&lt;?php\n$fecha_actual = date(&#039;d\/m\/Y&#039;);\necho $fecha_actual;\n?&gt;\n<\/pre>\n<p>This code will print the current date in the desired format. Feel free to consult the documentation for the date() function to learn about all the available formats.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"JavaScript\"><\/span>JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In JavaScript, you can use the Date class to work with dates. If you want to get the current date, you can use the following code:<\/p>\n<pre>\nlet currentDate = new Date(); console.log(currentDate);\n<\/pre>\n<p>This code will print the current date to the browser console. Just like in PHP, you can format the date according to your needs using the methods of the Date class. For example, to get the date in dd\/mm\/yyyy format, you can use the following code:<\/p>\n<pre>\nlet currentDate = new Date(); let day = currentDate.getDate(); let month = currentDate.getMonth() + 1; \/\/ Months in JavaScript start at 0 let year = currentDate.getFullYear(); console.log(`${day}\/${month}\/${year}`);\n<\/pre>\n<p>This code will print the current date in the desired format. Remember that the available formats and methods may vary depending on the programming language you are using.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Como_hacer_un_menu_desplegable_en_HTML\"><\/span>How to make a dropdown menu in HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Taking advantage of the topic of forms, it is important to mention how you can create a drop-down menu in HTML. This can be useful when you need users to select an option from a list. Next, I&#039;ll show you how to do it:<\/p>\n<pre>\nOption 1 Option 2 Option 3\n<\/pre>\n<p>This code will generate a dropdown menu with the three mentioned options. The value selected by the user will be sent along with the form.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_obtener_la_fecha_y_hora_actual_en_JavaScript\"><\/span>How can I get the current date and time in JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To get the current date and time in JavaScript, you can use the Date object and its corresponding methods. For example:<\/p>\n<pre>\nlet currentDate = new Date(); console.log(currentDate);\n<\/pre>\n<p>This code will print the current date and time to the browser console.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_formatear_una_fecha_en_PHP\"><\/span>How can I format a date in PHP?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In PHP, you can use the date() function to format a date according to your needs. For example:<\/p>\n<pre>\n$date = &#039;2022-01-01&#039;; $date_formatted = date(&#039;d\/m\/Y&#039;, strtotime($date)); echo $formatted_date;\n<\/pre>\n<p>This code will print the date formatted as dd\/mm\/yyyy.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFQue_otros_tipos_de_input_existen_en_HTML_para_manejar_fechas\"><\/span>What other input types exist in HTML to handle dates?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In addition to the input type date, HTML offers other options for handling dates, such as the input type datetime, the input type month, and the input type time. These inputs adapt to different needs and allow users to easily capture dates and times in forms.<\/p>\n<p>I hope this article has been useful to you when working with forms and dates in HTML. If you have any questions or comments, feel free to leave them below. See you in the next article!<\/p>","protected":false},"excerpt":{"rendered":"<p>Bienvenidos a mi blog, en esta ocasi\u00f3n hablar\u00e9 sobre c\u00f3mo utilizar la etiqueta HTML input para manejar fechas en formularios. Si eres un desarrollador web y necesitas que los usuarios ingresen fechas en tus formularios, este art\u00edculo es para ti. El input type date y sus funcionalidades El elemento input type date es una de [&hellip;]<\/p>","protected":false},"author":1,"featured_media":22783,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1124,2206],"tags":[31,205,90,606,646,492,475,688,477,15,75,76],"class_list":["post-22782","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-html","category-php","tag-que","tag-blog","tag-con","tag-etiqueta","tag-fechas","tag-formularios","tag-html","tag-input","tag-necesitas","tag-php","tag-saber","tag-todo"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=22782"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22782\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/22783"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=22782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=22782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=22782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}