Skip to content

Instantly share code, notes, and snippets.

@adactio

adactio/monthform.html

Created December 13, 2011 22:20
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adactio/1474170 to your computer and use it in GitHub Desktop.
Save adactio/1474170 to your computer and use it in GitHub Desktop.
Download ZIP
An experiment with a progressive enhancement pattern to replace two select with a single year-month field.
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment