supersan supersan -4 years ago 174
AngularJS Question

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

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

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download