How to add placeholder <input type=“datetime-local”> field?

Question

I\'ve been trying to add placeholder in input type=\'datetime-local\' field but it doesn\'t work at all. Use css for solving the issue but still unable to do it :(

Answer 1

A bit tricky, but it works:

Html:

Css:

.placeholder
{
  color: gray;
}

.focused
{
  color: black;
}

Javascript:

var inp = document.getElementById("pholderInput");

var placeholderText = "default text";

inp.value = placeholderText;

inp.onfocus = function(e) {
    if (inp.value == placeholderText)
    {
        inp.value = "";
        inp.className = "focused";
    }
};

inp.onblur = function(e) {
    if (inp.value === "")
    {
        inp.value = placeholderText;
        inp.className = "placeholder";
    }
};

JSBin