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.
– Tieson T., Commented Feb 24, 2015 at 0: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
– Sreekanth, Commented Feb 24, 2015 at 0:51
I have answered this here (get rid of 'mm/dd/yyyy') : stackoverflow.com/a/76764124/7233526 — Mohammed_Moulla
– Mohammed_Moulla, Commented Jul 26, 2023 at 1:41

Steffi A. · Accepted Answer · 2015-02-24 00:58:29Z

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, 2015 at 0:58

Steffi A.

8251 gold badge14 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Sreekanth Over a year ago

@Steffi A. Thank you.. Your suggestions works perfect!

Hai Nguyen Over a year ago

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

Roman Nazarkin Over a year ago

Does not work in chrome 51.0.2704.103, Mac OS El Capitan. take.ms/P7SSK any ideas?

Fabian S. Over a year ago

Does not work in chrome 60.0.3112.113, Win 10 pro either. Seems like this selectors got changed or removed.

Steffi A. Over a year ago

@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; }

|

Massimiliano Kraus · Accepted Answer · 2017-12-05 13:37:03Z

25

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 5, 2017 at 13:37

Massimiliano Kraus

3,8925 gold badges32 silver badges51 bronze badges

answered Mar 21, 2017 at 23:01

Kenneth

3513 silver badges4 bronze badges

1 Comment

Veer3383 Over a year ago

by any chance can two selectors work together? leg. if required is invalid and field is disabled apply transparent.

Loapu · Accepted Answer · 2018-12-11 06:25:46Z

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, 2018 at 6:25

Loapu

34 bronze badges

answered Jul 7, 2016 at 10:12

Kamina

13.8k12 gold badges55 silver badges87 bronze badges

4 Comments

Kris White Over a year ago

this seems to make the value disappear even when set (chrome 54)

Fabian S. Over a year ago

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.

Veer3383 Over a year ago

by any chance can two selectors work together? eg. if required is invalid and field is disabled apply transparent.

DonMB Over a year ago

makes the value disappear also

Dev Asit · Accepted Answer · 2021-09-16 06:46:21Z

7

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, 2021 at 6:46

Dev Asit

1331 silver badge5 bronze badges

1 Comment

user14518353 Over a year ago

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 :)

Vladimir Kovarsky · Accepted Answer · 2022-02-18 22:36:34Z

6

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, 2022 at 22:36

Vladimir Kovarsky

1111 silver badge5 bronze badges

1 Comment

Hans Over a year ago

Doesn't work for me in Chrome 110

user1626664 · Accepted Answer · 2019-06-02 01:11:27Z

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 2, 2019 at 1:11

user1626664

3131 silver badge6 bronze badges

Comments

alitrun · Accepted Answer · 2019-07-30 15:17:44Z

3

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

Thank to Hai Nguyen.

answered Jul 30, 2019 at 15:17

alitrun

1,24812 silver badges15 bronze badges

1 Comment

Steve Dodier-Lazaro Over a year ago

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.

Radin Reth · Accepted Answer · 2019-02-28 03:42:27Z

2

This should be transparent only when value is not set.

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

answered Feb 28, 2019 at 3:42

Radin Reth

8671 gold badge8 silver badges7 bronze badges

Comments

andy · Accepted Answer · 2019-04-16 14:04:42Z

2

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

answered Apr 16, 2019 at 14:04

andy

1293 silver badges13 bronze badges

Comments

Abshir · Accepted Answer · 2019-11-19 14:32:06Z

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, 2019 at 14:32

Abshir

114 bronze badges

1 Comment

neiya Over a year ago

For me none of these has made the placeholder disappear in Chrome 79.0 and Firefox 72.0

Антон Лебедев · Accepted Answer · 2020-08-18 12:51:52Z

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, 2020 at 12:51

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

213 bronze badges

Comments

CPHPython · Accepted Answer · 2021-11-30 21:50:43Z

1

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

answered Nov 30, 2021 at 21:50

CPHPython

13.9k5 gold badges68 silver badges77 bronze badges

Comments

Hans · Accepted Answer · 2023-03-10 20:22:46Z

1

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';
    }
  }}
/>;

answered Mar 10, 2023 at 20:22

Hans

1,64420 silver badges22 bronze badges

1 Comment

Dennis Jones Over a year ago

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!

Relcode · Accepted Answer · 2022-01-13 08:40:46Z

0

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

answered Jan 13, 2022 at 8:40

Relcode

5211 gold badge8 silver badges18 bronze badges

Comments

Jimmy Long · Accepted Answer · 2023-01-16 12:33:53Z

0

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.

answered Jan 16, 2023 at 12:33

Jimmy Long

7862 gold badges9 silver badges25 bronze badges

Comments

VorTechS · Accepted Answer · 2023-03-07 11:58:28Z

0

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).

answered Mar 7, 2023 at 11:58

VorTechS

4935 silver badges14 bronze badges

Comments

eppurSiMuove · Accepted Answer · 2025-09-13 16:23:42Z

I would like to take Vladimir Kovarsky's answer in advance to suggest what worked for me.

In addition to it, it's necessary to make attribute value="" of the input date element in order to apply such css rule:

<input type="date" id="input-pres" value="" required>

However, just doing that isn't enough because now value is always empty and input date color will be always transparent when the date input is not focused. So, we need to set a new value to value attribute when user choose or change the date. For this we'll need a little of Javascript inside our input date element:

<input type="date" id="input-pres" value="" onchange="this.setAttribute('value', this.value)" required>

And CSS remains the same:

input[value=""]:not(:focus) { color: transparent; }

Massimiliano Kraus · Accepted Answer · 2017-12-05 13:36:50Z

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 · Accepted Answer · 2022-01-25 16:21:01Z

-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, 2022 at 16:21

answered Jan 23, 2022 at 8:15

Saif

295 bronze badges

Collectives™ on Stack Overflow

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

19 Answers 19

9 Comments

1 Comment

4 Comments

1 Comment

1 Comment

Comments

1 Comment

This should be transparent only when value is not set.

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

19 Answers 19

9 Comments

1 Comment

4 Comments

1 Comment

1 Comment

Comments

1 Comment

This should be transparent only when value is not set.

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related