输入类型日期html5的占位符

Question

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

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

相反,它显示mm/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

在这里，我尝试data了input元素中的属性。并使用 CSS 应用所需的占位符

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

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

希望这可以帮助

Answer 4

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

这段代码对我有用。只需你可以使用这个