¿Cómo simulo la funcionalidad del marcador de posición en el campo de fecha de entrada?

Es imposible usar marcador de posición en los campos de fecha, pero realmente lo necesito.

Quiero dos entradas de fecha con textos “De” y “A” en cada uno como marcadores de posición.

Estoy usando el siguiente truco de CSS:

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

Puedes usar CSS antes de pseudo.

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

Puedes hacer algo como esto:

  

El campo de entrada de fecha HTML5 en realidad no admite el atributo para marcador de posición. El navegador siempre lo ignorará, al menos según la especificación actual.

Como se señala aquí

La input[type="date"] DOMElement solo tiene el siguiente valor: YYYY-MM-DD , se omite cualquier otro formato o texto.

Demo en vivo

HTML

   

JavaScript puro

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

Revisión de rendimiento

En este caso exacto, con 2 elementos de input , Pure JavaScript es ~ 40% ± 10% más rápido .

Con 32 elementos de input , la diferencia sigue siendo la misma (~ 43% ± 10% más rápida para Pure JS).

Prueba esto:

Agregue un atributo de marcador de posición a su campo con el valor que desee, luego agregue este 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')); } }); 

No lo he probado para campos que no pueden tener marcadores de posición, pero no debería necesitar cambiar nada en el código.

En otra nota, este código también es una gran solución para los navegadores que no admiten el atributo marcador de posición.

Como mencioné aquí , lo he hecho funcionar con algunas pseudo-clases “: before” y un poco de javascript. Aquí está la idea:

  #myInput:before{ content:"Date of birth"; width:100%; color:#AAA; } #myInput:focus:before, #myInput.not_empty:before{ content:none } 

Luego, en javascript, agregue la clase “not_empty” dependiendo del valor en los eventos onChange y onKeyUp.

Incluso puede agregar todo esto dinámicamente en cada campo de fecha. Verifique mi respuesta en el otro hilo para el código.

No es perfecto, pero funciona bien en las vistas web de Chrome y iOS7. Tal vez podría ayudarte.

Como mencioné aquí

inicialmente establece el tipo de campo en texto.

en foco cambiarlo para escribir fecha

Ok, entonces esto es lo que he hecho:

 $(document).on('change','#birthday',function(){ if($('#birthday').val()!==''){ $('#birthday').addClass('hasValue'); }else{ $('#birthday').removeClass('hasValue'); } }) 

Esto es para eliminar el marcador de posición cuando se da un valor.

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

En foco o si .hasValue, quite el marcador de posición y su margen.

CSS

 input[type="date"] {position: relative;} input[type="date"]:before { position: absolute;left: 0px;top: 0px; content: "Enter DOB"; color: #999; width: 100%;line-height: 32px; } input[type="date"]:valid:before {display: none;}