AngularJS ：将结果从日期选择器传递到 ng-model

Question

我有一个日期时间选择器，我需要它来将文本中的日期传递给模型。

我会把它放在 fiddle 中，但我不知道它的 bootstrap 时间选择器如何位于 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>

日期时间选择器需要传递到模型中，完全卡住了，直到它传递到数据库，我才可以将它提交给数据库

有什么想法吗？>

Answer 1

您将需要触发 #datetimepicker3 的 "input" 事件，因为 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 的绑定方法绑定（除非您还包含一个完整的 jQuery，在这种情况下，它的绑定方法将接管）。

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

无需更多代码即可了解日期选择器如何与 bootstrap see this article

一起工作

AngularJS ：将结果从日期选择器传递到 ng-model

AngularJS : Pass results from datepicker to ng-model

javascript

jquery

datetimepicker

angularjs

angular-ngmodel