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());