Il est impossible d'utiliser un espace réservé sur les champs de date, mais j'en ai vraiment besoin.
Je veux deux entrées de date avec les textes "De" et "À" sur chacun comme espaces réservés.
J'utilise le seul truc CSS suivant:
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" />
Vous pouvez utiliser les CSS avant le pseudo.
.dateclass {
width: 100%;
}
.dateclass.placeholderclass::before {
width: 100%;
content: attr(placeholder);
}
.dateclass.placeholderclass:hover::before {
width: 0%;
content: "";
}
<input
type="date"
placeholder="Please specify a date"
onClick="$(this).removeClass('placeholderclass')"
class="dateclass placeholderclass">
<label for="date">Date : </label>
<input placeholder="Your Date" class="form-control" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">
Vous pouvez faire quelque chose comme ça:
<input onfocus="(this.type='date')" class="js-form-control" placeholder="Enter Date">
Le champ de saisie de la date HTML5 ne prend pas en charge l'attribut pour espace réservé. Il sera toujours ignoré par le navigateur, du moins selon les spécifications actuelles.
input[type="date"]
DOMElement prend uniquement la valeur suivante: YYYY-MM-DD
, tout autre format ou texte pouvant être ignoré.
<input type="text" placeholder="bingo" />
<input type="date" placeholder="2013-01-25" />
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";
}
};
}
}
}
Dans ce cas précis, avec 2 éléments input
, Pure JavaScript est ~ 40% ± 10% plus rapide .
Avec 32 éléments input
, la différence reste la même (environ 43% ± 10% plus rapide pour Pure JS).
Ok, alors voici ce que j'ai fait:
$(document).on('change','#birthday',function(){
if($('#birthday').val()!==''){
$('#birthday').addClass('hasValue');
}else{
$('#birthday').removeClass('hasValue');
}
})
Cela permet de supprimer le paramètre fictif lorsqu'une valeur est donnée.
input[type="date"]:before {
content: attr(placeholder) !important;
color: #5C5C5C;
margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"].hasValue:before {
content: "" !important;
margin-right: 0;
}
Sur le focus ou si .hasValue, supprimez le paramètre fictif et sa marge.
Comme mentionné ici , je l’ai fait fonctionner avec une pseudo-classe ": before" et un peu de javascript .
#myInput:before{ content:"Date of birth"; width:100%; color:#AAA; }
#myInput:focus:before,
#myInput.not_empty:before{ content:none }
Ensuite, en javascript, ajoutez la classe "not_empty" en fonction de la valeur des événements onChange et onKeyUp.
Vous pouvez même ajouter tout cela dynamiquement à chaque champ de date. Vérifiez ma réponse sur l'autre fil pour le code.
Ce n'est pas parfait, mais cela fonctionne bien dans les vues Web de Chrome et iOS7. Peut-être que cela pourrait vous aider.
Comme je l'ai mentionné ici
initialement définir le type de champ à texte.
le focus changer pour taper la date
J'utilise cette méthode CSS pour simuler un espace réservé à la date d'entrée.
La seule chose dont js a besoin est de définirAttribut de la valeur. Si vous utilisez React, cela fonctionne immédiatement.
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)" />
Essaye ça:
Ajoutez un attribut de marque de réservation à votre champ avec la valeur souhaitée, puis ajoutez ce jQuery:
$('[placeholder]').each(function(){
$(this).val($(this).attr('placeholder'));
}).focus(function(){
if ($(this).val() == $(this).attr('placeholder')) { $(this).val(''); }
}).blur(function(){
if ($(this).val() == '') { $(this).val($(this).attr('placeholder')); }
});
Je ne l'ai pas testée pour les champs qui ne peuvent pas être des espaces réservés, mais vous ne devriez rien changer du code.
Sur une autre note, ce code est également une excellente solution pour les navigateurs qui ne prennent pas en charge l'attribut d'espace réservé.
Utiliser un jQuery (bien sûr, vous pouvez y parvenir avec Vanilla. Ceci vous assure que le format de la date reste identique.
$(function() {
$('.sdate').on('focus', function() {
$(this).attr('type', 'date');
});
$('.sdate').on('blur', function() {
if(!$(this).val()) { // important
$(this).attr('type', 'text');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" class="sdate" placeholder="From">