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将获取显示在span 00:00:00时间（在浏览器时区中）的日期值。 然后我选择时间。 设置时间后，它也会正确显示在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());