1<label for="meeting">Next meeting (August 2021):</label>
2<input type="date"
3 id="meeting"
4 name="meeting"
5 min="2021-08-01"
6 max="2021-08-31"
7 defaultValue="2021-08-01">
1<script>
2 function startDate() {
3 var d = new Date();
4 var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
5 var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
6 document.getElementById("date").innerHTML = days[d.getDay()]+" | "+d.getDate()+" "+months[d.getMonth()]+" "+d.getFullYear();
7 }
8startDate();
9</script>
10
11<body onload='startDate()'>
12 <div id='date'></div> <!-- use some css on #Date -->
13</body>
1<label for="start">Start date:</label>
2
3<input type="date" id="start" name="trip-start"
4 value="2018-07-22"
5 min="2018-01-01" max="2018-12-31">
1The <input type="date"> defines a date picker.
2The resulting value includes the year, month, and day.
3Tip: Always add the <label> tag for best accessibility practices!
4
5<label for="birthday">Birthday:</label>
6<input type="date" id="birthday" name="birthday">