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

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


Solution 1:[1]

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

Solution 2:[2]

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

Solution 3:[3]

This should be transparent only when value is not set.

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

Solution 4:[4]

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

Solution 5:[5]

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

Solution 6:[6]

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

Thank to Hai Nguyen.

Solution 7:[7]

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

Solution 8:[8]

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

Solution 9:[9]

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

Solution 10:[10]

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"]));?>"                
     />

Solution 11:[11]

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

Solution 12:[12]

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

Solution 13:[13]

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.

Solution 14:[14]

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

Related Questions