The date represents the content of the type property of a <input> element. This element generates a calendar interface enabling users to pick a specific date. The selected date encompasses the day, month, and year information. The HTML date functionality is employed to establish the date and define its range from the earliest to the latest permissible date. By utilizing the calendar feature, users can designate a date by specifying the day, month, and year values.
Basic Html Date
The HTML date input type is utilized to showcase a calendar within an input field and exhibit the selected date.
Syntax
The provided syntax demonstrates the declaration of the date type within an HTML tag.
<input type="Date">
Examples
The upcoming illustrations demonstrate the fundamental date input in HTML for a form.
Illustrative Example 1: The instance below illustrates the utilization of the date within the <input> tag:
<!DOCTYPE html>
<html>
<head>
<title>
Example of Date Attribute
</title>
</head>
<body>
<form>
Employee Name: <input type="text" placeholder="Enter Your name" Required>
<br>
<br>
Date of Joining: <input type = "date">
<button type="submit" name="btn">Submit</button>
</form>
</body>
</html>
Output:
Below is the displayed output presenting the HTML date integrated with a calendar.
Illustrative Example 2: In this instance, we demonstrate the utilization of JavaScript code to exhibit the date submitted through a form.
<!DOCTYPE html>
<html>
<head>
<title> Example of Date Attribute </title>
<script>
function viewdate() {
var x = document.getElementById("dob").value;
document.getElementById("demo").innerHTML = x;
</script>
</head>
<body>
Employee Name: <input type="text" placeholder="Your Good name"/>
<br>
<br>
Date of Joining:
<input type="date" id="dob">
<br>
<button onclick="viewdate()"> Submit
</button>
<br>
<h2 id="demo"> </h2>
</body>
</html>
Output:
HTML Date with a Required or Static Value
The value attribute is used to showcase the fixed date within HTML date elements. The static date value is visible within the input tag.
Syntax
Below is the syntax displaying the HTML date with its assigned value.
<input type = "date" value = "2000-02-22">
<input type = "date" required>
Description
- We can use value for the default value of the date.
- We can use the required keyword to validate the HTML date.
Examples
The illustrations below demonstrate the fundamental date format alongside the necessary constraint and fixed value.
Example 1:
The illustration demonstrates the fixed date value on an HTML calendar. It displays a standard date with the default value preselected.
<!DOCTYPE html>
<html>
<head>
<title>
Example of HTML Date Attribute
</title>
</head>
<body>
<form>
<h4>
Example of HTML Date Attribute
</h4>
<p> We can see the date function in the html tag with static value</p>
Date of Joining: <input type = "date" id = "dates" name = "id" value = "2000-02-22">
<button type = "submit" name = "btns"> Submit </button>
</form>
</body>
</html>
Output
The following output shows the date function.
Example 2:
The demonstration illustrates the fixed value within the HTML date calendar. By utilizing the necessary tag, we have the ability to choose the date from the tag. If an attempt is made to submit without selecting a date, an error message will prompt to choose a date from the attribute.
<!DOCTYPE html>
<html>
<head>
<title>
Example of HTML Date Attribute
</title>
</head>
<body>
<form>
<h4>
Example of HTML Date Attribute
</h4>
<p> We can see the date function in the html tag with a static value. </p>
Date of Joining: <input type = "date" id = "dates" name = "id" required>
<button type = "submit" name = "btns"> Submit </button>
</form>
</body>
</html>
Output:
The following output shows the date function.
HTML Date with Minimum and Maximum Date
The earliest date can be specified as the initial date using the "min" parameter within the date element. Conversely, the latest date can be denoted as the final date using the "max" parameter within the date element. These "min" and "max" attributes can be utilized individually or concurrently within the input date element.
Syntax
The syntax below displays the date in HTML along with its corresponding value.
<input type = "date" min = "2023-11-22">
<input type = "date" min = "2023-11-22" max = "2023-12-22">
Examples
The illustrations demonstrate how to perform validation for the earliest and latest dates applicable to the HTML date input and its associated calendar feature.
Example 1:
The example demonstrates the highest possible date value within the HTML date calendar.
<!DOCTYPE html>
<html>
<head>
<title>
Example of HTML Date Attribute
</title>
</head>
<body>
<form>
<h4>
Example of HTML Date Attribute
</h4>
<p> We can see the date function in the html tag with maximum value</p>
Date of Joining: <input type = "date" id = "dates" name = "dates" max="2023-12-20">
<button type = "submit" name = "btns"> Submit </button>
</form>
</body>
</html>
Output:
The following output shows the date function.
Example 2:
The illustration demonstrates the commencement and conclusion date values within the HTML date calendar.
<!DOCTYPE html>
<html>
<head>
<title>
Example of HTML Date Attribute
</title>
</head>
<body>
<form>
<h4>
Example of HTML Date Attribute
</h4>
<p> We can see the date function in the html tag with static value</p>
Date of Joining: <input type = "date" id = "dates" name = "dates" min="2023-11-21" max="2023-11-30">
<button type = "submit" name = "btns"> Submit </button>
</form>
</body>
</html>
Output:
The following output shows the date function.
HTML Date with Onclick Function
The click functionality is employed to specify the initial and final dates using the "min" and "max" properties correspondingly. The onclick feature is applied within the input date or button element. Both the min and max terms can be utilized individually or jointly within the input date element.
Syntax
Below is the syntax displaying the date in HTML along with its assigned value.
<input type = "date" onclick = "document.getElementById('dates').min = '2023-12-22';">
<input type = "date" onclick = "getDate();">
<script>
function getDate(){
//Write script code!!!
}
</script>
Examples
The illustrations demonstrate the utilization of the onclick function with the HTML date. By employing the script tag and input element, various functionalities and events can be implemented.
Example 1:
The demonstration illustrates the initial value needed for the HTML date input field. By utilizing the on-click event of the HTML date tag, we can determine the earliest allowable date.
<!DOCTYPE html>
<html>
<head>
<title>
Example of HTML Date Attribute
</title>
</head>
<body>
<form>
<h4>
Example of HTML Date Attribute
</h4>
<p> We can see the date function in the html tag with static value</p>
Date of Joining: <input type = "date" id = "dates" name = "dates" onclick = "document.getElementById('dates').min = '2023-12-22';">
<button type = "submit" name = "btns"> Submit </button>
</form>
</body>
</html>
Output:
The following output shows the date function.
Example 2:
The demonstration illustrates the necessary initial and final values within the HTML date calendar. By utilizing the on-click functionality on the HTML date element, we can observe both the minimum and maximum dates.
<!DOCTYPE html>
<html>
<head>
<title>
Example of HTML Date Attribute
</title>
</head>
<body>
<form>
<h4>
Example of HTML Date Attribute
</h4>
<p> We can see the date function in the html tag with static value</p>
Date of Joining: <input type = "date" id = "dates" name = "dates" onclick = "myDate();">
<button type = "submit" name = "btns"> Submit </button>
<script>
function myDate(){
document.getElementById('dates').min = '2023-11-22';
document.getElementById('dates').max = '2023-12-22';
}
</script>
</form>
</body>
</html>
Output:
The following output shows the date function.
Browser Support
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<type="Date"> |
Yes | Yes | Yes | Yes | Yes |
Conclusion
Information in HTML format is essential for collecting user details in registration forms as well as forms for student or employee data. It is utilized to capture and store the required information efficiently.