it-swarm.com.de

Standardtext/Platzhalter entfernen, der im html5-Eingabeelement vom Typ = Datum vorhanden ist

Ich benutze HTML-Eingabeelement mit Typ als Datum,

<input type="date">

Bei Verwendung des obigen Elements wird ein Standard-Datumsformat erstellt, d. H. Mm/tt/jjjj-Text innerhalb dieses Eingabeelements. Wie entferne ich diesen Standardtext?

Ich habe versucht, den Stil unten auf meiner Seite hinzuzufügen, aber der ausgewählte Datumswert wird ebenfalls ausgeblendet.

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.

Die akzeptierte Antwort scheint bei den neuesten Chromversionen nicht mehr zu funktionieren. Ich habe es auf Version 50.0.2661.102 getestet und funktionierte nicht.

Funktioniert durch Hinzufügen stattdessen:

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

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

Arbeitsprobe

Quelle

10

Mögliche Option

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

Tatsächlich können Sie den von Chrome generierten Standardplatzhalter mithilfe des folgenden Codes nutzen. Dieser Code funktioniert auch mit Datumsangaben aus der Datenbank:

<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 name="date" type="text" onfocus="(this.type='date')" onblur="if(!this.value)this.type='text'">

Vielen Dank an Hai Nguyen.

0
alitrun

Dies funktioniert in chrome) und lässt den Wert beim Setzen nicht verschwinden (Version 74)

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

Dies funktioniert für mich in chrome ab Version 73.0.3683.103

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

Ich konnte es jedoch nicht für Edge herausfinden, also habe ich es in dieses geändert

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

dies mag für einige von Ihnen nicht gut sein, aber ich habe die Klasse der aktiven Elemente trotzdem hinzugefügt, da meine Beschriftungen über dem Eingabefeld schwebten, bis sie angeklickt wurden, und dann habe ich sie nach oben verschoben. Daher musste ich den Datumsplatzhalter nicht anzeigen, während sich die Beschriftung über der Eingabe befand

0
andy

Dies sollte nur transparent sein, wenn der Wert nicht festgelegt ist.

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