An experiment with a progressive enhancement pattern to replace two select with a single year-month field.
<!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