AngularJS：将结果从 datepicker 传递给 ng-model答案

【问题标题】：AngularJS : Pass results from datepicker to ng-modelAngularJS：将结果从 datepicker 传递给 ng-model
【发布时间】：2015-12-27 01:19:21
【问题描述】：

我有一个 datetimepicker，我需要它来将文本中的日期传递给模型。

我会把它放在一个小提琴中，但我不知道它的引导时间选择器如何位于这里 http://eonasdan.github.io/bootstrap-datetimepicker angular(obvs) 和其他东西

这是我目前所拥有的；

  <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>

datetimepicker 需要传递到模型中，直到它完全被卡住，所以我可以将它提交给数据库

有什么想法吗？>

【问题讨论】：

这需要在指令中。在那里你可以更新范围

标签： javascript jquery angularjs datetimepicker angular-ngmodel

【解决方案1】：

您将需要触发#datetimepicker3 的“输入”事件，因为 ng-model 会侦听此事件，因此它将更新其值：

<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>

根据How does AngularJS internally catch events like 'onclick', 'onchange'?

默认情况下，Angular 会监听 input 事件，如果浏览器不支持它，它将回退到 keydown + change 事件。

事件与 jQlite 的 bind 方法绑定（除非您还包含完整的 jQuery，在这种情况下，它的 bind 方法将接管）。

【讨论】：

【解决方案2】：

<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>

这段代码足以将值传递给作用域上的模型

ng-model="package.timeA"

无需更多代码即可了解 datepicker 如何与 bootstrap see this article 配合使用

【讨论】：