Ne présentant pas d'espace réservé pour input type=“champ” date

Il peut ne pas être approprié... mais il m'a aidé à la dernière.

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date"> 

J'ai fini à l'aide de la suite.

Concernant Firefox commentaire(s): Généralement, Firefox n'affiche aucun texte de l'espace réservé pour les entrées de type date.
Mais comme c'est un Cordova/PhoneGap cette question devrait être d'aucun intérêt (Sauf si vous souhaitez vous développer à l'encontre de FirefoxOS).

CSS:

input[type="date"]:not(.has-value):before{
  color: lightgray;
  content: attr(placeholder);
}

HTML:

<input type="date" placeholder="MY PLACEHOLDER" onchange="this.className=(this.value!=''?'has-value':'')">

À compter d'aujourd'hui (2016), j'ai utilisé avec succès ces 2 extraits (en plus ils fonctionnent bien avec les Bootstrap4).

Données d'entrée sur la gauche, l'espace réservé sur la gauche

input[type=date] {
  text-align: right;
}

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

Espace réservé disparaissent lorsque vous cliquez sur

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

J'ai utilisé ce pentecôte jQuery:
http://jsfiddle.net/daviderussoabram/65w1qhLz/

$('input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]').each(function() {
    var el = this, type = $(el).attr('type');
    if ($(el).val() == '') $(el).attr('type', 'text');
    $(el).focus(function() {
        $(el).attr('type', type);
        el.click();
    });
    $(el).blur(function() {
        if ($(el).val() == '') $(el).attr('type', 'text');
    });
});

Basé sur deadproxor et Alessio réponses, je voudrais essayer en utilisant uniquement CSS:

input[type="date"]::before{
    color: #999;
    content: attr(placeholder) ": ";
}
input[type="date"]:focus::before {
    content: "" !important;
}

Et si vous avez besoin pour faire de l'espace réservé invisible après avoir écrit quelque chose dans l'entrée, on pourrait essayer d'utiliser l' :valide et non valide sélecteurs, si votre entrée est requise.

MODIFIER

Voici le code si vous utilisez dans votre entrée:

CSS:

input[type="date"]::before {
	color: #999999;
	content: attr(placeholder);
}
input[type="date"] {
	color: #ffffff;
}
input[type="date"]:focus,
input[type="date"]:valid {
	color: #666666;
}
input[type="date"]:focus::before,
input[type="date"]:valid::before {
	content: "" !important;
}

HTML:

<input type="date" placeholder="Date" required>

Résoudre le problème dans le courant de la réponse correcte "en cliquant sur le champ affiche le clavier à l'écran au lieu de la datepicker":

Le problème est causé par le Navigateur se comporter selon le type d'entrée lorsque vous cliquez (=texte). Par conséquent, il est nécessaire d'arrêter de se concentrer sur l'élément d'entrée (flou), puis redémarrez l'accent par programme sur l'élément d'entrée qui a été défini comme type= "date" par JS dans la première étape. Le clavier affiche dans phonenumber-mode.

<input placeholder="Date" type="text" onfocus="this.type='date';
                      this.setAttribute('onfocus','');this.blur();this.focus();">

Pour résumer la date d'entrées problème:

• Vous avez à les afficher (c'est à dire éviter display:none) sinon l'entrée de l'INTERFACE utilisateur ne sera pas déclenchée ;
• un espace réservé est en contradiction avec eux (conformément à la spécification, et parce qu'ils ont pour afficher une INTERFACE utilisateur spécifique) ;
• la conversion à un autre type d'entrée pour le flou le temps ne permet d'espaces réservés, mais l'accent déclenche alors la saisie erronée de l'INTERFACE utilisateur (clavier), au moins pour un petit moment, parce que les événements de focus ne peut pas être annulée.
• insertion (avant) ou l'ajout d' (après) le contenu n'empêche pas la date d'entrée valeur à afficher.

La solution que j'ai trouvé pour répondre à ces exigences est d'utiliser l'habituel truc du style natif éléments de formulaire : s'assurer que l'élément est affiché, mais pas visible, et affichage prévu son style au travers de son étiquette associée. Généralement, l'étiquette s'affiche comme l'entrée (y compris un espace réservé), mais sur elle.

Donc, un code HTML comme:

<div class="date-input>
  <input id="myInput" type="date"> 
  <label for="myInput"> 
    <span class="place-holder">Enter a date</span> 
  </label>
</div>

Pourrait porter le titre:

.date-input {
  display: inline-block;
  position: relative;
}
/* Fields overriding */
input[type=date] + label {
  position: absolute;  /* Same origin as the input, to display over it */
  background: white;   /* Opaque background to hide the input behind */
  left: 0;             /* Start at same x coordinate */
}

/* Common input styling */
input[type=date], label {  
  /* Must share same size to display properly (focus, etc.) */
  width: 15em;
  height: 1em;
  font-size: 1em;
}

De tout événement (cliquez sur, focus) sur une étiquette associée pourra être répercuté sur le champ lui-même, et ainsi de déclencher la date d'entrée de l'INTERFACE utilisateur.

Si vous voulez tester cette solution en live, vous pouvez exécuter cette version Angulaire à partir de votre tablette ou mobile.

Je travaille avec ionicframework et fournies par la solution de @Mumthezir est presque parfait. Dans le cas où si quelqu'un aurait le même problème que moi(après le changement, l'entrée est toujours concentré et lors du défilement, de valeur, simplement disparaît) j'ai Donc ajouté onchange à faire d'entrée.blur()

<input placeholder="Date" class="textbox-n" type="text" onfocus=" (this.type='date')" onchange="this.blur();"  id="date"> 

Angulaires point de vue, j'ai réussi à mettre un espace réservé dans l'entrée type d'élément de date.

Tout d'abord, je définis le code css suivant:

.placeholder {
    color: $text-grey;
  }

  input[type='date']::before {
    content: attr(placeholder);
  }

  input::-webkit-input-placeholder {
    color: $text-grey;
  }

La raison pour laquelle cela est nécessaire, c'est que si css3 contenu a une couleur différente que la normale de l'espace réservé, j'ai donc dû utiliser une commune.

<input #birthDate
         class="birthDate placeholder"
         type="date"
         formControlName="birthDate"
         placeholder="{{getBirthDatePlaceholder() | translate}}"
         [class.error]="!onboardingForm.controls.birthDate.valid && onboardingForm.controls.birthDate.dirty"
         autocomplete="off"
         >

Ensuite dans le modèle utilisé un viewchild la date de naissance de l'attribut, pour être en mesure d'accéder à cette entrée du composant. Et défini angulaire de l'expression sur l'espace réservé à l'attribut, qui décidera si nous montrons l'espace réservé ou non. C'est l'inconvénient majeur de la solution, c'est que vous avez à gérer la visibilité de l'espace réservé.

@ViewChild('birthDate') birthDate;

getBirthDatePlaceholder() {
  if (!this.birthDate) {
    return;
  } else {
    return this.birthDate.nativeElement.value === '' ?
    'ONBOARDING_FORM_COMPONENT.HINT_BIRTH_DATE' :
    '';
  }
}

essayer ma solution. J'utilise 'required' attribut de savoir si l'entrée est rempli et si je pas afficher le texte à partir de l'attribut 'placeholder'

//HTML
<input required placeholder="Date" class="textbox-n" type="date" id="date">

//CSS
input[type="date"]:not(:valid):before {
   content: attr(placeholder);
   //style it like it real placeholder
}

Expansion sur @mvp de la solution avec javascript discret à l'esprit, voici l'approche:

HTML:

<input type="text" placeholder="Date" class="js-text-date-toggle">

Javascript:

$('.js-text-date-toggle').on('focus', function() {
  $(this).attr('type', 'date') }
).on('blur', function() {
  $(this).attr('type'), 'text') }
)

Hé oui, j'ai rencontré le même problème la nuit dernière et a trouvé une combinaison de l'ensemble de votre réponse et de certains mousseux de la magie sont en train de faire un travail de qualité:

Le code HTML:

<input type="date"  name="flb5" placeholder="Datum"     class="datePickerPlaceHolder"/>

Le CSS:

@media(max-width: 1024px) {
   input.datePickerPlaceHolder:before {
      color: #A5A5A5; //here you have to match the placeholder color of other inputs
      content: attr(placeholder) !important;
   }
}

Le jQuery:

$(document).ready(function() {
    $('input[type="date"]').change(function(){
            if($(this).val().length < 1) {
                $(this).addClass('datePickerPlaceHolder');
            } else {
                $(this).removeClass('datePickerPlaceHolder');
            }
    });
});

Explication:
Alors, qu'est-ce qui se passe ici, tout d'abord dans le HTML, c'est assez simple juste faire une base HTML5-date d'entrée et de définir un espace réservé.
Prochain arrêt: CSS, nous nous donnons :avant-pseudo-élément de faux notre espace réservé, il faut juste l'espace réservé de l'attribut de l'entrée elle-même. J'ai fait ce disponible uniquement vers le bas à partir d'une fenêtre d'affichage de la largeur de 1024px - pourquoi im va le raconter plus tard.
Et maintenant, le jQuery, après refactoring une couple de fois je suis venu avec ce morceau de code qui va vérifier à chaque changement si il y a une valeur définie ou pas, si elle n'est pas elle (re-)ajout de la classe, vice-versa.

CONNAISSENT DES PROBLÈMES D':

• il y a un problème en chrome avec son default date-picker, c'est ce que le media-query est pour. Cela permettra d'ajouter de l'espace réservé en face de l'option par défaut 'dd.mm.aaaa'-chose. Vous pouvez également définir l'espace réservé de la date d'entrée à la fonction "date: " et ajuster la couleur en cas de pas de valeur à l'intérieur de l'entrée...pour moi, cela a entraîné quelques autres petites questions je suis donc allé avec tout simplement pas à le montrer sur les "grandes" écrans

espère que ça aide!
à plus!

Si vous n'êtes intéressé que par le mobile:

input[type="date"]:invalid:before{
    color: rgb(117, 117, 117);
    content: attr(placeholder);
}

Ici est une autre hack utilisez pas de js et toujours à l'aide de css content. Notez que comme :after n'est pas prise en charge sur certains navigateur pour les entrées, nous avons besoin de sélectionner l'entrée d'une autre manière, de même pour content attr('')

CSS:

input[type=date]:invalid+span:after {
  content:"Birthday";
  position:absolute;
  left:0;
  top:0;
}

input[type=date]:focus:invalid+span:after {
  display:none;
}

input:not(:focus):invalid {
  color:transparent;
}

label.wrapper {
	position:relative;
}

HTML:

<label class="wrapper">
	<input
 	  type="date"
  	  required="required" 
	/>
	<span></span>
</label>

Aucune des solutions ont été fonctionne correctement pour moi sur Chrome sous iOS 12 et la plupart d'entre eux ne sont pas adaptés pour faire face à de possibles plusieurs date d'entrées sur une page. J'ai fait la suivante, ce qui en fait crée une fausse étiquette sur la date d'entrée et le supprime sur le robinet. Je suis également en retrait de la fausse étiquette de la fenêtre d'affichage si la largeur est au-delà de 992px.

JS:

function addMobileDatePlaceholder() {
    if (window.matchMedia("(min-width: 992px)").matches) {
        $('input[type="date"]').next("span.date-label").remove();
        return false;
    }

    $('input[type="date"]').after('<span class="date-label" />');

    $('span.date-label').each(function() {
        var $placeholderText = $(this).prev('input[type="date"]').attr('placeholder');
        $(this).text($placeholderText);
    });

    $('input[type="date"]').on("click", function() {
        $(this).next("span.date-label").remove();
    });
}

CSS:

@media (max-width: 991px) {
    input[type="date"] {
        padding-left: calc(50% - 45px);
    }

    span.date-label {
        pointer-events: none;
        position: absolute;
        top: 2px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        height: 27px;
        width: 70%;
        padding-top: 5px;
    }
}

Vous pouvez utiliser l'attribut "value", par exemple:

<input type="date" value="Date" class="textbox-n" id="date"/>