AngularJS : Pass results from datepicker to ng-model

Question

I have a datetimepicker, I'm needing this to pass the date inside the text to the model.

I would place this in a fiddle but i don't know how as it has the bootstrap timepicker located here http://eonasdan.github.io/bootstrap-datetimepicker angular(obvs) and other stuff

This is what i have so far;

  <div class="form-group">
                  <div class='input-group date' ng-model="package.timeA">
                      <input type='text' id='datetimepicker3' ng-model="package.timeA" ng-change="alert('Hello')" class="form-control" />
                      <span class="input-group-addon" ng-model="package.timeA">
                          <span class="glyphicon glyphicon-time"></span>
                      </span>
                  </div>
              </div>

          <script type="text/javascript">
              $(function () {
                  $('#datetimepicker3').datetimepicker({
                      format: 'LT'
                  }).on("dp.change", function(e) {
                    document.getElementById('datetimepicker3').value = e.date;
                  });
              });
          </script>

The datetimepicker needs to pass into the model, Totally stuck until it does so i can submit it to the DB

Any Ideas?>

This needs to be in a directive. There you can update scope – charlietfl Sep 29 '15 at 14:08 — charlietfl, Sep 29 '15 at 14:08

score 0 · Accepted Answer · edited May 23 '17 at 12:23

You will need to trigger the "input" event of #datetimepicker3 since ng-model listens for this event hence it shall update its value :

<script type="text/javascript">
              $(function () {
                  $('#datetimepicker3').datetimepicker({
                      format: 'LT'
                  }).on("dp.change", function(e) {
                    document.getElementById('datetimepicker3').value = e.date;
                    $('#datetimepicker3').trigger('input'); // trigger input event
                  });
              });
          </script>

As per How does AngularJS internally catch events like 'onclick', 'onchange'?

Angular, by default, listens for input event, and, in case it's not supported by the browser, it will fall back to keydown + change events.

Events are binded with jQlite's bind method (unless you also have a full jQuery included, in which case its bind method will take over).

score 0 · Answer 2 · answered Sep 29 '15 at 14:14

<div class='input-group date'>
   <input type='text' id='datetimepicker3' 
     ng-model="package.timeA" 
     ng-change="alert('Hello')" 
     class="form-control" />
   <span class="input-group-addon" ng-model="package.timeA">
      <span class="glyphicon glyphicon-time"></span>
   </span>
</div>

this code is enough to pass the value to the model on the scope

ng-model="package.timeA"

No more code is needed to understand how datepicker works with bootstrap see this article

AngularJS : Pass results from datepicker to ng-model

2 Answers2