Adding a datetime, date, month, week, time and datetime-local Field to a Form
29-01-18 Course- HTML5-Simple
The previous version of HTML do not include date picker control. However, with the advent of HTML 5, you can easily select a date and time from a date picker control by using various input type values of date, such as date, month, week, time, datetime, and datetime-local.
Let’s do the following steps to add a date picker control:
<!DOTYPE html>
<head>
<title>Adding a Date Picker Control</title>
</head>
<body>
<center>
<h2>Example to select Date and Time</h2>
<font color=”darkblue” size=”4px”>
<b> Different date picker controls are added. Select month, week, date and time. </b><br><br>
<form>
<table border=”1” cellpadding=”10” cellspacing=”10” >
<tr>
<td align=”left”>
Date and Time : <input type=”datetime” name=”dt” />
<br><br>
Date: <input type=”date” name=”dte” /><br><br>
Time: <input type=”time” name=”tm” /><br><br>
Week: <input type=”week” name=”wk” /><br><br>
Month: <input type=”month” name=”mn” /><br><br>
Local Date & time: <input type=”datetime-local” name=”dtlocal” />
</td></tr>
</table>
</font>
</form>
</center>
</body>
</html>
Save the document with the name AddingDate.html and open on browser.
Note: In HTML 5, the datetime input type attribute is not supported in Internet Explorer you should open other browser, such as: chrome, opera, mozilla etc.