web-dev-qa-db-fra.com

N'affichant pas d'espace réservé pour le type d'entrée = "date"

Je fais une application phonegap, quand iam essaye le champ de saisie type="date" comme indiqué ci-dessous, il affiche le sélecteur de date sur l'iPhone comme prévu, 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 pas de solution nulle part, espérons que quelqu'un pourra m'aider. Merci.

 <input placeholder="Date" class="textbox-n" type="date" id="date">
html5cordovadatepickerplaceholder
87
Mumthezir VP

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

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

Si vous utilisez la méthode mvp mais ajoutez l'événement onblur pour le rétablir dans un champ de texte afin que le texte de substitution apparaisse à nouveau lorsque le champ de saisie perd le focus. Cela rend le piratage 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.

67
jbarlow

Je l'ai utilisé dans mon css:

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

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

et mettre quelque chose comme ça en 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 desktop avec un type de texte en entrée. Cette solution est un moyen agréable si votre code fonctionne avec ie8.

19
Alessio Kenta Di Crescenzo

À compter d’aujourd’hui (2016), j’ai utilisé avec succès ces 2 extraits (et 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;
}

Placeholder disparaître en cliquant

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

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');
    });
});
9
Davide Russo Abram

Selon le standard HTML :

Les attributs de contenu suivants ne doivent pas être spécifiés et ne s'appliquent pas à l'élément: accept, alt, vérifié, nomrépertoire, formaction, formenctype, méthodeform, formnovalidate, formtarget, height, inputmode, maxlength, minlength, multiple, pattern, placeholder, taille, src et largeur.

8
int32_t

Sur la base des réponses deadproxor et Alessio, j'essaierais uniquement d'utiliser 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, vous pouvez essayer d’utiliser les sélecteurs: valid et: invalid, si votre entrée est obligatoire.

MODIFIER

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

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>

7
Yuri

Ça marche pour moi:

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

Pour résoudre le problème dans la réponse correcte en cours, "cliquer sur le champ pour afficher le clavier à l'écran au lieu du sélecteur de date":

Le problème est dû au fait que le navigateur se comporte 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 de relancer la focalisation par programme sur l’élément d’entrée défini comme type = date par JS à 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();">
3
ma90

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 en contradiction avec eux (conformément à la spécification et au fait qu'ils doivent afficher une interface utilisateur spécifique);
  • les convertir en un autre type d’entrée pour la durée non focalisée autorise les espaces réservés, mais le focus déclenche alors la mauvaise interface utilisateur (clavier), du moins pour une courte durée, 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 consiste à utiliser l’astuce habituelle pour styliser les éléments de formulaire natifs: assurez-vous que l’élément est affiché mais non visible, et affichez le style attendu à travers son libellé associé. En règle générale, l’étiquette s’affiche comme entrée (y compris un espace réservé), mais par-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 appelé 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 répercuté sur le champ lui-même et déclenchera donc l'interface utilisateur de saisie de la date.

Si vous souhaitez tester une telle solution en direct, vous pouvez exécuter cette version angulaire à partir de votre tablette ou de votre téléphone portable. 

2
Javarome

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 modification, l'entrée est toujours active et lors du défilement, la valeur disparaît tout simplement). J'ai donc ajouté onchange pour rendre input.blur ()

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

Vous pouvez 

  1. le définir comme type texte 
  2. convertir à la date le focus
  3. clique dessus
  4. ... laisser l'utilisateur vérifier la date
  5. sur le changement stocker la valeur
  6. définir l'entrée pour taper 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" />

2
jlbofh

Donc, ce que j’ai décidé de faire est enfin là et fonctionne parfaitement sur tous les navigateurs mobiles, y compris les iPhone 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>

Rendez-vous amoureux 

2
NISHANK KUMAR

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">
1
Franco Dipré

Du point de vue angulaire, j'ai réussi à mettre un espace réservé dans l'élément date de type 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, je devais donc utiliser une couleur 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, un attribut viewchild birthDate a été utilisé pour pouvoir accéder à cette entrée à partir du composant. Et défini une expression angulaire sur l'attribut de marque de réservation, ce qui décidera si nous affichons la marque de réservation 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' :
    '';
  }
}
1
xyztdanid4

Trouver un meilleur moyen de résoudre votre problème ... Je pense que cela vous aidera.

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

Hé alors, j'ai rencontré le même problème hier soir et j'ai trouvé une combinaison de toutes vos réponses et de la magie scintillante qui font 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: Alors, que se passe-t-il ici, tout d’abord dans HTML, c’est assez simple, il suffit de faire une entrée de base HMTL5-date et de définir un espace réservé ... CSS, nous définissons un: pseudo-élément before pour simuler notre paramètre fictif, il prend simplement l'attribut du paramètre générique à partir de l'entrée elle-même. Je l'ai rendu disponible uniquement à partir d'une largeur de fenêtre d'affichage de 1024 pixels - pourquoi je vais le dire plus tard… .. Et maintenant, le jQuery, après avoir refactorisé plusieurs fois, je suis arrivé avec ce morceau de code qui va vérifier chaque changement, qu’une valeur soit définie ou non, sinon sa valeur sera (ré) ajoutée à la classe, et inversement.

SAVOIR DES QUESTIONS:

  • il y a un problème dans chrome avec son sélecteur de date par défaut, c'est à quoi sert la requête multimédia. Cela ajoutera l'espace réservé en face de la chose par défaut 'jj.mm.yyyy'. Vous pouvez également définir le paramètre fictif de l'entrée de date sur 'date:' et ajuster la couleur sans valeur à l'intérieur de l'entrée ... pour moi, cela a entraîné d'autres problèmes moins importants. J'ai donc choisi de ne pas l'afficher sous la forme 'plus grand. 'écrans

espérons que cela aide! cheerio!

0
user5672471

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;');
});
0
Or Choban

Si vous êtes uniquement concerné par le mobile:

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

Voici un autre hack possible n'utilisant pas js et utilisant toujours css content. Notez que comme :after n'est pas pris en charge par certains navigateurs pour les entrées, nous devons sélectionner l'entrée d'une autre manière, identique pour content 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>

0
Flavien Volken

essayez ma solution. J'utilise l'attribut 'required' pour savoir si l'entrée est renseignée et sinon, je montre 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
}
0
Roman Yakoviv

En développant la solution de @ mvp en gardant à l'esprit le javascript discret, 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') }
)
0
poweratom

Aucune des solutions ne fonctionnait correctement pour moi sur Chrome sous iOS 12 et la plupart d’entre elles ne sont pas conçues pour faire face à de multiples entrées de date sur une page. J'ai fait ce qui suit, ce qui crée essentiellement une fausse étiquette sur la date et la supprime instantanément. Je supprime également la fausse étiquette si la largeur de la fenêtre d’affichage est supérieure à 992 pixels.

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;
    }
}
0
Niccolò Mineo

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">

Cette 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.

0
phlegx

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 substitution apparaît.

0
HeresJohnny