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

Solution 1:

You should use an input container:

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

Solution 2:

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-rowlabel {
    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:

<divlayout-gt-sm="row"><divflex-gt-smclass="date-picker-row"><labelfor="email"translate>Signup date</label><md-datepickerng-model="user.created_at"md-placeholder="Signup date"></md-datepicker></div><divflex-gt-smclass="date-picker-row"><labelfor="email"translate>Last update</label><md-datepickerng-model="user.updated_at"md-placeholder="Update date"></md-datepicker></div></div>