adactio/monthform.html

## monthform.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input test</title>
</head>
<body>

<form method="post" action="#">
<label>Expiry date:
<span id="expiryfields">
<select name="expirymonth" id="expirymonth">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12" selected>December</option>
</select>
<select name="expiryyear" id="expiryyear">
<option value="2011" selected>2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</span>
</label>
</form>

<script>
(function() {
    var input = document.createElement('input');
    input.setAttribute('type','month');
    if (input.type == 'text') return;
    var name = 'expiry',
        container = document.getElementById('expiryfields'),
        yearfield = document.getElementById('expiryyear'),
        monthfield = document.getElementById('expirymonth'),
        years = yearfield.options,
        months = monthfield.options,
        year = years[years.selectedIndex].value,
        month = months[months.selectedIndex].value,
        value = year+'-'+month,
        min = years[0].value+'-'+months[0].value,
        max = years[years.length-1].value+'-'+months[months.length-1].value;
    input.setAttribute('name',name);
    input.setAttribute('min',min);
    input.setAttribute('max',max);
    input.setAttribute('value',value);
    container.innerHTML = '';
    container.appendChild(input);
})();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Input test</title>
	</head>
	<body>

	<form method="post" action="#">
	<label>Expiry date:
	<span id="expiryfields">
	<select name="expirymonth" id="expirymonth">
	<option value="01">January</option>
	<option value="02">February</option>
	<option value="03">March</option>
	<option value="04">April</option>
	<option value="05">May</option>
	<option value="06">June</option>
	<option value="07">July</option>
	<option value="08">August</option>
	<option value="09">September</option>
	<option value="10">October</option>
	<option value="11">November</option>
	<option value="12" selected>December</option>
	</select>
	<select name="expiryyear" id="expiryyear">
	<option value="2011" selected>2011</option>
	<option value="2012">2012</option>
	<option value="2013">2013</option>
	<option value="2014">2014</option>
	<option value="2015">2015</option>
	<option value="2016">2016</option>
	<option value="2017">2017</option>
	<option value="2018">2018</option>
	<option value="2019">2019</option>
	<option value="2020">2020</option>
	</select>
	</span>
	</label>
	</form>

	<script>
	(function() {
	var input = document.createElement('input');
	input.setAttribute('type','month');
	if (input.type == 'text') return;
	var name = 'expiry',
	container = document.getElementById('expiryfields'),
	yearfield = document.getElementById('expiryyear'),
	monthfield = document.getElementById('expirymonth'),
	years = yearfield.options,
	months = monthfield.options,
	year = years[years.selectedIndex].value,
	month = months[months.selectedIndex].value,
	value = year+'-'+month,
	min = years[0].value+'-'+months[0].value,
	max = years[years.length-1].value+'-'+months[months.length-1].value;
	input.setAttribute('name',name);
	input.setAttribute('min',min);
	input.setAttribute('max',max);
	input.setAttribute('value',value);
	container.innerHTML = '';
	container.appendChild(input);
	})();
	</script>
	</body>
	</html>