Date and Time Form - Angularjs

Question

I have a form with the option to choose date and Time. I’m using the Datepicker and Timepicker components.

<!-- Date -->
<div class="col-xs-12 col-md-3 col-lg-3">
  <div class="form-group">
    <label>Data</label>
    <div class="input-group">
      <div class="input-group-addon">
        <i class="fa fa-calendar"></i>
      </div>
      <input ng-model="alerta.data" type="text" class="form-control pull-right" id="dataHora">
    </div>
  </div>
</div>

<!-- Time -->
<div class="col-xs-12 col-md-3 col-lg-3">
  <div class="form-group">
    <label>Hora</label>
    <div class="input-group">
      <div class="input-group-addon">
        <i class="fa fa-clock-o"></i>
      </div>
      <input ng-model="alerta.hora" type="text" class="form-control pull-right" id="timePicker">
    </div>
  </div>
</div>

The problem I’m having is this, when I send the form, I’m not receiving the alert.time and alert.data values in my controller. The rest of the form inputs normally receive.

Follow JSON of return:

This is the function that starts the two components:

vm.dateTimeRange = function() {
   $('#dataHora').datepicker({timePicker: true, timePickerIncrement: 30, format: 'dd/mm/yyyy'});
   $('#timePicker').timepicker();
}

Answer 1

Have you tried input attr in Controller? Ex:

 vm.funcaoEnvio = function (alerta) {
  vm.dados = {
    'nome': alerta.nome,
    'email': alerta.email,
    'cidade': alerta.cidade,
    'telefone': alerta.telefone
  }
vm.dados.hora = $(".classe_do_teu_input-de_hora").attr('value');
vm.dados.data = $(".classe_do_teu_input_de_data").attr('value');
}

Then you ubmit the vm.data.

You can treat the value of the date and time using also the library of the Moment js..

If you only need the date/time Mask, you can use the Angular-UI-Mask.