HTML Date Picker

The HTML date picker is an essential, user-friendly input element that simplifies web form selection. It permits users to pick dates from the calendar interface, which improves the user experience and decreases the chance of input mistakes.

In this article, we will discuss the HTML date picker in detail, but let us first discuss the HTML date.

What is the HTML Date?

The HTML Date input is commonly used in HTML forms to enter dates. Users can enter the date manually as text or enter the date using the browser's built-in date picker widget, but it is important to know that not all browsers support a built-in date picker widget.

Syntax:

The above syntax specifies the date input field.

What is an HTML Date Picker?

The HTML Date Picker is an improved version of HTML Date input, part of the HTML5 specification. It gives users an easy way to input dates as they can choose the date from a pop-up interactive graphical calendar interface widget. When the user clicks on a specific date on the dropdown, the picked date is automatically filled into the input field. The date format relies on the web browser.

Syntax:

The above syntax allows you to select the date from a calendar.

You can create a date picker to select the time as well.

Syntax:

The above syntax allows you to select the time as well.

Advantages of using the HTML Date Picker

User-Friendly: The date picker lets the user enter an appropriate date by choosing from a pop-up calendar, making adding a date more comfortable and making this date picker widget user-friendly. It lowers the risk of typographical errors that can be made by entering the date manually.
Mobile-friendly: The HTML date picker is designed to adapt to different screen sizes, which makes it easy for mobile users to enter dates.
Validation: The HTML date picker validates dates to be entered in a standardized format. It stops users from entering invalid dates and decreases input mistakes.
Accessibility: Users with disabilities can have a better experience as support for many assistive technologies, such as keyboard navigation and screen readers, is available.
Customization: Web designers can customize the behaviour of the HTML date picker using CSS and JavaScript, which are easy to implement.
Cross-Platform Compatibility: The HTML date picker is supported by various web browsers such as iOS, Windows, macOS, and Android.

Attributes of HTML Date Picker

The HTML date picker involves attributes that <input> element supports, which are as follows:

1. Min attribute: This attribute sets the minimum date range to restrict the selection within a specific range.

Syntax:

2. Max attribute: This attribute is used to set the maximum date range to restrict the selection within a specific range.

Syntax:

3. Step: This attribute is used to set a step value, which means the date picker will allow users to choose a date after the number of steps you set.

4. Required: This attribute is used to make date input compulsory.

5. Value: This attribute prefills the input field with a default date.

Examples of the HTML Date Picker

We will understand the HTML date picker properly with the help of examples.

Example 1:

In this example, we will create an HTML date picker.

Code:

<!DOCTYPE html>
<html>
<head>
    <title>Example 1 of the HTML Date Picker</title>
</head>
<body>
    <h1>Example-1 of the HTML Date Picker</h1>
    <h2>Select a Date</h2>
    <label for="date">Choose a date:</label>
    <input type="date" id="date" name="date">
</body>
</html>

Output:

You can see the HTML date picker, which allows you to choose a day, month, and year from the calendar.

Example 2:

We will create an HTML date picker with a "min" attribute in this example.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example-2 of the HTML Date Picker</title>
</head>
<body>
    <h1>Example-2 of the HTML Date Picker with "min" attribute</h1>
    <h2>Enter your date of birth</h2>
            <label for="DOB">DOB:</label>
            <input type="date" id="dob" name="dob" min="1990-10-05">
</body>
</html>

Output:

You can see below that the minimum date you can select from the calendar is "1990-10-05".

Example 3:

In this example, we will create an HTML date picker with a "max" attribute.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example-3 of the HTML Date Picker</title>
</head>
<body>
    <h1>Example-3 of the HTML Date Picker with "max" attribute</h1>
    <h2>Enter your date of birth</h2>
            <label for="DOB">DOB:</label>
            <input type="date" id="dob" name="dob" max="2020-11-01">
</body>
</html>

Output:

You can see below that the maximum date you can select from the calendar is "2020-11-01".

Example 4:

In this example, we will create an HTML date picker with a "step" attribute.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example-4 of the HTML Date Picker</title>
</head>
<body>
    <h1>Example-4 of the HTML Date Picker with "step" attribute</h1>
    <h2>Select an appointment date (weekly intervals)</h2>
    <form>
        <fieldset>
            <legend>Appointment</legend>
        <label for="date">Date:</label>
        <input type="date" id="date" name="date" step="7"> <br>
    </fieldset>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Output:

You can see below that the step attribute for the weekly interval is set to "7" so that you can select the date of the seventh day of each week from the calendar.

Example 5:

In this example, we will create an HTML date picker with a "required" attribute.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example-5 of the HTML Date Picker</title>
</head>
<body>
    <h1>Example-5 of the HTML Date Picker with "required" attribute</h1>
    <h2>Enter your date of birth</h2>
           <form>
            <label for="DOB">DOB:</label>
            <input type="date" id="dob" name="dob" required> <br><br>
            <input type="submit" value="Submit">
        </form>
</body>
</html>

Output:

You can see below that selecting the date is mandatory; otherwise, you will see a pop-up message saying, "Please fill out this field".

Example 6:

In this example, we will create an HTML date picker with a "value" attribute.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example-6 of the HTML Date Picker</title>
</head>
<body>
    <h1>Example-6 of the HTML Date Picker with "value" attribute</h1>
    <form>
        <label for="DOB">DOB:</label>
        <input type="date" id="dob" name="dob" required value="2023-10-01"> <br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Output:

Below, the date is already set to "2023-10-01".

Example 7:

We will create an HTML date picker with time as well.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example-7 of the HTML Date Picker</title>
</head>
<body>
    <h1>Example-7 of the HTML Date Picker with time as well</h1>
    <form>
        <label for="DOB">DOB:</label>
        <input type="datetime-local" id="dob" name="dob"> <br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Output:

You can see below that you can select the date from the calendar and enter the time.

Browser Compatibility

Following are the browsers that support the HTML Date Picker:

Google Chrome
Firefox
Safari
Microsoft Edge

Conclusion

In this article, you have understood the HTML date picker, which is used to add the date that the user can pick from the calendar and easily enter the date automatically.

You have understood input attributes that you can use to add extra features to the date with the help of examples.

Next TopicHTML Email

← prev next →