1

I am using MDL - getmdl.io version 1.3.0

I am having a problem getting the date form field to do what I want. instead of only showing the label field, it is showing the placeholder from the default <input type="date">.

I ideally don't want to show this. But if I have to, how can I put the label next to the form field?

code

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--6-col">
    <input class="mdl-textfield__input" type="date" id="date">
    <label class="mdl-textfield__label" for="date">Date</label>
  </div>

My CSS attempt to hide the default placeholder.

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]),
::-webkit-datetime-edit-text {
  color: transparent;
}
halfer
  • 19,824
  • 17
  • 99
  • 186
RussellHarrower
  • 6,470
  • 21
  • 102
  • 204

2 Answers2

2

MDL has a built-in yet undocumemnted solution: has-placeholder. This will make the floating label fixed, always floating

Add mdl-textfield--floating-label has-placeholder classes to the outer element.

Credit: @Jurgen How to create textbox with fixed label in Material Design Lite?

btraas
  • 160
  • 2
  • 9
-1

Add this instead:

input::-webkit-datetime-edit{ color: transparent; }
input:focus::-webkit-datetime-edit{ color: #000; }

Taken from here

Kostas Siabanis
  • 2,989
  • 2
  • 20
  • 22