Ne pas afficher l'espace réservé pour le champ type d'entrée = "date"

Je fais une application phonegap. Lorsque j'essaie type="date"le champ de saisie comme indiqué ci-dessous, il affiche le sélecteur de date sur l'iPhone comme je m'y attendais, mais il ne montre pas l'espace réservé que j'ai donné. J'ai trouvé le même problème ici dans SO, mais aucune solution nulle part.

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

Ce n'est peut-être pas approprié ... mais cela m'a aidé.

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

Si vous utilisez la méthode de mvp mais que vous ajoutez l'événement onblur pour le remplacer par un champ de texte afin que le texte de l'espace réservé réapparaisse lorsque le champ de saisie perd le focus. Cela rend juste le hack un peu plus agréable.

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

J'espère que cela t'aides.

J'ai fini par utiliser ce qui suit.

Concernant le (s) commentaire (s) de Firefox: En général, Firefox n'affichera aucun espace réservé de texte pour les entrées de type date. Mais comme il s'agit d'une question sur Cordova / PhoneGap, cela ne devrait pas vous inquiéter (à moins que vous ne souhaitiez développer contre FirefoxOS).

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

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

J'ai utilisé ceci dans mon css:

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

input[type="date"].full:before {
    color:black;
    content:""!important;
}

et mettez quelque chose comme ça dans javascript:

$("#myel").on("input",function(){
    if($(this).val().length>0){
    $(this).addClass("full");
}
else{
   $(this).removeClass("full");
   }
 });

cela fonctionne pour moi pour les appareils mobiles (Ios8 et Android). Mais j'ai utilisé jquery inputmask pour le bureau avec le type de texte d'entrée. Cette solution est un bon moyen si votre code s'exécute sur ie8.

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

Données d'entrée à gauche, espace réservé à gauche

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

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

L'espace réservé disparaît lorsque vous cliquez

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

Selon la norme HTML :

Les attributs de contenu suivants ne doivent pas être spécifiés et ne s'appliquent pas à l'élément: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, minlength, multiple, pattern, placeholder , size, src et width.

Ça marche pour moi:

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

J'ai utilisé ce whit 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');
    });
});

Sur la base des réponses de deadproxor et d'Alessio, j'essaierais d'utiliser uniquement CSS:

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

Et si vous avez besoin de rendre l'espace réservé invisible après avoir écrit quelque chose dans l'entrée, nous pourrions essayer d'utiliser les sélecteurs: valid et: invalid, si votre entrée est obligatoire.

ÉDITER

Voici le code si vous utilisez requis dans votre saisie:

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

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

Vous avez trouvé une meilleure façon de résoudre votre problème. Je crois que ceci vous aidera. une fois focalisée, la boîte changera le type en texte afin d'afficher votre espace réservé. lorsqu'il est mis au point, son type se transforme en date afin que la vue du calendrier soit affichée.

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

J'ai pris l'idée de jbarlow, mais j'ai ajouté un if dans la fonction onblur afin que les champs ne changent de type que si la valeur est vide

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

Résoudre le problème dans la bonne réponse actuelle "cliquer sur le champ affiche le clavier à l'écran au lieu du sélecteur de date":

Le problème est causé par le comportement du navigateur en fonction du type d'entrée lorsque vous cliquez sur (= texte). Par conséquent, il est nécessaire d'arrêter de se concentrer sur l'élément d'entrée (flou), puis de redémarrer la mise au point 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 s'affiche en mode numéro de téléphone.

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

essayez ma solution. J'utilise l'attribut 'required' pour savoir si l'entrée est remplie et sinon j'affiche le texte 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
}

Cela m'a pris un certain temps pour comprendre celui-ci, laissez-le tel quel type="text"et ajoutez onfocus="(this.type='date')", comme indiqué ci-dessus.

J'aime même l'idée onBlur mentionnée ci-dessus

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

J'espère que cela aidera tous ceux qui n'ont pas tout à fait compris ce qui se passe ci-dessus

Pour résumer le problème des entrées de date:

