Una opción sería tener un campo escondido (hidden) y añadir un controlador del evento change
a las tres listas desplegables, que actualizará el campo escondido con el nuevo valor. Luego en el servidor, en lugar de leer las listas desplegables, lo que haces es leer ese campo escondido.
En realidad sería type="hidden"
, pero para este ejemplo voy a poner type="text"
para que sea visible, no olvides cambiarle el tipo:
var aux = document.querySelectorAll(".crea-fecha");
for(var x = 0; x < aux.length; x++) {
aux[x].addEventListener("change", function() {
document.getElementById("fecha").value = document.getElementById("year").value + "-" +
document.getElementById("month").value + "-" +
document.getElementById("day").value;
});
};
<select id="day" class="crea-fecha">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
</select>
<select id="month" class="crea-fecha">
<option value="01">Enero</option>
<option value="02">Febrero</option>
<option value="03">Marzo</option>
<option value="04">Abril</option>
<option value="05">Mayo</option>
<option value="06">Junio</option>
<option value="07">Julio</option>
<option value="08">Agosto</option>
</select>
<select id="year" class="crea-fecha">
<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>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
<input type="text" id="fecha" value="2016-01-01" />