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

Je suis en utilisant le html élément input de type date,

<input type="date">

Lorsque j'utilise au-dessus de l'élément crée un format de date par défaut c'est à dire jj/mm/aaaa texte à l'intérieur que l'élément d'entrée. Comment puis-je supprimer ce texte par défaut?

J'ai essayé d'ajouter ci-dessous style sur ma page, mais c'est caché le choix de la date de valeur ainsi,

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

source d'informationauteur Sreekanth

  1. 9
    ::-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. 11

    Accepté la réponse ne semble pas fonctionner plus sur les dernières versions de chrome. Testé sur la Version 50.0.2661.102 et n'a pas de travail.

    Fonctionne en ajoutant ceci à la place:

    input::-webkit-datetime-edit{ color: transparent; }

/* Include this to make it visible when input is clicked */
input:focus::-webkit-datetime-edit{ color: #000; }

    Échantillon de travail

    Source

  3. 6

    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;
}
  4. 0

    En fait, vous pouvez profiter de la valeur par défaut de l'espace réservé généré par google Chrome en utilisant le code suivant. Ce code fonctionne aussi 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"]));?>"                
     />