HTML: Show placeholder first in input type date

Question

Is it possible for me to show the placeholder in input first? Right now, I can see the placeholder when I click on the input box, but I want it so that when I load the page, the placeholder can already be read instantly.

Rather than mm/dd/yyyy, it should show birth date when page is loaded1

Thank you!

Did you try input type="text" placeholder="test" ?? – Naga Sai A Jun 11 '16 at 05:42 — Naga Sai A, Jun 11 '16 at 05:42

score 8 · Answer 1 · edited May 23 '17 at 12:00

8

<input placeholder="Your Date" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">

Read this Page

How do I simulate placeholder functionality on input date field?

edited May 23 '17 at 12:00

Community

1
1

answered Jun 11 '16 at 08:25

Mahendra Choudhary

81
5

Thank you! This is the answer I was looking for! – defrastriche Jun 12 '16 at 05:29
This is great, but the problem is when you leave the field and the dang date changes format from MM/DD/YYYY to YYYY-MM-DD. Any idea how to have the date stay in the former format once the control is changed back to type='text' ? – Scott Fraley Jun 14 '16 at 19:33
You can not change it but read this link it will be helpfull for you http://stackoverflow.com/questions/14647290/html-5-date-field-shows-as-mm-dd-yyyy-in-chrome-even-when-valid-date-is-set – Mahendra Choudhary Jun 15 '16 at 06:50

score 1 · Answer 2 · answered Jun 11 '16 at 05:50

1

        var dateofbirth="01/23/1990";
        document.getElementById('test').placeholder=dateofbirth;

codepen- http://codepen.io/nagasai/pen/OXMdvr

answered Jun 11 '16 at 05:50

Naga Sai A

10,771
1
21
40

filoscoder · Answer 3 · 2021-04-09T17:38:16.127

You can overlap input date default placeholder with :before element. It is necessary that the input element is controlled with onChange event

/* When Input type="date" && value="" => hide Input content */

input[type="date"][value=""] {
  position: relative;
  height: 100%;
  color: transparent;
  transition: all 0.2s;
}


/* When focus show it*/

input[type="date"]:focus {
  color: inherit;
}


/* Input type="date" && value="" => overlap with before */

input[type="date"][value=""]:before {
  content: attr(placeholder);
  position: absolute;
  height: 100%;
  width: calc(100% - 20px);
  padding-top: 4px;
  color: #aaa;
  background-color: white;
  transition: all 0.2s;
}


/* rid off before on focus */

input[type="date"]:focus:before {
  content: none;
}

<input type="date" placeholder="My placeholder" value="" />

score -1 · Answer 4 · answered Jun 11 '16 at 05:47

-1

http://www.htctu.net/html5/forms/formInputTypes.html#date Try this link.

<input type=date form="sf1" name="date" placeholder="23-7-1988">

answered Jun 11 '16 at 05:47

akshay.s.jagtap

35
5

HTML: Show placeholder first in input type date

4 Answers4