Input type date overlaps with placeholder

[tomascharad]

Input type date overlaps with placeholder

<md-input placeholder="Fecha de nacimiento" type="date" [value]="userDetail.get('birthdate')" (input)="actions.inputChanged($event, 'birthdate')"></md-input>

"@angular/common": "^2.0.0-rc.6",
"@angular/compiler": "^2.0.0-rc.6",
"@angular/core": "^2.0.0-rc.6",
"@angular/forms": "^2.0.0-rc.6",
"@angular/http": "^2.0.0-rc.6",
"@angular/platform-browser": "^2.0.0-rc.6",
"@angular/platform-browser-dynamic": "^2.0.0-rc.6",
"@angular/router": "^3.0.0-rc.2",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular2-material/button": "^2.0.0-alpha.8-1",
"@angular2-material/card": "^2.0.0-alpha.8-1",
"@angular2-material/checkbox": "^2.0.0-alpha.8-1",
"@angular2-material/core": "^2.0.0-alpha.8-1",
"@angular2-material/input": "^2.0.0-alpha.8-1",
"@angular2-material/list": "^2.0.0-alpha.8-1",
"@angular2-material/radio": "^2.0.0-alpha.8-1",

[danielgek]

@tomascharad in next release will be fixed, see this commit

[vinagreti]

Why not use some CSS to hide the HTML placeholder when the input is not focused?
When you treat the input as not empty your placeholders appear different because in empty date input they are always on top of the field and in any other input they are inside.
Is it a workaround until datepicker is ready?

About the CSS approach, should be something like:

/*///////////////////////////////////////*/
/* Remove date default html5 placeholder */
/*///////////////////////////////////////*/
.no-datetime-placeholder input::-webkit-datetime-edit{ color: transparent; }

/* Include this to make it visible when input is clicked */
.no-datetime-placeholder input:focus::-webkit-datetime-edit{ color: #000; }

[kara]

This should be fixed in master, so closing.

[no-more]

Hi,

I'm using alpha.9-2, it's working for date input, but not for time input As I haven't found any thing about time input I think the issue is still in master.

Thanks.

[TrevorBroderick1]

I agree with @no-more .

This is fixed for type date but still occurs for type datetime-local.

Can we re-open this issue @kara ?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}