Entfernen Standardtext/Platzhalter in html5 Eingabeelementen vom Typ = Datum

I mit Typ HTML-Eingabeelement bin mit Datum,Entfernen Standardtext/Platzhalter in html5 Eingabeelementen vom Typ = Datum

<input type="date">

Als ich oben Elemente verwende es ein Format Standarddatum erzeugt also mm/dd/JJJJ Text innerhalb dieses Eingabeelements. Wie entferne ich diesen Standardtext?

habe ich versucht, unter Stil auf meiner Seite hinzugefügt, aber es ist auch das ausgewählte Datum Wert versteckt,

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

Quelle

2015-02-24 Sreekanth

Sind Sie nur Targeting Webkit/Blink Benutzer-Agents? Weder Gecko noch Trident unterstützen im Moment den Datumseingabetyp. –

@TiesonT. Vielen Dank für Ihre Antwort; Ich habe gerade bemerkt, dass Trident und Gecko das nicht unterstützen. Allerdings versuche ich es im Moment auf Blink (Chrome) zu starten. Irgendwelche Vorschläge ? – 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; 
}

Quelle

2015-02-24 00:58:29

1+ .. Schöne. Hier ist ein entsprechendes Beispiel - http://jsfiddle.net/jmzhoocj/ –

@Steffi A. Danke .. Ihre Vorschläge funktionieren perfekt! – Sreekanth

@JoshCrozier Danke .. – Sreekanth

Die akzeptierte Antwort scheint nicht mehr auf den neuesten Chrom-Versionen zu arbeiten. Getestet auf Version 50.0.2661.102 und hat nicht funktioniert.

Werke dieses Hinzufügen statt:

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

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

Working sample

Source

Quelle

2016-07-07 10:12:43

Dies scheint den Wert verschwinden zu lassen, selbst wenn gesetzt (Chrom 54) –

Diese Antwort funktioniert in Chrom 60.0.3112.113 auf Win 10 Pro, aber es entfernt nicht nur den Standardwert, sondern macht auch einen Satz, gültig Wert verschwindet bei Unschärfe. –

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

Quelle

2017-03-21 23:01:01 Kenneth

Eigentlich können Sie die Vorteile der Standard-Platzhalter durch Chrome generiert nehmen, indem Sie den folgenden Code verwenden. Dieser Code funktioniert auch mit Daten aus der Datenbank abgerufen:

<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"]));?>"     
    />

Quelle

2017-07-31 14:50:15

Entfernen Standardtext/Platzhalter in html5 Eingabeelementen vom Typ = Datum

Antwort

Verwandte Themen