How do I simulate placeholder functionality on input date field?

Question

It's impossible to use placeholder on date fields but I really need it.

I want two date inputs with texts "From" and "To" on each one as placeholders.

Set ad efault value that disappears `onfocus` and reappears `onblur` ? — Jeff Noel, Aug 09 '13 at 12:12
When you simulate placeholder behavior in incompatible browsers, be mindful of how that will affect your validation. — chris.nesbit1, Aug 09 '13 at 12:16

score 99 · Accepted Answer · edited Apr 24 '15 at 19:49

99

I'm using the following CSS only trick:

  input[type="date"]:before {
    content: attr(placeholder) !important;
    color: #aaa;
    margin-right: 0.5em;
  }
  input[type="date"]:focus:before,
  input[type="date"]:valid:before {
    content: "";
  }

<input type="date" placeholder="Choose a Date" />

edited Apr 24 '15 at 19:49

Kyle Trauberman

25,414
13
85
121

answered Feb 24 '14 at 21:07

Roman

13,100
2
47
63

32

Unfortunately, this seems to show up as "placeholdermm/dd/yyyy" in Chrome. – goldins May 01 '14 at 19:54
1

Yep. Works only on iOS and Chrome on Android. It's a hack :) – Roman May 01 '14 at 21:18
1

Add `margin-right: 0.5em;` to the first declaration, to create a nice separation between the placeholder and the input. You can also change the first line to: `content: attr(placeholder)':';`, to add a colon between the placeholder and input. – Fateh Khalsa Feb 18 '15 at 23:20
3

You would only have to add `!important` after the :focus and :valid content attribute because otherwise it gets overriden. Otherwise, nice hack :) – Mihail Minkov Mar 04 '16 at 17:23
On iOS 9 you don't even need the `input[type="date"]:focus:before, input[type="date"]:valid:before` part. – Rockallite Aug 19 '16 at 02:53
Works on chrome now. – Mo Beigi Sep 05 '16 at 12:26
1

I will also say that in addition to needing the `!important` in the :focus and :valid rules, in order for `:valid:before` to even fire I've found that your input also needs the `required` attribute – Jason Tolliver May 03 '17 at 21:16
4

Does not work for me, Chrome 70 - I still have this : "placeholdermm/dd/yyyy" – schankam Oct 22 '18 at 05:02
you have to make the date field as required to make this work. – Kishore Relangi Dec 12 '18 at 05:19
If you want the `mm/dd/yyyy` to go away just add `width: 100` to the `:before` – Phreak Nation Oct 09 '19 at 01:10

Abdo-Host · Answer 2 · 2019-03-05T11:55:49.660

35

use this input attribute events

onfocus="(this.type='date')" onblur="(this.type='text')"

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container mt-3">
  <label for="date">Date : </label>
  <input placeholder="Your Date" class="form-control" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">
</div>

edited Mar 05 '19 at 11:55

answered Jan 02 '16 at 11:51

Abdo-Host

2,470
34
33

7

It works, but you need to double-click the field to see the calendar. – Patterson Sep 12 '19 at 14:02
This does not work in ios 14 - it pops up the keyboard instead of a date chooser, but the input turns to a date field so you do not see the text you are typing. – pathfinder Mar 27 '21 at 16:15
how did you get the double-click to go away ? @Patterson – karinapichardo Apr 14 '21 at 18:25

score 15 · Answer 3 · edited Dec 21 '20 at 11:10

15

You can use CSS's before pseudo.

.dateclass {
  width: 100%;
}

.dateclass.placeholderclass::before {
  width: 100%;
  content: attr(placeholder);
}

