Separate a date (dd / mm / yyyy) in different options

2

How do I separate the current date in three options.

For example:

and then go back together?

I have this working but I have been asked to change it and I can not find anything about doing what I ask.

<tr>
   <th >Fecha de Emisión</th>
   <td>
       <input class="form-control" style="width: 30%;"  type="date" ng-model="datosNuevoCarnet.NuevoCarnet.Emision" />
   </td>
</tr>
<tr>
    <th>Fecha de Vencimiento</th>
    <td>
         <input class="form-control" style="width: 30%;" type="date" ng-model="datosNuevoCarnet.NuevoCarnet.Vencimiento" />
     </td>
</tr>

$scope.datosNuevoCarnet.NuevoCarnet.Emision = new Date();
$scope.datosNuevoCarnet.NuevoCarnet.Vencimiento = new Date(newDate().setYear($scope.datosNuevoCarnet.NuevoCarnet.Emision.getFullYear() + 5));
    
asked by Sebastian Kullman 16.08.2016 в 15:37
source

3 answers

3

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" />
    
answered by 16.08.2016 / 15:50
source
1

Good morning, have you tried with jquery? link

<input type="text" id="datetime12" data-format="DD-MM-YYYY h:mm a" data-template="DD / MM / YYYY     hh : mm a" name="datetime" value="21-12-2012 8:30 pm">
<script>
$(function(){
    $('#datetime12').combodate();  
});
</script>
    
answered by 16.08.2016 в 15:44
0

You can use jQuery

<script src="http://vitalets.github.io/combodate/combodate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.js"></script>

<input type="text" id="fecha" data-format="DD-MM-YYYY" data-template="D MMM YYYY" />

<script >
 $(function(){
   $('#fecha').combodate({
      value: new Date(),
      maxYear: moment().format('YYYY')  
  });    
 });
</script>
    
answered by 16.08.2016 в 15:54