Show placeholder text for input type date

Question

Placeholder does not work for input type date and datetime-local directly.

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

Instead the field shows mm/dd/yyy on desktop and nothing on mobile.

How can I show the Date placeholder text?

Pattison

You can achieve that with a css only aproach. Try this: https://mcmap.net/q/143116/-not-showing-placeholder-for-input-type-quot-date-quot-field :) – Accumulative

Possible duplicate of Not showing placeholder for input type="date" field – Cressy

Answer 1

use onfocus="(this.type='date')", example:

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

Pattison

This is really glitchy in safari mobile – Myrmecology

What I did as a workaround for Safari was add onmouseover="(this.type='date')" – Egin

Doesn't work on Chromium android either. – Unclasp

Yes but then you'll get a Content-Security-Policy error for using inline scripts. – Rotow

Please note that if it is not working, don't forget to update type=“text” to your code.” – Feaze

Answer 2

use onfocus and onblur... Here it's an example:

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

Largescale

almost works, except initial load it still has format. But this is close. – Lambert

Answer 3

Here, I have tried data attribute in input element. and applied required placeholder using 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

Livia

I can see that its working on Chrome, but not in FF. May be it needs the browser prefixs – Eozoic

Inability to style pseudo-elements I would consider to be a bug in Firefox. – Unclasp

This still doesn't work in desktop Firefox 109.0.1. – Dhaulagiri

Firefox is correct: w3.org/TR/CSS21/generate.html#before-after-content Pseudo-elements on input[type=text] do not work. – Roundlet

Answer 4

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

This code works for me. Simply you can use this

Attendant

You repeated the same browser hack Leandro provided two and a half years earlier. – Unclasp

Answer 5

For angular 2,You can use this directive

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

Nedranedrah

Answer 6

For React, you can do this.

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

Vaishnava

Answer 7

Here is how i did it:

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

Bors

Answer 8

Modern browsers use a Shadow DOM to facilitate input of dates and datetimes. As a result, placeholder text is not shown unless the browser chooses to fallback to a text input for whatever reason. You can accommodate both scenarios with the following logic:

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

I've used Tailwind CSS syntax because it's easy to grok. Let's break it down piece by piece:

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

Hide native picker icon (generally a calendar) using its Shadow DOM pseudo-element selector.

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

Select all date and datetime-local inputs where placeholder is not shown and:

• Show the input placeholder text using the ::before pseudo-element by default
• On small screens and above switch to using the ::after pseudo-element instead

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

Style the ::before and ::after pseudo-elements.

Unclasp

Not a tailwind question. – Dhaulagiri