Remove default text/placeholder present in html5 input element of type=date

Question

I am using html input element with type as date,

<input type="date">

When I use above element it creates a default date format i.e. mm/dd/yyyy text within that input element. How do I remove this default text?

I tried adding below style on my page but it is hiding the selected date value as well,

input[type=date]::-webkit-datetime-edit-text {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-month-field{
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-day-field {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-year-field {
    -webkit-appearance: none;
    display: none;
}

Are you only targeting Webkit/Blink user agents? Neither Gecko nor Trident support the date input type at the moment. — Tieson T., Feb 24 '15 at 00:46
@TiesonT. thanks for your response; I just noticed that Trident and Gecko are not supporting this. However I am trying to run it on Blink(Chrome) at the moment. Any suggestions ? — Sreekanth, Feb 24 '15 at 00:51
I have answered this here (get rid of 'mm/dd/yyyy') : https://stackoverflow.com/a/76764124/7233526 — Mohammed_Moulla, Jul 26 '23 at 01:41

score 25 · Accepted Answer · answered Feb 24 '15 at 00:58

25

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
    color: transparent;
}

answered Feb 24 '15 at 00:58

Steffi A.

825
1
14
15

1

@Steffi A. Thank you.. Your suggestions works perfect! – Sreekanth Feb 24 '15 at 17:07
22

Or another answer `` – Hai Nguyen Apr 25 '16 at 20:19
10

Does not work in chrome 51.0.2704.103, Mac OS El Capitan. http://take.ms/P7SSK any ideas? – Roman Nazarkin Jul 05 '16 at 15:14
1

Does not work in chrome 60.0.3112.113, Win 10 pro either. Seems like this selectors got changed or removed. – Fabian S. Sep 08 '17 at 07:24
6

@FabianSchöner Correct, Chrome no longer supports any kind of additional selector on pseudo-elements. In case your date element is not restricted (no min/max), you could use: ```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, input[type="date"]:in-range::-webkit-datetime-edit-text { color: transparent; }``` – Steffi A. Sep 11 '17 at 21:38
@HaiNguyen please post this as a separate answer – fubo Mar 22 '21 at 11:02
@Steffi A. What can we use if we have min/max values. Please help me Sir. – Sarah Sarena Mar 23 '21 at 13:36
Is there a way to get the answer from @SteffiA. to work on disabled input fields where input[type="date"]. I have also found that changing the color to transparent still leaves the padding for the placeholder. You can always set display: none if you don't want that extra padding in your input field. – Bradley Marques Oct 29 '21 at 22:04
Actually never set it to display none. Because then you won't be able to see yourself typing in the dates which is a bad user experience. – Bradley Marques Oct 29 '21 at 22:49

score 22 · Answer 2 · edited Dec 05 '17 at 13:37

22

Possible option

HTML:

<input type='date' required>

CSS:

input[type=date]:required:invalid::-webkit-datetime-edit {
    color: transparent;
}
input[type=date]:focus::-webkit-datetime-edit {
    color: black !important;
}

edited Dec 05 '17 at 13:37

Massimiliano Kraus

3,638
5
27
47

answered Mar 21 '17 at 23:01

Kenneth

321
2
4

by any chance can two selectors work together? leg. if required is invalid and field is disabled apply transparent. – Veer3383 May 03 '18 at 06:47

score 13 · Answer 3 · edited Dec 11 '18 at 06:25

13

The accepted answer doesn't seem to work anymore on latest chrome versions. Tested it on Version 50.0.2661.102 and didn't work.

Works by adding this instead:

.mdl-textfield:not(.is-dirty) input::-webkit-datetime-edit {
     color: transparent; 
}

input:focus::-webkit-datetime-edit {
    color: rgba(255, 255, 255, .46) !important; 
}

Working sample

Source

edited Dec 11 '18 at 06:25

Loapu

3
4

answered Jul 07 '16 at 10:12

Robin Carlo Catacutan

13,249
11
52
85

21

this seems to make the value disappear even when set (chrome 54) – Kris White Dec 08 '16 at 16:07
1

This answer does work in chrome 60.0.3112.113 on win 10 pro, but it doesnt only remove the default value but also makes a set, valid value disappear on blur. – Fabian S. Sep 08 '17 at 07:26
by any chance can two selectors work together? eg. if required is invalid and field is disabled apply transparent. – Veer3383 May 03 '18 at 06:48
2

makes the value disappear also – DonMB Aug 16 '18 at 12:09

score 5 · Answer 4 · answered Sep 16 '21 at 06:46

5

For Chrome

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,input[type='date']:in-range::-webkit-datetime-edit-text{  color: transparent;}

answered Sep 16 '21 at 06:46

Dev Asit

113
1
5

2

Welcome to Stack Overflow! Your answer might be more helpful to others if you explained how/why it works, and/or why this solution is better than the existing answers that have already been here for a while :) – Sep 16 '21 at 13:49

score 3 · Answer 5 · answered Jun 02 '19 at 01:11

3

This works in chrome and doesn't make the value dissapear when set (Version 74)

input[value=""]::-webkit-datetime-edit{ color: transparent; }
input:focus::-webkit-datetime-edit{ color: #000; }

answered Jun 02 '19 at 01:11

user1626664

313
1
6

score 3 · Answer 6 · answered Jul 30 '19 at 15:17

3

<input name="date" type="text" onfocus="(this.type='date')" onblur="if(!this.value)this.type='text'">

Thank to Hai Nguyen.

answered Jul 30 '19 at 15:17

alitrun

1,127
8
14

This should never be done, as it will wrongly report the type of the input to assistive technology. It will mess up with input autocompletion. – Steve Dodier-Lazaro Jul 25 '23 at 07:12

score 3 · Answer 7 · answered Feb 18 '22 at 22:36

3

To sum the previous, I think the simplest, most general and reliable css suggestion could look as follows:
input[value=""]:not(:focus) { color: transparent; }
Works fine for me in Opera 83 and Chrome 98. Just wondering why no one brought this here before.

answered Feb 18 '22 at 22:36

Vladimir Kovarsky

71
3

Works in Edge too! Thanks! – VorTechS Mar 07 '23 at 11:40
Doesn't work for me in Chrome 110 – Hans Mar 10 '23 at 20:18

score 2 · Answer 8 · answered Feb 28 '19 at 03:42

2

This should be transparent only when value is not set.

input[value="0000-00-00"]::-webkit-datetime-edit {
     color: transparent; 
}

answered Feb 28 '19 at 03:42

Radin Reth

847
8
7

score 2 · Answer 9 · answered Apr 16 '19 at 14:04

This works for me in chrome as of Version 73.0.3683.103

::-webkit-datetime-edit { color: transparent; }
:focus::-webkit-datetime-edit { color: #000; }

I couldn't figure it out for Edge though so i changed it to this

input[type=date] { color: transparent !important; } 
.active input[type=date] { color: inherit !important; }

this may not be good for some of you but i was adding the class of active anyway as my labels hover of the input field until clicked and then i move them up out the way. Hence why i needed to not display the date placeholder while the label was over the input

score 1 · Answer 10 · answered Nov 19 '19 at 14:32

1

this worked fine for me:

input[type=date]::-webkit-inner-spin-button,
  input[type=date]::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }

  input[type=date] {
    -moz-appearance: textfield;
  }

answered Nov 19 '19 at 14:32

Abshir

11
4

1

For me none of these has made the placeholder disappear in Chrome 79.0 and Firefox 72.0 – neiya Jan 28 '20 at 09:29

score 1 · Answer 11 · answered Aug 18 '20 at 12:51

1

I had similar problem with datetime-local, this worked for me, maybe someone can use it. Text input is much easier than datetime to style

type='text' required='' onfocus="this.type='datetime-local'" onblur="if(this.value==='')this.type='text'"

answered Aug 18 '20 at 12:51

Антон Лебедев

21
2

score 1 · Answer 12 · answered Nov 30 '21 at 21:50

If you just want to hide the icon placeholder only (for using your own icons), this is enough for inputs of type="date" and type="time" in Edge, Chrome and Firefox:

::-webkit-calendar-picker-indicator {
   opacity: 0;
   cursor: pointer; /* optional */
}

score 1 · Answer 13 · answered Mar 10 '23 at 20:22

In Chrome 110 I ended up using:

/* remove default browser placeholder when not focused */
input[type='date']:not(:focus):in-range::-webkit-datetime-edit-year-field,
  input[type='date']:not(:focus):in-range::-webkit-datetime-edit-month-field,
  input[type='date']:not(:focus):in-range::-webkit-datetime-edit-day-field,
  input[type='date']:not(:focus):in-range::-webkit-datetime-edit-text {
    color: transparent;
  }

/* iOS background fix */
  & > input[type='date']:empty {
    background-color: #f9f9f6;
  }

  /* iOS fix for text alignment */
  & > input::-webkit-date-and-time-value {
    text-align: left;
    color: var(--sg-black);
  }

  /* iOS date-placeholder fix */
  & > input[type='date']:not(:focus):empty:after {
    position: absolute;
    color: #aaa;
    content: attr(placeholder);
  }
}

In addition to that, I'm removing the placeholder when a value is set:

<input
  type='date'
  placeholder='Choose date'
  ref={dateInputRef}
  onChange={() => {
    if (!dateInputRef.current) return;
    if (dateInputRef.current.value) {
      dateInputRef.current.placeholder = '';
    } else {
      dateInputRef.current.placeholder = 'Choose date';
    }
  }}
/>;

Finally, a solution that works! I just needed it for desktop so I just needed the first block of css. Hides the placeholder when not in focus. Shows the placeholder when the control has the focus. Shows the date when a valid date is entered. Brilliant! — Dennis Jones, Apr 19 '23 at 13:36

score 0 · Answer 14 · answered Jan 13 '22 at 08:40

This may be late but this worked for me.

document.addEventListener('focusin',function(e){
  e.target.type = 'date';
});

document.addEventListener('focusout',function(e){
  e.target.type = '';
});

<input class="my-date" placeholder="Select Appointment Date"/>

score 0 · Answer 15 · answered Jan 16 '23 at 12:33

I encountered a similar issue and solved it by adding a separate class to keep track of the state. Tried various solutions here and in other places and none seemed to solve the issue. So set the field opacity as 0 by default, and then use event listener for input event, if there is input, add the class has-text, and then style that text.

score 0 · Answer 16 · answered Mar 07 '23 at 11:58

Facing a similar issue to this, I opted for a variance on the answer supplied by @Vladimir Kovarsky

Specifically I wanted to retain the control at a class level, given the class might be manipulated at run-time:

input[class~="empty-date"]:not(:focus) {
    color: transparent;
}

The above assumes I have an input with a class of 'empty-date' applied, e.g.

<div class="col"><input type="date" class="empty-date form-control"></div>

or

<div class="col"><input type="date" class="form-control empty-date"/></div>

The key being the usage of '~=' (contains).

score -1 · Answer 17 · edited Dec 05 '17 at 13:36

Actually you can take advantage of the default placeholder generated by Chrome by using the following code. This code also works with dates fetched from the database:

<div class="Input">
    <script>
        function getDate() {
            var GET_DATE = document.getElementById("ThisElement").value="<?php echo $GetDateFromMySQL = date('d/m/Y', strtotime($row_FetchedResults["MySQLColumnName"]));?>";
            return  GET_DATE;
        }
    </script>

    <input class="form-control"
           style=" text-align: left; border: none;" 
           onfocus="(this.type='date')"  
           onblur="
               if(this.value===''){
                   this.type='text';
                   this.value='';
                   this.value= getDate();
               }
               else{
                   this.value;
               }"                       
           id="ThisElement"  
           type = "text" 
           value = "<?php echo $GetDateFromMySQL = date('d/m/Y', strtotime($row_ActiveStudents["ChaseUpDate"]));?>"                
     />

Saif · Answer 18 · 2022-01-25T16:21:01.977

-1

this is worked for me

var input = document.querySelectorAll(".date-input");

input.forEach(function(e){
  e.addEventListener("focusin",function(ev){
    e.type = 'date';
  })
});
input.forEach(function(e){
  e.addEventListener("focusout",function(ev){
    e.type = 'text';
  })
});

edited Jan 25 '22 at 16:21

answered Jan 23 '22 at 08:15

Saif

9
4

Remove default text/placeholder present in html5 input element of type=date

18 Answers18

This should be transparent only when value is not set.

Linked

Related