web-dev-qa-db-fra.com

Supprimer le texte/l'espace réservé par défaut présent dans l'élément d'entrée html5 de type = date

J'utilise un élément d'entrée HTML avec le type comme date,

<input type="date">

Lorsque j'utilise l'élément ci-dessus, il crée un format de date par défaut, c'est-à-dire un texte mm/jj/aaaa dans cet élément d'entrée. Comment puis-je supprimer ce texte par défaut?

J'ai essayé d'ajouter du style ci-dessous sur ma page, mais cela masque également la valeur de date sélectionnée,

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

La réponse acceptée ne semble plus fonctionner avec les dernières versions de chrome. Testé sur la version 50.0.2661.102 et ne fonctionnait pas.

Fonctionne en ajoutant ceci à la place:

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

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

Échantillon de travail

La source

10
Robin Carlo Catacutan

Option possible

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

En réalité, vous pouvez tirer parti de l’espace réservé par défaut généré par Chrome en utilisant le code suivant. Ce code fonctionne également avec les dates extraites de la base de données:

<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

Cela ne devrait être transparent que lorsque la valeur n'est pas définie.

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