This is part 11 of HTML Form series. You can read previous parts here. In this part you will learn about input type datetime-local and input type month control.
input type= “datetime-local”
The control is intended to represent a local date and time, not necessarily the user’s local date and time.
The <input> element of type “datetime-local” creates input filed which allow a user to select the date as well as local time in the hour and minute without time zone information.
The <input type="datetime-local"> defines a date picker.
The resulting value includes the year, month, day, and time.
The control’s UI varies in general from browser to browser.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input type="datetime-local" example</title>
</head>
<body>
<form>
<label>
Select the meeting schedule.<br>
Select date & time: <input type="datetime-local" name="meetingdate"> <br><br>
</label>
<input type="submit">
</form>
</body>
</html>
input type= “month”
The <input> type “month” creates an input field which allows a user to easily enter month and year in the format of “MM, YYYY” where MM defines month value, and YYYY defines the year value.
The <input type="month"> defines a month and year control.
The format is “YYYY-MM”.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input type="month" example</title>
</head>
<body>
<form>
<label>Enter your Birth Month-year: </label>
<input type="month" name="newMonth">
<input type="submit">
</form>
</body>
</html>