javascript - 使用 angularJS 结合 ui-bootstrap datepicker 和 timepicker？

Question

我正在开发一个使用 UI-Bootstrap 的日期选择器和时间选择器指令的网络应用程序。对于日期选择器，我使用了一个简单的弹出对话框，而对于时间选择器，我只是在日期选择器旁边的页面上有一个对话框。

不幸的是，我很难让这两个指令协同工作。当用户选择一个日期时，一切正常，但是当更新时间选择器时，我不确定如何让它也随之更新日期选择器。

我考虑了两个解决这个问题的方法，第一个是让时间选择器在日期选择器更改时简单地更新它的 ng-model，但不幸的是，这也不会追溯更改日期选择器上显示的内容，所以对我不起作用。我想到的第二个选项是让指令相互交互，但不幸的是，我是查看和编辑指令的新手，所以需要一些帮助来解决这个问题。

如果有人知道通过动态更新实现我想要的方法，请给我任何您可以提供的建议。

这是我从 Plunker 获取的日程 TableView 的 HTML，附在下面:

<div class="col-md-12 container-fluid" style="padding-bottom:20px">
  <div class="container-fluid" ng-style="vm.contentStyle">
    <h2>Schedule</h2>
    <!-- DatePickers -->
    <div class="col-md-11" style="padding-bottom:20px">

      <div class="col-md-6">

        <p><label class="control-label" style="color:#AAB4BE" for="startDate">{{ vm.displayName }}</label></p>
        <p class="input-group">
          <input type="text" class="form-control" ng-change="vm.datePick()" datepicker-popup="yyyy-MM-dd HH:mm" id="startDate" ng-model="vm.date" is-open="vm.opened.start" datepicker-options="vm.dateOptions" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="vm.open($event, 'start')"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>

      </div>

      <div class="col-md-6" style="padding-top:2px">

        <timepicker ng-show="vm.date" ng-model="vm.time" ng-change="vm.timePick()" show-meridian="false"></timepicker>

      </div>
    </div>
  </div>
</div>

Here is a plunker以我正在尝试做的事情为例。如果我还可以提供任何有助于回答这个问题的信息，请告诉我!

Answer 1

不幸的是，您不能只更新模型，因此您必须通过使用新值重新分配模型来破坏引用。我 fork 了上面的 plunker 并将其修复在 this version 中.

vm.pickTime = function(dateTimestamp) {
  var newDate = new Date(dateTimestamp);
  newDate.setHours(vm.time.getHours());
  newDate.setMinutes(vm.time.getMinutes());
  vm.date = newDate;
};

我还引入了一个表单元素，让事情变得更简洁。