• Vous devez les afficher (c'est-à-dire éviter l'affichage: aucun) sinon l'interface utilisateur d'entrée ne sera pas déclenchée;
• un espace réservé est contradictoire avec eux (selon la spécification, et parce qu'ils doivent afficher une interface utilisateur spécifique);
• les convertir en un autre type d'entrée pour le temps non focalisé autorise les espaces réservés, mais le focus déclenche alors la mauvaise interface utilisateur d'entrée (clavier), au moins pour une courte période, car les événements de focus ne peuvent pas être annulés.
• l'insertion (avant) ou l'ajout (après) de contenu n'empêche pas l'affichage de la valeur d'entrée de la date.

La solution que j'ai trouvée pour répondre à ces exigences est d'utiliser l'astuce habituelle pour styliser les éléments de formulaire natifs: assurez-vous que l'élément est affiché mais pas visible, et affichez son style attendu via son étiquette associée . En règle générale, l'étiquette s'affiche en tant qu'entrée (y compris un espace réservé), mais au-dessus.

Donc, un HTML comme:

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

Peut être conçu comme:

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

Tout événement (clic, focus) sur une telle étiquette associée sera reflété sur le champ lui-même, et déclenchera ainsi l'interface de saisie de la date.

Si vous souhaitez tester une telle solution en direct, vous pouvez exécuter cette version Angular depuis votre tablette ou votre mobile.

Donc, ce que j'ai décidé de faire est enfin ici et cela fonctionne bien sur tous les navigateurs mobiles, y compris les iPhones et les androïdes.

$(document).ready(function(){

  $('input[type="date"]').each(function(e) {
    var $el = $(this), 
        $this_placeholder = $(this).closest('label').find('.custom-placeholder');
    $el.on('change',function(){
      if($el.val()){
        $this_placeholder.text('');
      }else {
        $this_placeholder.text($el.attr('placeholder'));
      }
    });
  });
  
});

label {
  position: relative;  
}
.custom-placeholder {
    #font > .proxima-nova-light(26px,40px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    color: #999;
}

<label>
  <input type="date" placeholder="Date">
  <span class="custom-placeholder">Date</span>
</label>

Date

Je travaille avec ionicframework et la solution fournie par @Mumthezir est presque parfaite. Au cas où quelqu'un aurait le même problème que moi (après le changement, l'entrée est toujours focalisée et lors du défilement, la valeur disparaît simplement) J'ai donc ajouté onchange pour faire input.blur ()

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

Vous pouvez

1. le définir comme texte de type
2. convertir en date sur le focus
3. faire un clic dessus
4. ... laissez l'utilisateur vérifier la date
5. lors du changement, stocker la valeur
6. définir l'entrée pour saisir du texte
7. définir la valeur d'entrée du type de texte sur la valeur stockée

comme ça...

$("#dateplaceholder").change(function(evt) {
  var date = new Date($("#dateplaceholder").val());
  $("#dateplaceholder").attr("type", "text");
  $("#dateplaceholder").val(date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear());
});
$("#dateplaceholder").focus(function(evt) {
  $("#dateplaceholder").attr("type", "date");
  setTimeout('$("#dateplaceholder").click();', 500);
});
$("#dateplaceholder").attr("type", "text");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="date" id="dateplaceholder" placeholder="Set the date" />

Nous avons trouvé un meilleur moyen de gérer la compréhension de base de l'utilisateur avec le survol de la souris et l'ouverture du sélecteur de date au clic:

<input type="text" onfocus="(this.type='date')" onmouseover="(this.type = 'date')" onblur="(this.value ? this.type = 'date' : this.type = 'text')" id="date_start" placeholder="Date">

Masquez également la flèche du kit Web et rendez-la à 100% pour couvrir le clic:

input[type="date"] {
    position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  left: 0;
  right: 0;
  top:0;
  bottom: 0;
}

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

Tout d'abord, j'ai défini le 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 est que si le contenu css3 a une couleur différente de celle de l'espace réservé normal, j'ai donc dû en 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 attribut viewchild birthDate, pour pouvoir accéder à cette entrée depuis le composant. Et défini une expression angulaire sur l'attribut d'espace réservé, 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 devez 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' :
    '';
  }
}

