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>