Materialize: Date picker label does not move up when date inserted

[Krazitchek]

On date picker when a date is inserted, the label does not move up as with inputs fields without placeholder.
Once date selected, text and label are superimposed.

[Djuka]

Hm... In documentation I see that example was made without wrapper with input-field class (I guess you wrapped this with one). So maybe it is not supported. But I don't see any good reason for type="date" input to exist, except for semantics (I might be wrong here since I am just a few hours into this framework). Since datepicker class will spawn datepicker on click event that will cover whole page and the animation should work with type="text" it could've been kept simple like this:

<div class="input-field">
    <label for="something">Something</label>
    <input id="something" type="text" class="datepicker">
</div>

But there are some animation issues with labels in this setup, as in my browser it either disappears or it gets pushed down by certain amount.
The documentation should probably be edited to say if datepicker inputs should be wrapped with input-field class or not, as in current example in documentation it isn't.
I also suggest you share more info next time, like html, so we don't need to guess what your wrote.

[apolzon]

I have seen this happen intermittently on type=text inputs as well.

        <div class="row">
          <div class="col s12 input-field">
            <input id="email" class="ember-view ember-text-field validate" type="email">
            <label for="email" class="">Email</label>
          </div>
        </div>

It's been entirely random for me -- haven't been able to come up with a good reproducible example. I'm still using v0.95.3, and haven't had a chance to upgrade to latest, but I didn't see anything in the changelog that suggests changes to the label behavior have been made.

[JimishF]

I've faced this kind of problem when I was using Angular and materialize.
So when I was initially Loading data through ng-model, the label was not moving up as we expect normally, so i used simple patch and just added class "active" to respective label of the input-field.

[ericrowan]

I'm also running into this on OS X El Cap in Safari, Firefox and Opera, but Chrome displays correctly. Materialize 0.97.4.

[isaachinman]

Been like 8 months... any update on this? Currently experiencing this bug in FF 42.

Edit: If you change the input type from "date" to "text", it should work fine across all browsers. Not a great solution, but it works.

[Tim-arts]

Add 'active' class and it should works.

[isaachinman]

@TyrionGraphiste Nope. Adding 'active' class to input does nothing to fix the problem (tested in FF 43).

[Tim-arts]

Because it's on the label. And the label should be after the input not before.

[isaachinman]

@TyrionGraphiste Ah, I see what you mean. Seems like it should be default behaviour to give the label an 'active' class if it has a value upon initialisation. Cheers.

[Tim-arts]

Yeah, but there is not event on load for inputs because it doesn't exists.

[isaachinman]

There's an onStart event for the datepickers though...

[Tim-arts]

Yeah but we need only one initialization for all components, not multiple times.

[Luisetelo]

Still interested in this. I'm using materialize through ember-cli-materialize. Changing the input type or adding an event implies redefining a whole component.

[Szymon-dziewonski]

I have the same problem on firefox, labe doesnt get active class on input value not empty :/

[DanielRuf]

Use data-value, see https://github.com/Dogfalo/materialize/blob/d8dcfcf217269a97689dfb2d8e18b29a9bd54bf6/js/date_picker/picker.js#L602.

<input type="date" class="datepicker" data-value="10.06.2017">

[ncovercash]

When I've had an issue, its because jQuery loaded _after_ Materialize, causing for no materialize JS to be executed. This can be seen by errors in the console.

[DanielRuf]

Exactly. Always check the console in your developer tools, this is one of the most important things for us developers.

[Dogfalo]

In addition to what @DanielRuf said regarding preloading values, a bug was fixed here to allow labels to move up properly after selecting a date value. 016e251f5b84ee4e0091ea8f8c7aac494bd148fa

[mxmaxime]

Hi,
@Dogfalo I still have the problem, jQuery is loaded after materialize, no errors, last version installed (v0.100.2).

Even with data-type.

[DanielRuf]

@Dogfalo I still have the problem, jQuery is loaded after materialize, no errors, last version installed (v0.100.2).

You should load jQuery before Materialize.

[mxmaxime]

Ops, sorry I wanted to say before*. No errors in the console, if jQuery was loaded after I will have some errors.

[shiflonium]

I know its been a while but I was able to solve this by explicitly specifying the input type="text"
I had this problem when my input was defined like the below:

<input class="datepicker">

Was able to solve by adding type:

<input class="datepicker" type="text">

[aitym]

HTML:
<div class="input-field"> <input placeholder="PlaceHolder Text" type="text" class="datepicker" value=""> <label>Label text</label> </div>

JS Code:
`jQuery(document).ready(function($) {

M.Datepicker.init(document.querySelectorAll('.datepicker'), {
    onClose: function() {
        $('.datepicker + label').addClass('active');
    }
});

$('.datepicker + label').addClass('active');

}`