如何在角度材料设计中为 md-datepicker 添加“浮动标签”？答案

【问题标题】：How to add "floating label" for md-datepicker in angular material design?如何在角度材料设计中为 md-datepicker 添加“浮动标签”？
【发布时间】：2016-05-20 12:41:10
【问题描述】：

请参考这个demo of input fields in angular material design。我的问题是，虽然大多数字段（如输入密码）都有“浮动”标签，但日期输入不显示任何内容，尤其是当占位符隐藏时（因为日期已预先填写）。

这使得表单非常混乱，因为没有提示表单上的日期下拉列表代表什么（以及用户应该做什么）。

如何在 md-datepicker 中添加类似于输入字段的浮动标签？ 让表单填写更明显，同时让我的表单看起来一致？

【问题讨论】：

您也可以看看这个表格吗？尽管我从角材料演示中复制了大部分代码，但这些字段到处都是：codepen.io/superasn/pen/VaJdqz（宽度不一致，经过验证的复选框看起来很有趣）
我相信他们已经在当前的 master 中修复了它，所以它应该在下一个版本（当前版本 1.1.0-rc.5）中可用。问题github.com/angular/material/issues/4233
这只能在 Angular Material 1.1.2 及更高版本中完成。

标签： javascript css angularjs datepicker angular-material

【解决方案1】：

您应该使用输入容器：

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

【讨论】：

已确认，这是如今的官方方式。只需确保删除 md-datepicker 元素中的 md-placeholder 值即可。
这只能在 Angular Material 1.1.2 及更高版本中完成。

【解决方案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>

【讨论】：

我在您的示例中没有看到 md-datepicker-input-container 类的使用。还有为什么 for="email"？我不得不稍微编辑一下，以便更接近于正确（即） position: absolute;底部：100%；左：50px；颜色：rgba(0, 0, 0, 0.541176);字体大小：11px；边距底部：5px;
您只是在模拟浮动标签的行为，我认为 OHG_Techtips 的答案是最好的。