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;
}
::-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;
}
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;
}
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;
}
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"]));?>"
/>
input[value="0000-00-00"]::-webkit-datetime-edit {
color: transparent;
}