One option would be to have a hidden field ( hidden ) and add an event handler change
to the three drop-down lists, which will update the hidden field with the new value. Then on the server, instead of reading the drop-down lists, what you do is read that hidden field.
Actually it would be type="hidden"
, but for this example I'm going to put type="text"
to be visible, do not forget to change the type:
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" />