Form with Date and Time - AngularJS

Question

Form with Date and Time - AngularJS

Navigation

#1 by (2 votes)

0

I have a form with the option to choose Date and Time. I am 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 the following, when I submit the form, I'm not getting the values alert.time and alert.data in my controller. The rest of the form inputs are usually received.

Follow JSON 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();
}

javascript jquery angularjs datetime

asked by anonymous 17.11.2017 / 19:26

1 answer

Conflict between objects of the same type in the Entity Framework Get data-value value that is generated dynamically

score 2 · Accepted Answer

Have you tried to give an attr of the inputs in the 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 submit the vm.dates.

You can handle the date and time value by also using the Moment.js library.

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