输入类型日期html5的占位符

Posted 2023-03-05

【中文标题】输入类型日期html5的占位符

【英文标题】：placeholder for input type date html5

【发布时间】：2015-09-06 19:51:38

【问题描述】：

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

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

相反，它显示 mm/dd/yyy

如何显示日期？

【问题讨论】：

您可以通过仅使用 css 的方法来实现。试试这个：***.com/a/34385597/5701302 :)

@Elyor 编辑：将 type="text" 更改为 type="date"

Not showing placeholder for input type="date" field的可能重复

【参考方案1】：

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

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

【讨论】：

这在 safari mobile 中确实有问题

我为 Safari 所做的解决方法是添加 onmouseover="(this.type='date')"

【参考方案2】：

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

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

【讨论】：

几乎可以工作，除了初始加载它仍然有格式。但这已经很接近了。

【参考方案3】：

在这里，我尝试了 input 元素中的 data 属性。并使用 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" />

希望对你有帮助

【讨论】：

我可以看到它可以在 Chrome 上运行，但不能在 FF 上运行。可能是需要浏览器前缀

【参考方案4】：

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

此代码对我有用。只需您可以使用它

【参考方案5】：

对于angular 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">