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

Question

I am using html input element with type as date,

When I use above element it creates a default date format i.e.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

This should be transparent only when value is not set.

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