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