Удалить текст/заполнитель по умолчанию, присутствующий в элементе ввода html5 типа = date

Я использую элемент ввода html с типом в качестве даты,

<input type="date">

Когда я использую элемент выше, он создает формат даты по умолчанию, т.е. текст mm/dd/yyyy внутри этого элемента ввода. Как удалить этот текст по умолчанию?

Я попробовал добавить ниже стиль на моей странице, но он также скрывает выбранное значение даты,

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

Ответы

Ответ 1

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

Ответ 2

Принятый ответ больше не работает на последних версиях Chrome. Протестировал его на версии 50.0.2661.102 и не работал.

Работает, добавив это вместо:

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

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

Рабочий образец

Источник

Ответ 3

Возможная опция

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

Ответ 4

На самом деле вы можете воспользоваться заполнителем по умолчанию, созданным Chrome, используя следующий код. Этот код также работает с датами, полученными из базы данных:

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

Ответ 5

Это должно быть прозрачно, только если значение не установлено.

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

Ответ 6

Это работает для меня в Chrome с версии 73.0.3683.103

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

Я не мог понять это для Edge, хотя, поэтому я изменил это на это

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

это может быть не очень хорошо для некоторых из вас, но я все равно добавлял класс active, так как мои метки зависали в поле ввода, пока не щелкнули, а затем я переместил их вверх. Следовательно, почему я должен был не отображать заполнитель даты, пока метка была над вводом

Ответ 7

Это работает в Chrome и не приводит к исчезновению значения при его установке (Версия 74)

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

Ответ 8

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

Спасибо Хай Нгуену.