如何添加“浮动标签"角材料设计中的md-datepicker? [英] How to add "floating label" for md-datepicker in angular material design?

问题描述

请参考此角度材料设计中输入字段的演示.我的问题是，尽管大多数字段(如输入密码)都带有浮动"标签，但输入的日期却不显示任何内容，尤其是在占位符被隐藏时(因为日期是预先填充的).

Please refer to this demo of input fields in angular material design. My problem is that while most fields like input passwords have "floating" labels the date input does not show anything, especially when the placeholder is hidden (because the date is pre-filled).

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

This makes the form very confusing, since there is no prompt on what the date dropdown represents on the form (and what the user is supposed to do).

如何在md-datepicker中添加类似于输入字段的浮动标签?要使表单的填充更加明显，并让表单保持一致的外观?

How can I add a floating label similar to input fields to the md-datepicker? To make the form filling more obvious and also give my forms a consistent look?

推荐答案

好吧，在弄乱CSS之后，我终于想出了以下解决方案:

Okay, after a bit of messing around with css, I finally figured out the following solution:

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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！