如何在角度材料设计中为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>