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

Question

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

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

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

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

这是我从 Plunker 获得的日程安排视图的 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

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

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

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

Answer 2

我找到了一个可以帮助你的 Plunker。

http://plnkr.co/edit/QujX5A?p=preview

<datetimepicker min-date="minDate" show-weeks="showWeeks" hour-step="hourStep" 
  minute-step="minuteStep" ng-model="date" show-meridian="showMeridian" 
  date-format="dd-MMM-yyyy" date-options="dateOptions"
  date-disabled="disabled(date, mode)" 
  readonly-date="false"
  readonly-time="false"></datetimepicker>

这就是你要找的吗？

Answer 3

你的 plunker 有错别字。 您在控制器中定义了 vm.pickTime 和 vm.pickDate，并在控制器中调用了 vm.timePick 和 vm.datePick html.

我在这个plunker 中修复了它们。

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