<input placeholder="Date" type="text" onMouseOver="(this.type='date')" onMouseOut="(this.type='text')"  id="date" class="form-control">

Code révisé de mumthezir

Je suis surpris qu'il n'y ait qu'une seule réponse avec une approche similaire à celle que j'ai utilisée.
Je me suis inspiré du commentaire de @ Dtipson sur la réponse de @Mumthezir VP.

J'utilise deux entrées pour cela, l'une est une fausse entrée avec type="text"laquelle j'ai défini l'espace réservé, l'autre est le champ réel avec type="date".
Sur l' mouseenterévénement sur leur conteneur, je cache la fausse entrée et montre la vraie, et je fais l'inverse sur l' mouseleaveévénement. Évidemment, je laisse la vraie entrée visible si une valeur y est définie.
J'ai écrit le code pour utiliser du Javascript pur, mais si vous utilisez jQuery (je le fais), il est très facile de le «convertir».

// "isMobile" function taken from this reply:
// https://stackoverflow.com/a/20293441/3514976
function isMobile() {
  try { document.createEvent("TouchEvent"); return true; }
  catch(e) { return false; }
}

var deviceIsMobile = isMobile();

function mouseEnterListener(event) {
  var realDate = this.querySelector('.real-date');
  // if it has a value it's already visible.
  if(!realDate.value) {
    this.querySelector('.fake-date').style.display = 'none';
    realDate.style.display = 'block';
  }
}

function mouseLeaveListener(event) {
  var realDate = this.querySelector('.real-date');
  // hide it if it doesn't have focus (except
  // on mobile devices) and has no value.
  if((deviceIsMobile || document.activeElement !== realDate) && !realDate.value) {
    realDate.style.display = 'none';
    this.querySelector('.fake-date').style.display = 'block';
  }
}

function fakeFieldActionListener(event) {
  event.preventDefault();
  this.parentElement.dispatchEvent(new Event('mouseenter'));
  var realDate = this.parentElement.querySelector('.real-date');
  // to open the datepicker on mobile devices
  // I need to focus and then click on the field.
  realDate.focus();
  realDate.click();
}

var containers = document.getElementsByClassName('date-container');
for(var i = 0; i < containers.length; ++i) {
  var container = containers[i];
  
  container.addEventListener('mouseenter', mouseEnterListener);
  container.addEventListener('mouseleave', mouseLeaveListener);
  
  var fakeDate = container.querySelector('.fake-date');
  // for mobile devices, clicking (tapping)
  // on the fake input must show the real one.
  fakeDate.addEventListener('click', fakeFieldActionListener);
  // let's also listen to the "focus" event
  // in case it's selected using a keyboard.
  fakeDate.addEventListener('focus', fakeFieldActionListener);
  
  var realDate = container.querySelector('.real-date');
  // trigger the "mouseleave" event on the
  // container when the value changes.
  realDate.addEventListener('change', function() {
    container.dispatchEvent(new Event('mouseleave'));
  });
  // also trigger the "mouseleave" event on
  // the container when the input loses focus.
  realDate.addEventListener('blur', function() {
    container.dispatchEvent(new Event('mouseleave'));
  });
}

.real-date {
  display: none;
}

/* a simple example of css to make 
them look like it's the same element */
.real-date, 
.fake-date {
  width: 200px;
  height: 20px;
  padding: 0px;
}

<div class="date-container">
  <input type="text" class="fake-date" placeholder="Insert date">
  <input type="date" class="real-date">
</div>

J'ai testé cela également sur un téléphone Android et cela fonctionne, lorsque l'utilisateur appuie sur le champ, le sélecteur de date est affiché. La seule chose est que si l'entrée réelle n'a pas de valeur et que l'utilisateur ferme le sélecteur de date sans choisir une date, l'entrée restera visible jusqu'à ce qu'il touche en dehors de celle-ci. Il n'y a pas d'événement à écouter pour savoir quand le sélecteur de date se ferme, donc je ne sais pas comment résoudre cela.

Je n'ai pas d'appareil iOS pour le tester.

