Html 输入类型日期 html5 的占位符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30961704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
placeholder for input type date html5
提问by Elyor
placeholder does not work for input type date directly.
占位符不适用于直接输入类型日期。
<input required="" type="text" class="form-control" placeholder="Date"/>
instead, it shows mm/dd/yyy
相反，它显示mm/dd/yyy
how to show Date?
如何显示日期？
回答by Elyor
use onfocus="(this.type='date')", example:
使用onfocus="(this.type='date')"，例如：
<input required="" type="text" class="form-control" placeholder="Date" onfocus="(this.type='date')"/>
回答by Leandro Da Silva
use onfocus and onblur... Here it's an example:
使用 onfocus 和 onblur ... 这是一个例子：
<input type="text" placeholder="Birth Date" onfocus="(this.type='date')" onblur="if(this.value==''){this.type='text'}">
回答by Rohan Khude
Here, I have tried dataattribute in inputelement. and applied required placeholder using CSS
在这里，我尝试data了input元素中的属性。并使用 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
希望这可以帮助
回答by Ajinz
<input type="text" placeholder="*To Date" onfocus="(this.type='date')" onblur="(this.type='text')" >
This code works for me. Simply you can use this
这段代码对我有用。只需你可以使用这个
回答by Dhafer.Dhib
For angular 2,You can use this directive
对于角度 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) { }
}
and use it like below.
并像下面一样使用它。
<input appDateClick name="targetDate" placeholder="buton name" type="text">
