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

2
votes

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?

angular material datepicker label

2
javascriptcssangularjsdatepickerangular-material
Also can you please take a look at this form? The fields are just all over the place even though I copied most of the code from the angular material demos: codepen.io/superasn/pen/VaJdqz (the widths are inconsistent, the verified checkbox looks funny) - supersan
I believe they have fixed it in current master so it should be available in the next release (current release 1.1.0-rc.5). Issue github.com/angular/material/issues/4233 - Lukasz S
This can only be done in Angular Material version 1.1.2 and later. - Max Pringle

2 Answers

5
votes

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>
3
votes

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>