.dateclass.placeholderclass:hover::before {
  width: 0%;
  content: "";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<input
  type="date"
  placeholder="Please specify a date"
  onClick="$(this).removeClass('placeholderclass')"
  class="dateclass placeholderclass">

FIDDLE

edited Dec 21 '20 at 11:10

Gleb Kemarsky

10,160
7
43
68

answered Feb 25 '14 at 16:26

Abdullah Gheith

521
6
19

1

Like the other similar answer, doesn't work in Firefox. – Sam Rueby Dec 19 '19 at 15:46

score 14 · Answer 4 · answered Dec 08 '15 at 00:38

14

You can do something like this:

<input onfocus="(this.type='date')" class="js-form-control" placeholder="Enter Date">

answered Dec 08 '15 at 00:38

Oday Hazeem

405
4
7

score 5 · Answer 5 · answered Nov 27 '13 at 20:20

5

The HTML5 date input field actually does not support the attribute for placeholder. It will always be ignored by the browser, at least as per the current spec.

As noted here

answered Nov 27 '13 at 20:20

Xenology

2,357
2
21
39

felixmosh · Answer 6 · 2019-11-11T22:19:10.800

5

I'm using this css method in order to simulate placeholder on the input date.

The only thing that need js is to setAttribute of the value, if using React, it works out of the box.

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

input[type="date"]:before {
  content: attr(placeholder);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  color: rgba(0, 0, 0, 0.65);
  pointer-events: none;
  line-height: 1.5;
  padding: 0 0.5rem;
}

input[type="date"]:focus:before,
input[type="date"]:not([value=""]):before
{
  display: none;
}

<input type="date" placeholder="Choose date" value="" onChange="this.setAttribute('value', this.value)" />

edited Nov 11 '19 at 22:19

answered Jul 15 '19 at 14:54

felixmosh

32,615
9
69
88

This one actually works on IOs (Chrome, Firefox, etc.), where most other options do not. – Jarom Nov 11 '19 at 18:58
Does not work in Firefox (Windows 11). The before element is not rendered. – levi Apr 22 '22 at 23:16

score 4 · Answer 7 · edited Dec 12 '22 at 03:02

The input[type="date"] DOMElement only takes the following value: YYYY-MM-DD, any other format or text with be skipped.

var element = document.querySelectorAll('[placeholder]');

for (var i in element) {
  if (element[i].nodeType == 1 && element[i].nodeName == "INPUT") {

    element[i].value = element[i].getAttribute('placeholder');
    element[i].style.color = "#777";

    element[i].onfocus = function(event) {
      if (this.value == this.getAttribute('placeholder')) {
        this.value = "";
        this.style.color = "#000"
      };
    };
    element[i].onblur = function(event) {
      if (this.value == "") {
        this.value = this.getAttribute('placeholder');
        this.style.color = "#777";
      }
    };
  }
}

<input type="text" placeholder="bingo" />
<input type="date" placeholder="2013-01-25" />

In this exact case, with 2 input elements, Pure JavaScript is ~40% ± 10% faster. With 32 input elements, the difference remains the same (~43% ± 10% faster for Pure JS).

Yeza · Answer 8 · 2020-08-30T17:11:55.017

2

Got the most easiest hack for this problem-use this syntax in your HTML-input-tag

      <input type="text" id="my_element_id" placeholder="select a date" name="my_element_name" onfocus="(this.type='date')" />
      </div>

edited Aug 30 '20 at 17:11

answered Aug 30 '20 at 17:06

Yeza

21
2

score 0 · Answer 9 · answered Aug 09 '13 at 12:18

Try this:

Add a placeholder attribute to your field with the value you want, then add this jQuery:

$('[placeholder]').each(function(){
    $(this).val($(this).attr('placeholder'));
  }).focus(function(){
    if ($(this).val() == $(this).attr('placeholder')) { $(this).val(''); }
  }).blur(function(){
    if ($(this).val() == '') { $(this).val($(this).attr('placeholder')); }
  });

I've not tested it for fields that can't take placeholders but you shouldn't need to change anything in the code at all.

On another note, this code is also a great solution for browsers that don't support the placeholder attribute.

score 0 · Answer 10 · edited May 23 '17 at 12:18

As mentionned here, I've made it work with some ":before" pseudo-class and a small bit of javascript. Here is the idea :

 #myInput:before{ content:"Date of birth"; width:100%; color:#AAA; } 
 #myInput:focus:before,
 #myInput.not_empty:before{ content:none }

Then in javascript, add the "not_empty" class depending on the value in the onChange and onKeyUp events.

You can even add all of this dynamically on every date fields. Check my answer on the other thread for the code.

It's not perfect but it's working well in Chrome and iOS7 webviews. Maybe it could help you.

score 0 · Answer 11 · edited May 23 '17 at 12:26

0

As i mentioned here

initially set the field type to text.

on focus change it to type date

edited May 23 '17 at 12:26

Community

1
1

answered Feb 11 '14 at 15:44

sidarcy

2,958
2
36
37

score 0 · Answer 12 · answered Dec 12 '22 at 06:18

just use it :

    var elementDate = $('input[type="date"]');
    $.each(elementDate, (key, value) => {
        if (!$(value).val()) {
            $(value).css("color", "#777");

        }

        $(value).on("focus", function (event) {
            $(this).css("color", "#000");
        });

        $(value).on("blur", function (event) {
            if (!$(this).val()) {
                $(this).css("color", "#777");
            }
        });
    });

score -1 · Answer 13 · answered Oct 29 '16 at 09:33

Ok, so this is what I have done:

$(document).on('change','#birthday',function(){
    if($('#birthday').val()!==''){
        $('#birthday').addClass('hasValue');
    }else{
        $('#birthday').removeClass('hasValue');
    }
})

This is to remove the placeholder when a value is given.

input[type="date"]:before {
  content: attr(placeholder) !important;
  color: #5C5C5C;
  margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"].hasValue:before {
  content: "" !important;
  margin-right: 0;
}

On focus or if .hasValue, remove the placeholder and its margin.

score -1 · Answer 14 · answered Sep 18 '18 at 06:42

Using a jQuery (sure you can achieve this with Vanilla. This make sure the date format still the same.

$(function() {
  $('.sdate').on('focus', function() {
    $(this).attr('type', 'date');
  });
  $('.sdate').on('blur', function() {
    if(!$(this).val()) { // important
      $(this).attr('type', 'text');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input type="text" class="sdate" placeholder="From">

This will not be supported in all browsers – Ganesh Babu Oct 06 '18 at 03:17 — Ganesh Babu, Oct 06 '18 at 03:17

score -3 · Answer 15 · answered Mar 02 '16 at 05:58

CSS

input[type="date"] {position: relative;}
input[type="date"]:before {
 position: absolute;left: 0px;top: 0px;
 content: "Enter DOB";
 color: #999;
 width: 100%;line-height: 32px;
}
input[type="date"]:valid:before {display: none;}

<input type="date" required />

How do I simulate placeholder functionality on input date field?

15 Answers15

Linked

Related