2015-06-21 157 views
1

佔位符不直接用於輸入類型日期。佔位符輸入類型日期html5

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

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

如何顯示日期

+1

你可以用css來實現,只有aproach。嘗試此:http://stackoverflow.com/a/34385597/5701302 :) – Yuri

+0

@Elyor編輯:更改類型=「文本」以鍵入=「日期」 –

+0

可能重複的[不顯示佔位符輸入類型=「日期」字段](http://stackoverflow.com/questions/20321202/not-showing-placeholder-for-input-type-date-field) – Alex

回答

17

使用onfocus="(this.type='date')",例如:

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

爲什麼沒有upvote這個解決方案:) – sumit

4

使用的onfocus和的onblur ......這是一個例子:

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

對角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"> 
相關問題