How to use input type field with date field in HTML?

HTML Web Development Front End Technology

In this article, we are going to use input type field with date field in HTML.

We use type="date" in the <input> elements to create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.

The value includes the year, month, and day.

Syntax

Following is the syntax to use input type field with date field in HTML.

<input type="date" id="date" name="date">

Example

Following is the example program to use input type field with date field in HTML.


<!DOCTYPE html>
<html>
<body>
   <form >
      <label for="birthday">Date:</label>
      <input type="date" id="date" name="date">
      <input type="submit">
   </form>
</body>
</html>

Now we can choose a date from date picker.

Adding Date to an Input Field with Range

We can also use max and min attributes along with date attribute to create a range of the input field.

Syntax

Following is the syntax to use max and min attributes along with date attribute to create a range of the input field.

<input type="date" name="party" min="2022-06-10" max="2024-04-30">

Example

Following is the example program to use max and min attributes along with date attribute to create a range of the input field.


<!DOCTYPE html>
<html>
<body>
   <form >
      <label for="birthday">Date:</label>
      <input type="date" name="party" min="2022-06-01" max="2022-07-30">
      <input type="submit">
   </form>
</body>
</html>

We can see that the date picker disabled all other values. And created a range that we have specified in the above example.

In the above example program, we set min="2022-06-01” and max="2022-07-30". Therefore, the date picker is able to select the date from the min and max range.

Date Attribute as a RequiredField

We can also use the required attribute to the input field to make filling in the date mandatory. An error will be displayed if we try to submit an empty date field.

Syntax

Following is the syntax to use the required attribute to the input field to make filling in the date mandatory.

<input type="date" name="party" min="2022-06-10" max="2024-04-30" required>

Example

Following is the example to use the required attribute to the input field to make filling in the date mandatory.


<!DOCTYPE html>
<html>
<body>
   <form >
      <label for="birthday">Date:</label>
      <input type="date" name="party" min="2022-06-01" max="2022-07-30" required>
      <input type="submit">
   </form>
</body>
</html>