En développant la solution de @ mvp 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') }
)

Je pense que tout ce que vous avez à faire est de changer le modèle pour dire que le champ de date est nullable, puis de mettre [Obligatoire] dessus si nécessaire. Si vous faites cela, le texte de l'espace réservé apparaît.

Hé, j'ai rencontré le même problème hier soir et j'ai compris qu'une combinaison de toutes vos réponses et de la magie étincelante faisait du bon travail:

Le 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: Donc, ce qui se passe ici, tout d'abord dans le HTML , c'est assez simple de faire simplement une entrée de date HMTL5 de base et de définir un espace réservé. Prochain arrêt: CSS , nous définissons un: avant-pseudo-élément pour simuler notre espace réservé, il prend juste l'attribut de l'espace réservé de l'entrée elle-même. Je l'ai rendu disponible uniquement à partir d'une largeur de fenêtre de 1024px - pourquoi je vais le dire plus tard. Et maintenant le jQuery , après avoir refactoré plusieurs fois, j'ai trouvé ce bit de code qui vérifiera à chaque changement s'il y a une valeur définie ou non, si ce n'est pas le cas, il (ré) ajoutera la classe, vice-versa .

CONNAÎTRE LES PROBLÈMES:

• il y a un problème dans chrome avec son sélecteur de date par défaut, c'est à cela que sert la requête multimédia. Il ajoutera l'espace réservé devant l'objet par défaut «jj.mm.aaaa». Vous pouvez également définir l'espace réservé de l'entrée de date sur `` date: '' et ajuster la couleur en cas d'absence de valeur à l'intérieur de l'entrée ... pour moi, cela a entraîné d'autres problèmes plus petits, alors je suis allé avec tout simplement ne pas l'afficher sur `` plus grand 'écrans

J'espère que cela pourra aider! cheerio!

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

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

HTML:

<div>
    <input class="ui-btn ui-btn-icon-right ui-corner-all ui-icon-calendar ui-shadow" id="inputDate" type="date"/>
    <h3 id="placeholder-inputDate">Date Text</h3>
</div>

JavaScript:

$('#inputDate').ready(function () {
$('#placeholder-inputDate').attr('style'
    , 'top: ' + ($('#placeholder-inputDate').parent().position().top + 10)
    + 'px; left: ' + ($('#placeholder-inputDate').parent().position().left + 0) + 'px; position: absolute;');
$('#inputDate').attr('style'
    , 'width: ' + ($('#placeholder-inputDate').width() + 32) + 'px;');
});

Voici un autre hack possible n'utilisant pas js et utilisant toujours css content. Notez que comme ce :aftern'est pas pris en charge sur certains navigateurs pour les entrées, nous devons sélectionner l'entrée d'une autre manière, même pourcontent attr('')

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

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

Cela fonctionne pour moi en utilisant ceci comme élément d'entrée:

<input name="birthdate" class="" class="wpcf7-form-control wpcf7-date 
 wpcf7-validates-as-required wpcf7-validates-as-date birthdate" value="" 
 aria-required="true" aria-invalid="false" placeholder="birthdate *" 
 type="date">

Ce CSS montre un espace réservé permanent. La valeur sélectionnée est affichée après l'espace réservé.

input[type="date"]:before {
    content: attr(placeholder) !important;
    margin-right: 0.5em;
    display: block;
}
/* only for FF */
@-moz-document url-prefix() {
    input[type="date"]:before {
        content: attr(placeholder) !important;
        margin-right: 0.5em;
        display: block;
        position: absolute;
        left: 200px; /* please adopt */
    }
}

J'utilise cette solution pour un formulaire Wordpress avec le plugin contact-form-7.

Aucune des solutions ne fonctionnait correctement pour moi sur Chrome dans iOS 12 et la plupart d'entre elles ne sont pas conçues pour faire face à d'éventuelles entrées de date multiples sur une page. J'ai fait ce qui suit, qui crée essentiellement une fausse étiquette sur l'entrée de date et la supprime au robinet. Je supprime également la fausse étiquette si la largeur de la fenêtre est supérieure à 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;
    }
}