0

Hi in the below code placeholder name was not displaying but it showing date format.But I want to display both.

Expected output:

Date Of Birth(mm/dd/yyyy)

html

<input type = "date" name="date_birth" pattern = "^\D{0,100}$" required = "required" class="login-input" placeholder="Date Of Birth" autofocus>
hsp care
  • 117
  • 1
  • 2
  • 12

2 Answers2

1

Add this to your css:

input[type="date"]:before {
    content: attr(placeholder);
    color: #aaa;
  }
  input
[type="date"]:focus:before,
input
[type="date"]:valid:before {
    content: "";
  }

Via- How do I simulate placeholder functionality on input date field?

Community
  • 1
  • 1
AndrewL64
  • 15,794
  • 8
  • 47
  • 79
1

Try This:

<input placeholder="Date Of Birth(mm/dd/yyyy)" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">

Demo Here

Note: It works on Chrome. Not Sure About other browsers.

Ganesh Salunkhe
  • 596
  • 1
  • 4
  • 18