How do I simulate placeholder functionality on inp

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.

Answer 1

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

Answer 2

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

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

FIDDLE

Answer 3

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

Answer 4

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.

Answer 5

You can do something like this:

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

Answer 6

As i mentioned here

initially set the field type to text.

on focus change it to type date