0

So basically what I want to do is make it so the default placeholder of an input type of date is hidden or transparent when the page is being printed. The trick is that it should still display a valid date when a user inputs one.

There are several things I have already tried, however they are either outdated and do not work with current versions of Chrome or also hide a valid date as well.

I've tried this one (Robin's answer): Remove default text/placeholder present in html5 input element of type=date

But it hides valid dates when using it inside:

@media print {}

I would like for this placeholder to be missing when printing so that if I wanted to print an empty form, the mm/dd/yyyy won't be in the way. For now I have to temporarily make it transparent if I need to print one off.

Is this possible at all in? Also wondering about changing the placeholder's color to be gray like text input placeholders, but change to black upon entering a valid date.

Thanks.

Community
  • 1
  • 1
nev
  • 11
  • 3
  • Have you had a look at this? http://stackoverflow.com/questions/16493360/removing-input-placeholder-on-a-printable-version-of-an-html-page – h-rai Sep 27 '16 at 01:03

2 Answers2

0
@media print {
  ::-webkit-input-placeholder { 
      color: transparent;
  }
  :-moz-placeholder { 
      color: transparent;
  }
  ::-moz-placeholder { 
      color: transparent;
  }
  :-ms-input-placeholder { 
      color: transparent;
  }
}
BritishSam
  • 1,070
  • 8
  • 24
0

It's a pure workaround, but I had the same issue and this was the simplest route:

function RemoveClass(el, target_class) {
  el.classList.remove(target_class);
}
.test {
    color: rgba(0,0,0,0);
  }
<input type="date" class="test" onclick="RemoveClass(this,'test');">
SaintFrag
  • 127
  • 1
  • 13