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

Question

在 date 和 datetime-local 的输入类型中，占位符不能直接使用。

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

在桌面端显示mm/dd/yyyy，而在移动端则不显示任何内容。

如何显示日期的占位符文本？

- Elyor

---

你可以通过纯CSS的方法实现这个。试试这个：https://dev59.com/SGIj5IYBdhLWcg3wYkNY#34385597 :) - Yuri

可能是重复的问题：不显示输入类型为“date”的字段占位符 - Alex

Answer 1

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

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

- Elyor

---

在Safari移动版中，这个东西真的很卡。 - dacastro4

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

在Chromium Android上也不起作用。 - vhs

是的，但是你会因为使用内联脚本而收到一个 Content-Security-Policy 错误。 - Yasmin AM

请注意，如果不起作用，请不要忘记将type="text"更新到您的代码中。 - Jos

Answer 2

使用onfocus和onblur...这里是一个例子:

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

- Leandro Da Silva

---

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

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

希望这可以帮助到您。

- Rohan Khude

---

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

无法为伪元素设置样式在火狐浏览器中我认为是一个bug。 - vhs

这在桌面版Firefox 109.0.1中仍然无法工作。 - 425nesp

Firefox是正确的：https://www.w3.org/TR/CSS21/generate.html#before-after-content 在input[type=text]上伪元素不起作用。 - xong

Answer 4

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

这段代码对我很有效。你可以直接使用它。

- Ajinz

---

你重复了两年半前Leandro提供的相同浏览器黑客攻击。 - vhs

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

- Dhafer.Dhib

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

- Adrian Bartholomew

Answer 7

现代浏览器使用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输入，并执行以下操作：

• 默认情况下，使用::before伪元素显示输入placeholder文本
• 在小屏幕及以上的设备上，改用::after伪元素

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

为 ::before 和 ::after 伪元素添加样式。

- vhs

---

不是关于Tailwind的问题。 - 425nesp