HTML Date
The input element in HTML has several attributes. One of its attributes is the type attribute which creates a calendar in an order that a user can select a date from the calendar. The calendar is visible only by clicking on the input field. It contains the values of the day, month, and year.
Syntax:
<input type="date">
Examples of HTML Date:
Example 1:
<!DOCTYPE html>
<html>
<head>
<title> Example 1 of HTML Date </title>
<style>
h2 {
color: rgb(163, 16, 248);
}
h3 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
text-align: left;
}
</style>
</head>
<body bgcolor="lightyellow">
<h2> Example 1 of HTML Date </h2>
<h3> Enter Date <input type="date"></h3>
</body>
</html>
Output:
The output shows the date. When you try to input a date, a calendar appears on the screen. Now, you can choose the date from the calendar.
Example 2:
It is another example of an HTML date. We are using input text and input date.
<!DOCTYPE html>
<html>
<head>
<title> Example 2 of HTML Date </title>
</head>
<body bgcolor="yellow">
<form>
Student Name: <input type="text" placeholder="Enter Your name" required>
<br>
<br>
<label for="admission date"> Date of Admission: </label>
<input type = "date" required>
<button type="submit" name="btn"> Submit </button>
</form>
</body>
</html>
Output:
The output shows the input text, input date, and submit button. You can fill the details and submit the data. The yellow background color has also been used to make the web page look better.
Example 3:
We are setting the min value and the max value by using min and max attribute inside the input element.
<!DOCTYPE html>
<html>
<head>
<title> Example 3 of HTML Date </title>
</head>
<body bgcolor="DarkSalmon">
Enter a date between 1990-01-01 and 2023-01-01:
<input type="date" id="Date" name="bday" min="1990-01-01" max="2023-01-01">
<p> Click the button to display the value of the min attribute. </p>
<button onclick="myFunction()"> Min Value </button>
<p> Click the button to display the value of the max attribute. </p>
<button onclick="myFunc()"> Max Value </button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("Date").min;
document.getElementById("demo").innerHTML = x;
}
function myFunc() {
var x = document.getElementById("Date").max;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Output:
You can see that the min and max values are fixed, and you can select the date between these values.
When you click the min value button, the min value will appear as shown below:
When you click on the max value button, the max value will appear as shown below:
Example 4:
Using JavaScript, we will display the current date, time, and day in this example.
<html>
<head>
<title> Display Current Date in Html using Javascript </title>
</head>
<body bgcolor="AntiqueWhite">
<h2> Current Date: </h2>
<h3 id="DateTime"></h3>
</body>
<script type="text/javascript">
var today = new Date();
var day = today.getDay();
var daylist = ["Sunday","Monday","Tuesday","Wednesday ","Thursday","Friday","Saturday"];
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = ' Date: ' +date+' <br> Time: '+time;
document.getElementById("DateTime").innerHTML = dateTime + ' <br> Day : ' + daylist[day];
</script>
</html>Output:
The output shows the current date, time, and day.
Example 5:
This example will display today’s date, day, and time on the web page.
<!DOCTYPE html>
<html>
<head>
<title> Example 5 of HTML Date </title>
</head>
<body bgcolor="cyan">
<h2> Example 5 of HTML Date </h2>
<p id="date"></p>
<script>
var dates = new Date();
document.getElementById("date").innerHTML = dates;
</script>
</body>
</html>
Output:
The output shows today’s date, day, and time.
Example 6:
In this example, we will use the <select> and <option> tags and create options to select the date.
<!DOCTYPE html>
<html>
<head>
<title> Example 6 of HTML Date </title>
</head>
<body bgcolor="lightpink">
<form action="#">
<label for="name"> Your name </label>
<input type="text" name="Your name" placeholder="Your name"> <br> <br>
<label for="address"> Your address </label>
<input type="text" name="Your address" placeholder="Your address">
<br> <br>
<label for="birthday"> Your Date of Birth </label>
<select name="month" id="month">
<option value="month">Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="days" id="days">
<option value="days"> Days </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
<option value="6"> 6 </option>
</select>
<select name="years" id="years">
<option value="years"> Years </option>
<option value="2000"> 2000 </option>
<option value="2001"> 2001 </option>
<option value="2002"> 2002 </option>
<option value="2003"> 2003 </option>
<option value="2004"> 2004 </option>
<option value="2005"> 2005 </option>
</select> <br> <br>
<input type="submit" value="Submit">
</form>
</body>
</html>
</html>Output:
You can select the month, day, and year by clicking the drop-down buttons as shown below:
Browser Support:
It supports the following browsers:
- Google Chrome
- Internet Explorer
- Mozilla Firefox
- Safari
- Opera