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.
The input type date and its functionalities
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:
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:
Another interesting functionality offered by this type of input is the possibility of defining a default value using the value attribute:
Format dates in PHP and JavaScript
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.
PHP
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:
<?php
$fecha_actual = date('d/m/Y');
echo $fecha_actual;
?>
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.
JavaScript
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:
let currentDate = new Date(); console.log(currentDate);
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:
let 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}`);
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.
How to make a dropdown menu in HTML
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'll show you how to do it:
Option 1 Option 2 Option 3
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.
Frequently asked questions
How can I get the current date and time in JavaScript?
To get the current date and time in JavaScript, you can use the Date object and its corresponding methods. For example:
let currentDate = new Date(); console.log(currentDate);
This code will print the current date and time to the browser console.
How can I format a date in PHP?
In PHP, you can use the date() function to format a date according to your needs. For example:
$date = '2022-01-01'; $date_formatted = date('d/m/Y', strtotime($date)); echo $formatted_date;
This code will print the date formatted as dd/mm/yyyy.
What other input types exist in HTML to handle dates?
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.
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!
English 
Spanish