显示输入类型日期的占位符文本

Question

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

date

和

datetime-local

。

<input type="date" placeholder="Date" />
<input type="datetime-local" placeholder="Date" />

该字段在桌面上显示 mm/dd/yyy，而在移动设备上则不显示任何内容。

如何显示 Date 占位符文本？

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"]::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" />

希望这有帮助

Answer 4

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

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

Answer 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">

Answer 6

对于 React，你可以这样做。

const onDateFocus = (e) => (e.target.type = "datetime-local");
const onDateBlur = (e) => (e.target.type = "text");
.
.
.
  <input
    onFocus={onDateFocus}
    onBlur={onDateBlur}
    type="text"
    placeholder="Event Date"
  />

Answer 7

我是这样做的：

   var dateInputs = document.querySelectorAll('input[type="date"]');

        dateInputs.forEach(function(input) {
            input.addEventListener('change', function() {
                input.classList.add('no-placeholder')
            });
        });

input[type="date"] {
    position: relative;
}

input[type="date"]:not(.has-value):before {
    position: absolute;
    left: 10px;
    top: 30%;
    color: gray;
    background: var(--primary-light);
    content: attr(placeholder);
}

.no-placeholder:before{
    content:''!important;
}

  <input type="date" name="my-date" id="my-date" placeholder="My Date">

Answer 8

现代浏览器使用 Shadow DOM 来方便输入日期和日期时间。因此，除非浏览器出于某种原因选择回退到

text

输入，否则不会显示占位符文本。您可以使用以下逻辑来适应这两种情况：

::-webkit-calendar-picker-indicator {
  @apply hidden; /* hide native picker icon */
}

input[type^='date']:not(:placeholder-shown) {
  @apply before:content-[attr(placeholder)];
  @apply sm:after:content-[attr(placeholder)] sm:before:hidden;
}

input[type^='date']::after,
input[type^='date']::before {
  @apply text-gray-500;
}

我使用了 Tailwind CSS 语法，因为它很容易理解。让我们一点一点地分解它：

::-webkit-calendar-picker-indicator {
  @apply hidden; /* hide native picker icon */
}

使用其 Shadow DOM 伪元素选择器隐藏本机选择器图标（通常是日历）。

input[type^='date']:not(:placeholder-shown) {
  @apply before:content-[attr(placeholder)];
  @apply sm:after:content-[attr(placeholder)] sm:before:hidden;
}

选择所有未显示占位符的

date

和

datetime-local

输入，并且：

• 默认使用

  placeholder

  伪元素显示输入

  ::before

  文本
• 在小屏幕及以上屏幕上切换为使用

  ::after

  伪元素

input[type^='date']::after,
input[type^='date']::before {
  @apply text-gray-500;
}

设置

::before

和

::after

伪元素的样式。