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不断展示用户的值(value)。
这就是我需要帮助的地方。
我唯一想到的是如果 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());