HTML5 date type missing placeholder hack

Question

Placeholder="date" can be used in type="date" input, so I found this snippet

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">

But in my android phone, you have to tap twice to trigger the field. Is there another snippet I should use to display placeholder for date type field?

I guess you need a better workaround... Also, what is not clear in the original date? Why need a placeholder there? — Patrick Hofman, Jan 02 '15 at 15:43
@PatrickHofman what if I do not want to use any label? I want my label to be within my input as placeholder. — Aaron Swartz, Jan 02 '15 at 15:47
You can achieve that with a css only approach. Try this: http://stackoverflow.com/a/34385597/5701302 :) — Yuri, Dec 21 '15 at 21:15

score 0 · Accepted Answer · answered Jan 02 '15 at 16:00

Hide other element under date input. Demo fiddle

HTML:

<div>
    <input class="textbox-n" type="date" id="date" onblur="window.setValue(this.value)" />
    <input class="placeholder" id="placeholder" value="Date" type="text" />
</div>

CSS:

div {
    position: relative;
}
input {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
}
input[type=date], input[type=date]:focus {
    z-index: 1;
    color: transparent;
    background: transparent;
    border: none;
}
input[type=date]:focus {
    z-index: 1;
    color: black;
}
input[type=date]:focus + .placeholder {
    display: none;
}

JavaScript:

window.setValue = function (val) {
    document.querySelector('#placeholder').value = val;
}

I want to use datetime-local instead of date, how can do formatting when the js prefill my input? — Aaron Swartz, Jan 03 '15 at 01:01

HTML5 date type missing placeholder hack

1 Answers1