How to remove the placeholder text of input[type="date"]?

Question

I have an input[type="date"] with min/max range. What I am trying to achieve is to hide the placeholder text displayed in any language as of dd/mm/yyyy. What have tried so far is adding the following CSS.

input[type="date"]:in-range::-webkit-datetime-edit-year-field, 
input[type="date"]:in-range::-webkit-datetime-edit-month-field, 
input[type="date"]:in-range::-webkit-datetime-edit-day-field {
    color: transparent;
}

But that doesn't produce the intended output, as I have a range validator on the element.

What trying to achieve is to have the dd/mm/yyyy hidden at all times, even on focus in/out, while at same time have the "value" entered visible at all times — Yazan, Aug 31 '20 at 07:45

score 3 · Answer 1 · answered Aug 30 '20 at 07:40

3

You could swap out placeholders using a ::before pseudo-element:

input[type="date"]::before {
  content: attr(placeholder);
  position: absolute;
  color: #999999;
}

input[type="date"] {
  color: #ffffff;
}

input[type="date"]:focus,
input[type="date"]:valid {
  color: #666666;
}

input[type="date"]:focus::before,
input[type="date"]:valid::before {
  content: "";
}

<input type="date" placeholder="Date" required>

answered Aug 30 '20 at 07:40

Daniel_Knights

7,940
4
21
49

Playing around with this a bit on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#try_it it seems only `input[type="date"] { color: #ffffff; } input[type="date"]:focus, input[type="date"]:valid { color: #666666; } ` is needed – rnstlr Sep 19 '22 at 16:01

Safwan Samsudeen · Answer 2 · 2020-08-31T03:04:24.530

1

The following works on Chrome. I am not sure about the other browsers. Safari doesn't seem to have an input of type date

const $input = $('input');
$input.on('input', function(){
    $input.addClass('focused')
});

input::-webkit-datetime-edit { 
    color: transparent;
    user-select: none;
}

.focused::-webkit-datetime-edit{ 
  color: #000; 
  user-select: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='Date' />

Check out this Stack Overflow post for more information

edited Aug 31 '20 at 03:04

answered Aug 30 '20 at 07:00

Safwan Samsudeen

1,645
1
10
25

tried adding the above to my css, but still the placeholder dd/mm/yyyy appears? isn't the dd/mm/yyyy considered a placeholder or is there another pseudo-element to allocate that display text?? – Yazan Aug 30 '20 at 07:17
this hides the placeholder correctly, but disallows selecting and inputting date, the date input doesn't show the selected values anymore and doesn't allow inputting data by keyboard – Yazan Aug 30 '20 at 07:30
You can now see it when you focus the `input`. – Safwan Samsudeen Aug 30 '20 at 07:56
nice, but what am trying to achieve, as a requirement, is to have the value field always visible, while not have the placeholder visible; non visible value on focus out doesn't satisfy the requirement of the application – Yazan Aug 30 '20 at 08:10
The latest edit hides the `dd/mm/yyyy`, but after focusing, it shows the value always. Hope that helps – Safwan Samsudeen Aug 30 '20 at 09:01
It uses jQuery but. – Safwan Samsudeen Aug 30 '20 at 09:01
JQuery is no issue, the issue is that will need the dd/mm/yyyy hidden at all times, both when focus is in/out – Yazan Aug 30 '20 at 09:31
not when focus is in, it still prints the dd/mm/yyyy – Yazan Aug 30 '20 at 09:43

score 0 · Answer 3 · answered Aug 30 '20 at 08:09

0

Placeholder?

input[type="date"]::before{
content: attr(placeholder);
position: absolute;
color: rgba(0,0,0,0);
}

input[type="date"]{color: rgba(0,0,0,1);}

answered Aug 30 '20 at 08:09

Woobie

95
7

How to remove the placeholder text of input[type="date"]?

3 Answers3

Related