Wie simuliere ich die Platzhalterfunktionalität im Eingabedatumsfeld?

Es ist unmöglich, Platzhalter in Datumsfeldern zu verwenden, aber ich brauche es wirklich.

Ich möchte zwei Datumseingaben mit den Texten „Von“ und „Bis“ als Platzhalter.

Ich verwende den folgenden CSS-only-Trick:

  input[type="date"]:before {
    content: attr(placeholder) !important;
    color: #aaa;
    margin-right: 0.5em;
  }
  input[type="date"]:focus:before,
  input[type="date"]:valid:before {
    content: "";
  }

<input type="date" placeholder="Choose a Date" />

Verwenden Sie dieses Eingabeattribut events

onfocus="(this.type="date")" onblur="(this.type="text")"

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container mt-3">
  <label for="date">Date : </label>
  <input placeholder="Your Date" class="form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date">
</div>

Sie können CSS vor Pseudo verwenden.

.dateclass {
  width: 100%;
}

.dateclass.placeholderclass::before {
  width: 100%;
  content: attr(placeholder);
}

.dateclass.placeholderclass:hover::before {
  width: 0%;
  content: "";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<input
  type="date"
  placeholder="Please specify a date"
  onClick="$(this).removeClass('placeholderclass')"
  class="dateclass placeholderclass">

GEIGE

Sie können so etwas tun:

<input onfocus="(this.type="date")" class="js-form-control" placeholder="Enter Date">

Das HTML5-Datumseingabefeld unterstützt das Attribut für Platzhalter tatsächlich nicht. Es wird vom Browser immer ignoriert, zumindest gemäß der aktuellen Spezifikation.

Wie hier angemerkt

Ich verwende diese CSS-Methode, um Platzhalter am Eingabedatum zu simulieren.

Das einzige, was js benötigt, ist das setAttribute des Werts, wenn Sie React verwenden, funktioniert es sofort.

input[type="date"] {
  position: relative;
}

input[type="date"]:before {
  content: attr(placeholder);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  color: rgba(0, 0, 0, 0.65);
  pointer-events: none;
  line-height: 1.5;
  padding: 0 0.5rem;
}

input[type="date"]:focus:before,
input[type="date"]:not([value=""]):before
{
  display: none;
}

<input type="date" placeholder="Choose date" value="" onChange="this.setAttribute('value', this.value)" />

Der input[type="date"] DOMElement nimmt nur den folgenden Wert an: YYYY-MM-DDalle anderen Formate oder Texte werden übersprungen.

Live-Demo

HTML

<input type="text" placeholder="bingo" />
<input type="date" placeholder="2013-01-25" />

Reines JavaScript

window.onload = function () {
    /* Grab all elements with a placeholder attribute */
    var element = document.querySelectorAll('[placeholder]');

    /* Loop through each found elements */
    for (var i in element) {
        /* If the element is a DOMElement and has the nodeName "INPUT" */
        if (element[i].nodeType == 1 && element[i].nodeName == "INPUT") {

            /* We change the value of the element to its placeholder attr value */
            element[i].value = element[i].getAttribute('placeholder');
            /* We change its color to a light gray */
            element[i].style.color = "#777";

            /* When the input is selected/clicked on */
            element[i].onfocus = function (event) {
                /* If the value within it is the placeholder, we clear it */
                if (this.value == this.getAttribute('placeholder')) {
                    this.value = "";
                    /* Setting default text color */
                    this.style.color = "#000";
                };
            };

            /* We the input is left */
            element[i].onblur = function (event) {
                /* If the field is empty, we set its value to the placeholder */
                if (this.value == "") {
                    this.value = this.getAttribute('placeholder');
                    this.style.color = "#777";
                }
            };
        }
    }
}

Leistungsbeurteilung

In genau diesem Fall mit 2 input Elemente, reines JavaScript ist ~40 % ± 10 % schneller.

Mit 32 input Elemente bleibt der Unterschied gleich (~43 % ± 10 % schneller für Pure JS).