HTML Input Datetime-Local

The HTML <input> element with type="datetime-local" allows users to select both a date and time without a time zone. This input type is useful for applications that require a specific local date and time input, such as scheduling events or setting reminders.

Unlike <input type="date">, which only allows date selection, and <input type="time">, which only allows time selection, <input type="datetime-local"> combines both date and time in one control.

In this HTML tutorial, we will learn about Input Datetime-Local, its syntax, attributes, styling, and practical applications, with well detailed examples.

1. Basic Syntax

The basic syntax for a datetime-local input is:

</>

Copy

<input type="datetime-local" name="appointment">

Here:

type="datetime-local": Specifies that the input is for both date and time selection.
name: Defines the name of the input field for form submission.

2. Adding a Label for Accessibility

Using a <label> element improves accessibility and provides context for the input:

</>

Copy

<label for="meeting">Schedule a meeting:</label>
<input type="datetime-local" id="meeting" name="meeting">

Clicking the label focuses the input field, enhancing user experience.

3. Setting Default Values

You can set a default value using the value attribute. The value must follow the format YYYY-MM-DDTHH:MM.

</>

Copy

<input type="datetime-local" id="start" name="start" value="2024-12-10T14:30">

In this example, the default date is December 10, 2024, and the default time is 2:30 PM.

4. Setting Minimum and Maximum Values

Use the min and max attributes to restrict the range of selectable dates and times:

</>

Copy

<input type="datetime-local" id="event" name="event"
  min="2024-05-01T09:00"
  max="2024-12-31T18:00">

This example restricts selection to dates and times between January 1, 2024, at 9:00 AM and December 31, 2024, at 6:00 PM.

5. Validation with Required Attribute

The required attribute ensures that the user cannot submit the form without selecting a date and time:

</>

Copy

<input type="datetime-local" id="deadline" name="deadline" required>

If the user tries to submit the form without selecting a value, the browser will display a validation error.

6. Styling Datetime-Local Input

The datetime-local input can be styled using CSS, but the calendar and time selector’s appearance is controlled by the browser and cannot be styled directly:

</>

Copy

<style>
  input[type="datetime-local"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  input[type="datetime-local"]:focus {
    border-color: #4CAF50;
    outline: none;
    box-shadow: 0 0 5px #4CAF50;
  }
</style>

<label for="appointment">Set appointment date and time:</label>
<input type="datetime-local" id="appointment" name="appointment">

This example styles the input field to make it visually appealing and indicates focus with a green border.

7. Using JavaScript with Datetime-Local Input

You can dynamically interact with datetime-local inputs using JavaScript. For example, setting the minimum value to the current date and time:

</>

Copy

<input type="datetime-local" id="now" name="now">

<script>
  const currentDate = new Date();
  const formattedDate = currentDate.toISOString().slice(0, 16);
  document.getElementById('now').setAttribute('min', formattedDate);
</script>

This script ensures that users cannot select past dates and times.

8. Accessibility Considerations

To make your datetime-local input accessible:

Use descriptive labels to clearly indicate the purpose of the input.
Provide additional instructions using aria-describedby or placeholder text if necessary.
Ensure the input field is focusable and usable via keyboard navigation.

9. Real-World Use Cases

Event Scheduling: Allow users to set event dates and times without worrying about time zones.
Appointment Booking: Let users pick local date and time slots for appointments.
Task Deadlines: Collect deadline information for projects or tasks.

Conclusion

The HTML <input type="datetime-local"> element is used for collecting date and time inputs in a single field. By understanding its attributes and combining it with JavaScript and CSS, you can create efficient, user-friendly forms for a variety of applications.

TutorialKart

HTML Input Datetime-Local