HTML Date and Time Inputs

In the previous section, we learned about HTML selection inputs. Now, we will learn about HTML date and time inputs, which allow users to select dates and times in a form.

What are Date Inputs?

Date inputs are HTML elements that allow users to select a date from a calendar. They are commonly used in forms for collecting date information such as birth dates, event dates, and deadlines.

Basic Date Input

The most basic date input is created using the <input> element with the type attribute set to "date". This creates a date picker where users can select a date.

How to Create a Date Input

To create a date input in HTML, you can use the <input> element with the type attribute set to "date". Here is an example:

<input type="date" name="event-date" />

The output of the above code will look like this:

As you can see, we have created a date input. When we click on the input box, a date picker will appear and then we can select a date from the calendar.

Attributes of Date Inputs

Date inputs have several attributes that can be used to change the appearance and behavior of the date picker. Here are all the attributes of date inputs:

What are Time Inputs?

Time inputs are HTML elements that allow users to select a time from a clock. They are commonly used in forms for collecting time information such as appointment times, event start times, and deadlines.

Basic Time Input

The most basic time input is created using the <input> element with the type attribute set to "time". This creates a time picker where users can select a time.

How to Create a Time Input

To create a time input in HTML, you can use the <input> element with the type attribute set to "time". Here is an example:

<input type="time" name="event-time" />

The output of the above code will look like this:

As you can see, we have created a time input. When we click on the input box, a time picker will appear and then we can select a time from the clock.

Attributes of Time Inputs

Time inputs have several attributes that can be used to change the appearance and behavior of the time picker. Here are all the attributes of time inputs:

Example of Date and Time Inputs with Attributes

<input type="date" name="event-date" min="2023-01-01" max="2023-12-31" />
<input type="time" name="event-time" min="09:00" max="18:00" />

The output of the above code will look like this:

As you can see, we have created a date input with a minimum date of January 1, 2023, and a maximum date of December 31, 2023. We also created a time input with a minimum time of 09:00 and a maximum time of 18:00.

📝 Best Practices for Date and Time Inputs

• Use appropriate formats: Always use the proper format for dates and times to ensure consistency.

🎮 Try It Yourself!

1. Create a folder named interactive-elements inside the html course folder.
2. Create a file named date-time-inputs.mdx inside the interactive-elements folder.
3. Create a basic HTML file with the title “Date and Time Inputs”.
4. Add date and time input elements with different attributes. For example: event start date and time and event end date and time.

🎊 What we have learned

• ✅ We have learned how to create and use date and time inputs in HTML forms.
• ✅ We have explored the various attributes available for date and time inputs.
• ✅ We have discussed best practices for using date and time inputs effectively.

🚀 What’s Next?

Next, we will learn about HTML Buttons which is used to perform an action on web pages.