占位符输入类型日期html5

Question

占位符不直接用于输入类型日期。

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

相反，它表明毫米/ DD/YYY

如何显示日期？

Answer 1

使用onfocus="(this.type='date')"，例如：

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

Answer 2

使用的onfocus和的onblur ......这是一个例子：

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

Answer 3

对角2，您可以使用此指令

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) { } 

} 

并像下面一样使用它。

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