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

问题描述

请参考这个

解决方案

好吧，折腾了一阵 css 后，终于想出了以下解决方案:

CSS:

.date-picker-row {左边距:-15px；位置:相对；最小高度:60px；}.date-picker-row 标签 {位置:绝对；顶部:-10px；左:50px；颜色:RGBA(0, 0, 0, 0.541176);字体大小:12px；}.date-picker-row .md-datepicker-input-container {左边距:0；}

HTML:

<div flex-gt-sm class="date-picker-row"><label for="email" translate>注册日期</label><md-datepicker ng-model="user.created_at" md-placeholder="注册日期"></md-datepicker>
<div flex-gt-sm class="date-picker-row"><label for="email" translate>上次更新</label><md-datepicker ng-model="user.updated_at" md-placeholder="更新日期"></md-datepicker>

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).

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?

解决方案

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屋！