How to add “floating label” for md-datepicker in a

Question

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?

Answer 1

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>

Answer 2

You should use an input container:

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