如何在角度材料設計中為md-datepicker添加“浮動標簽”？

Question

請參考角度材料設計中輸入字段的演示 。 我的問題是，雖然大多數字段（如輸入密碼）都有“浮動”標簽，但日期輸入不會顯示任何內容，尤其是當占位符被隱藏時（因為日期已預先填充）。

這使得表單非常混亂，因為沒有提示日期下拉列表在表單上的內容（以及用戶應該做什么）。

如何將類似於輸入字段的浮動標簽添加到md-datepicker？ 為了使表單填充更明顯，並使我的表單具有一致的外觀？

Answer 1

您應該使用輸入容器：

<md-input-container>
    <label>Last update</label>
    <md-datepicker ng-model="user.updated_at"></md-datepicker>
</md-input-container>

Answer 2

好吧，在用css搞砸之后，我終於找到了以下解決方案：

CSS：

.date-picker-row {
    margin-left: -15px;
    position: relative;
    min-height: 60px;
}

.date-picker-row label {
    position: absolute;
    top: -10px;
    left: 50px;
    color: rgba(0, 0, 0, 0.541176);
    font-size: 12px;
}

.date-picker-row .md-datepicker-input-container {
    margin-left: 0;
}

HTML：

<div layout-gt-sm="row">
    <div flex-gt-sm class="date-picker-row">
        <label for="email" translate>Signup date</label>
        <md-datepicker ng-model="user.created_at" md-placeholder="Signup date"></md-datepicker>
    </div>
    <div flex-gt-sm class="date-picker-row">
        <label for="email" translate>Last update</label>
        <md-datepicker ng-model="user.updated_at" md-placeholder="Update date"></md-datepicker>
    </div>
</div>