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