如何在 angular material 设计中为 md-datepicker 添加 "floating label"？

Question

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

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

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

Answer 1

好吧，经过一番折腾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>

Answer 2

您应该使用输入容器：

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

如何在 angular material 设计中为 md-datepicker 添加 "floating label"？

How to add "floating label" for md-datepicker in angular material design?

javascript

css

datepicker

angularjs

angular-material