Placeholder for html5 date input type

Question

placeholder does not work directly for input type dates.

<input required="" type="text" class="form-control" placeholder="Date"/> 

instead it shows mm / dd / yyy

How to show the date?

Answer 1

use onfocus="(this.type='date')" , for example:

 <input required="" type="text" class="form-control" placeholder="Date" onfocus="(this.type='date')"/> 

Answer 2

use onfocus and onblur ... Here is an example:

 <input type="text" placeholder="Birth Date" onfocus="(this.type='date')" onblur="if(this.value==''){this.type='text'}"> 

Answer 3

Here I tried the data attribute on the input element. and applied the required placeholder using CSS

 <input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" /> 

  input[type="date"]::before { content: attr(data-placeholder); width: 100%; } /* hide our custom/fake placeholder text when in focus to show the default * 'mm/dd/yyyy' value and when valid to show the users' date of birth value. */ input[type="date"]:focus::before, input[type="date"]:valid::before { display: none } 

 <input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" /> 

Hope this helps

Answer 4

For angular 2, you can use this directive

 import {Directive, ElementRef, HostListener} from '@angular/core'; @Directive({ selector: '[appDateClick]' }) export class DateClickDirective { @HostListener('focus') onMouseFocus() { this.el.nativeElement.type = 'date'; setTimeout(()=>{this.el.nativeElement.click()},2); } @HostListener('blur') onMouseBlur() { if(this.el.nativeElement.value == ""){ this.el.nativeElement.type = 'text'; } } constructor(private el:ElementRef) { } } 

and use it as shown below.

  <input appDateClick name="targetDate" placeholder="buton name" type="text"> 

Answer 5

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

This code works for me. You can just use it.