it-roy-ru.com

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

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

<input type="date">

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

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

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;
}
18
Sreekanth
::-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;
}
11
Steffi A.

Принятый ответ больше не работает на последних версиях 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; 
}

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

Источник

10
Robin Carlo Catacutan

Возможный вариант

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

На самом деле вы можете воспользоваться заполнителем по умолчанию, созданным 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"]));?>"                
     />
0
Tofik Al-Radi

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

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