AngularJS Material ng-input-container 重置时间

Question

我的目标是拥有一个单一的日期和时间模型。

不幸的是，我还没有为 AngularJS Material 找到稳定的日期时间选择器组件，所以我使用了两个共享相同模型的元素：标准md-datepicker和常规input type="time"

      <md-input-container>
        <md-datepicker ng-model="ctrl.myDateTime" md-placeholder="Enter date"></md-datepicker>
      </md-input-container>
      <md-input-container>
        <input ng-model="ctrl.myDateTime" type="time">
      </md-input-container>

      <span>Date and time chosen: {{ctrl.myDateTime}}</span>

首先，我选择日期。选择日期后，ctrl.myDateTime获取00:00:00显示在span. 然后我选择时间。设置时间后，它span也会正确显示。

这里的问题是：每次input type="time" 失去焦点（如onblur），由于某种原因时间分数被重置为00:00:00，但input会继续显示用户的值。

这就是我需要帮助的地方。我唯一想到的是，如果input没有包装，md-input-container那么时间只会重置一次，如果我再次更改它，失去的焦点不会重置时间。

如何避免这种情况？

要重现的代码示例：https : //codepen.io/mih-kopylov/pen/KKMxgBK

Answer 1

通过将类型从 更改time为datetime可以避免这种情况。
如果您只想拥有time，则需要为其添加一个附加变量。

<md-content ng-controller="AppCtrl as ctrl" layout-padding="" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp">
  <div layout="column">
    <div flex="">
      <md-input-container>
        <md-datepicker ng-model="ctrl.myDateTime" md-placeholder="Enter date"></md-datepicker>
      </md-input-container>
      <md-input-container>
<!-- when time is changed using input inside md-input-container, time is resetted on blur -->
        <input ng-model="ctrl.myDateTime" type="datetime">
      </md-input-container>
<!-- when time is changed using this input, time is resetted but only once -->
      <input ng-model="ctrl.myDateTime" type="datetime">
    </div>
    <span>Date and time chosen: {{ctrl.myDateTime}}</span>
  </div>
</md-content>

如果您选择分隔日期和时间，则可以使用以下函数：

myDate.setTime(myTime.getTime());