public
Created

An experiment with a progressive enhancement pattern to replace two select with a single year-month field.

  • Download Gist
monthform.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
<!DOCTYPE html>
<html>
<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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.