No se muestra el marcador de posición para el tipo de entrada = campo "fecha"


120

Estoy haciendo una aplicación phonegap. Cuando intento type="date"el campo de entrada como se muestra a continuación, muestra el selector de fecha en el iPhone como esperaba, pero no muestra el marcador de posición que le he dado. Encontré el mismo problema aquí en SO, pero no hay solución en ningún lado.

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


1
Posible duplicado del marcador
Elyor

Respuestas:


156

Puede que no sea apropiado ... pero me ayudó.

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


7
Parece una buena característica, sin embargo, al hacer clic en el campo se muestra el teclado en pantalla en lugar del selector de fechas. Buen intento.
Mathijs Segers

2
@MathijsSegers ¿has encontrado una solución que NO muestre el teclado? Probé estas soluciones aquí, pero en iOS 6, 7 y 8, muestra el teclado por un tiempo y luego muestra el selector de fecha.
Jabel Márquez

7
Bueno, sí, repugnante. Agregué un intervalo con el aspecto de un campo de texto en el campo de fecha que lo hace visible solo en ios. El índice z del selector de fechas era más alto que el intervalo, pero alfa 0.01 en css. Al hacer clic, revelaría el campo de fecha. Funciona pero es un poco desagradable.
Mathijs Segers

4
He notado que esto no funciona en dispositivos iOS, ¿alguien tiene una solución para esto?
Mikkel Fennefoss

3
Para las aplicaciones cordova, use el evento onmouseenter en lugar del evento onfocus , luego, el selector de fecha se abrirá con el primer clic
yo

88

Si usa el método de mvp pero agrega el evento onblur para volver a cambiarlo a un campo de texto, de modo que el texto del marcador de posición aparezca nuevamente cuando el campo de entrada pierda el foco. Simplemente hace que el truco sea un poco más agradable.

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

Espero que esto ayude.


1
¡Gracias! ¡Esto funcionó perfectamente para mí! ¿Puedo sugerir que desactive el campo y luego elimine la desactivación al hacer clic? Estaba trabajando en Angular y escribí una función de alcance para cambiar el tipo y eliminar la desactivación, detendrá errores extraños cuando de alguna manera se enfoque en el campo de texto
Torch2424

2
Solución mucho mejor. Gracias
Profstyle

3
Puedo ver el marcador de posición cuando está desenfocado, pero para obtener el selector de fecha, necesito hacer clic en él dos veces. ¿Cómo puedo resolverlo?
Suraj

1
La mejor solución para eso que he encontrado, muchas gracias
Fran Sandi

3
¡bonito! solución muy apropiada. : DI espero que pronto HTML5 o HTML6 permitan marcadores de posición en las fechas. Pero por ahora, esta es una muy buena solución. : D
jehzlau

35

Terminé usando lo siguiente.

Con respecto a los comentarios de Firefox : generalmente, Firefox no mostrará ningún marcador de posición de texto para la fecha del tipo de entrada. Pero como esta es una pregunta de Cordova / PhoneGap, esto no debería ser motivo de preocupación (a menos que desee desarrollar contra 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':'')">


1
Esta versión no se <input type="date" placeholder="MY PLACEHOLDER" onchange="this.classList.toggle('has-value',this.value);">
mete

buena respuesta hermano, eres el mejor. Estoy buscando la respuesta hasta el dolor de cabeza. gracias
Roman Traversine

Usé esto y agregué input[type="date"]:not(:focus):not(.has-value):beforepara mostrar el formato mientras la entrada está enfocada (para las personas que
escriben

20

Usé esto en mi css:

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

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

y poner algo como esto en javascript:

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

Me funciona para dispositivos móviles (Ios8 y Android). Pero usé jquery inputmask para escritorio con tipo de texto de entrada. Esta solución es una buena forma si su código se ejecuta en ie8.


¡La mejor opción aquí para mí en Android! ¡Buena esa!
Zappescu

¡Excelente! Solo tiene que establecer el estado inicial de la clase "completa", por ejemplo, si está editando una fecha existente.
bjnord

Sugiero que lo usemos color: #aaapara una apariencia similar a un marcador de posición en iOS. color: lightgrayes demasiado ligero.
Rockallite

¡Gran respuesta! El código hace que jQuery sea un poco más legible usando toggleClass: $("#myel").on( "input" , function(){ $(this).toggleClass( "full" , $(this).val().length > 0 ); });
Mike

18

A partir de hoy (2016), he usado con éxito esos 2 fragmentos (además, funcionan muy bien con Bootstrap4).

Ingrese datos a la izquierda, marcador de posición a la izquierda

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

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

El marcador de posición desaparece al hacer clic

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

Funciona limpio y sin problemas.
user12379095

11

Según el estándar HTML :

Los siguientes atributos de contenido no deben especificarse y no se aplican al elemento: accept, alt, check, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, minlength, multiple, pattern, placeholder , size, src y ancho.


¿entonces, qué debería hacer?
Mumthezir VP

2
@mvp, no debe usar el atributo de marcador de posición y colocar un elemento <label> asociado a la entrada [type = date].
int32_t

¿Debería verse como un marcador de posición?
Mumthezir VP

2
Las etiquetas y los marcadores de posición son dos cosas diferentes. No entiendo lo que está sugiriendo aquí.
Adeynack

2
Ésta es la única respuesta correcta. +1. ¡Me pregunto qué pasa con la gente! Acabo de encontrar este seguimiento de un objetivo engañado y me sorprendió la cantidad de votos en la respuesta aceptada :( Las especificaciones dicen claramente que las palabras no deben especificarse y no se aplican , aún así, la gente quiere calzar esto en sus aplicaciones web de mierda. .
Abhitalks

10

Esto funciona para mi:

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

3
El único problema con esto es eliminar el marcador de posición cuando ha seleccionado una fecha. El marcador de posición no se quita.
egr103

En iOS 9.3, Safari hará que el :afterpseudo elemento desaparezca cuando se seleccione una fecha. Así que no es necesario eliminar el marcador de posición
Rockallite

2
Simplemente agregue onfocus="(this.placeholder='')"para eliminar el marcador de posición una vez que se seleccione la fecha.
cíclico

¡¡¡Excelente!!! También funcionó para mí, agregando el enfoque que @RobbieNolan sugirió que funcionó perfectamente.
Bruno De Faria

9

Usé esto con 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');
    });
});

por favor agregue explicación de por qué se le ayudará
Zohar

@Davide Russo Abram: Por favor, agregue una explicación, ¿cómo funciona?
jsduniya

9

Según las respuestas de deadproxor y Alessio, intentaría usar solo CSS:

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

Y si necesita hacer que el marcador de posición sea invisible después de escribir algo en la entrada, podríamos intentar usar los selectores: válido y: inválido, si su entrada es obligatoria.

EDITAR

Aquí el código si está utilizando required en su entrada:

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>


9

Encontré una mejor manera de resolver su problema. Creo que esto te ayudará. cuando está enfocado, el cuadro cambiará el tipo en texto para que muestre su marcador de posición. cuando se enfoca en, su tipo cambia a fecha, por lo que se mostrará la vista de calendario.

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

¡Bienvenido a Stack Overflow! Intente proporcionar una descripción agradable sobre cómo funciona su solución. Ver: ¿Cómo escribo una buena respuesta? . Gracias
sɐunıɔ ןɐ qɐp

6

Tomé la idea de jbarlow, pero agregué un if en la función onblur para que los campos solo cambien su tipo si el valor está vacío

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

3

Al abordar el problema en la respuesta correcta actual "al hacer clic en el campo se muestra el teclado en pantalla en lugar del selector de fechas":

El problema se debe a que el navegador se comporta de acuerdo con el tipo de entrada al hacer clic en (= texto). Por lo tanto, es necesario dejar de enfocarse en el elemento de entrada (desenfoque) y luego reiniciar el enfoque programáticamente en el elemento de entrada que JS definió como tipo = fecha en el primer paso. El teclado se muestra en modo de número de teléfono.

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

Incluso con este código, en iOS (probado en iOS 6, 7 y 8) muestra el teclado por un momento y luego muestra el selector de fecha. ¿Hay alguna forma de NO mostrar el teclado?
Jabel Márquez

@ JabelMárquez Puedes usar readonly = "true" para evitar que el teclado se muestre ... así que algo como esto: <input type = "text" name = "date" value = "" placeholder = "Date" readonly = "true" onfocus = "this.removeAttribute ('readonly'); this.type = 'date'; this.setAttribute ('onfocus', ''); this.blur (); this.focus ();">. Me ha funcionado.
pschueller

3

prueba mi solución. Utilizo el atributo 'requerido' para saber si la entrada está llena y, si no, muestro el texto del atributo 'marcador de posición'

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

1
el dd / mm / aaaa todavía se muestra en Chrome (70).
schankam

2

Me tomó un tiempo descifrar este, dejarlo como type="text"y agregar onfocus="(this.type='date')", tal como se muestra arriba.

Incluso me gusta la idea de onBlur mencionada anteriormente

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

Espero que esto ayude a cualquiera que no haya entendido bien lo que está sucediendo arriba


2

Para resumir el problema de las entradas de fecha:

  • Debe mostrarlos (es decir, evitar mostrar: ninguno) de lo contrario, la interfaz de usuario de entrada no se activará;
  • un marcador de posición es contradictorio con ellos (según la especificación, y porque tienen que mostrar una interfaz de usuario específica);
  • convertirlos a otro tipo de entrada durante el tiempo no enfocado permite marcadores de posición, pero el enfoque activa la interfaz de usuario de entrada incorrecta (teclado), al menos por un tiempo breve, porque los eventos de enfoque no se pueden cancelar.
  • insertar (antes) o agregar (después) contenido no impide que se muestre el valor de entrada de fecha.

La solución que encontré para cumplir con esos requisitos es usar el truco habitual para diseñar elementos de formularios nativos: asegúrese de que el elemento se muestre pero no esté visible, y muestre su estilo esperado a través de su etiqueta asociada . Normalmente, la etiqueta se mostrará como la entrada (incluido un marcador de posición), pero sobre ella.

Entonces, un HTML como:

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

Podría tener el estilo:

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

Cualquier evento (clic, foco) en dicha etiqueta asociada se reflejará en el campo mismo y, por lo tanto, activará la interfaz de usuario de entrada de fecha.

Si desea probar una solución de este tipo en vivo, puede ejecutar esta versión Angular desde su tableta o dispositivo móvil.


2

Entonces, lo que he decidido hacer finalmente está aquí y funciona bien en todos los navegadores móviles, incluidos iPhones y Androids.

$(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>

Fecha


2

Estoy trabajando con ionicframework y la solución proporcionada por @Mumthezir es casi perfecta. En caso de que alguien tuviera el mismo problema que yo (después del cambio, la entrada todavía está enfocada y cuando se desplaza, el valor simplemente desaparece) Así que agregué onchange para hacer input.blur ()

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

2

Usted puede

  1. configurarlo como texto de tipo
  2. convertir a la fecha en foco
  3. haz clic en él
  4. ... dejar que el usuario verifique la fecha
  5. en el cambio almacenar el valor
  6. establecer entrada para escribir texto
  7. establecer el valor de entrada del tipo de texto en el valor almacenado

Me gusta esto...

$("#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

Encontré una mejor manera de manejar la comprensión básica del usuario con el mouse sobre y abriendo el selector de fecha al hacer 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">

También oculte la flecha del webkit y hágalo 100% ancho para cubrir el 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;
}

1

Desde el punto de vista angular, logré poner un marcador de posición en el elemento de fecha de tipo de entrada.

En primer lugar, definí el siguiente CSS:

.placeholder {
    color: $text-grey;
  }

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

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

La razón por la que esto es necesario es que si el contenido de css3 tiene un color diferente al del marcador de posición normal, tuve que usar uno común.

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

Luego, en la plantilla se utilizó un atributo viewchild birthDate, para poder acceder a esta entrada desde el componente. Y definimos una expresión angular en el atributo del marcador de posición, que decidirá si mostramos el marcador de posición o no. Este es el mayor inconveniente de la solución, es que debe administrar la visibilidad del marcador de posición.

@ViewChild('birthDate') birthDate;

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

1

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

Código revisado de mumthezir


1

Me sorprende que solo haya una respuesta con un enfoque similar al que usé.
Me inspiré en el comentario de @ Dtipson sobre la respuesta de @Mumthezir VP.

Utilizo dos entradas para esto, una es una entrada falsa con la type="text"que configuro el marcador de posición, la otra es el campo real con type="date".
En el mouseenterevento en su contenedor, oculto la entrada falsa y muestro la real, y hago lo contrario en el mouseleaveevento. Obviamente, dejo visible la entrada real si tiene un valor establecido.
Escribí el código para usar Javascript puro, pero si usa jQuery (yo lo hago), es muy fácil "convertirlo".

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

Probé esto también en un teléfono Android y funciona, cuando el usuario toca el campo, se muestra el selector de fecha. Lo único es que, si la entrada real no tenía valor y el usuario cierra el selector de fechas sin elegir una fecha, la entrada permanecerá visible hasta que toque fuera de ella. No hay ningún evento que escuchar para saber cuándo se cierra el selector de fechas, así que no sé cómo resolver eso.

No tengo un dispositivo iOS para probarlo.


0

Ampliando la solución de @ mvp con un javascript discreto en mente, este es el enfoque:

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

Creo que todo lo que tienes que hacer es cambiar el modelo para decir que el campo de fecha es anulable y luego poner [Obligatorio] en él si es necesario. Si hace esto, aparece el texto del marcador de posición.


0

Oye, me encontré con el mismo problema anoche y descubrí que una combinación de todas tus respuestas y algo de magia brillante está haciendo un buen trabajo:

El HTML:

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

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

El jQuery:

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

Explicación: Entonces, lo que está sucediendo aquí, en primer lugar en el HTML , esto es bastante sencillo simplemente haciendo una entrada de fecha HMTL5 básica y estableciendo un marcador de posición. Siguiente parada: CSS , estamos configurando un: before-pseudo-element para falsificar nuestro marcador de posición, solo toma el atributo del marcador de posición de la entrada misma. Hice esto solo disponible desde un ancho de ventana de 1024px, por qué lo diré más tarde. Y ahora jQuery , después de refactorizar un par de veces, se me ocurrió este fragmento de código que verificará cada cambio si hay un valor establecido o no, si no es así, (re) agregará la clase, viceversa .

CONOZCA PROBLEMAS:

  • Hay un problema en Chrome con su selector de fecha predeterminado, para eso es la consulta de medios. Agregará el marcador de posición enfrente de la cosa predeterminada 'dd.mm.yyyy'. También puede establecer el marcador de posición de la entrada de fecha en 'fecha:' y ajustar el color en caso de que no haya ningún valor dentro de la entrada ... para mí, esto resultó en algunos otros problemas más pequeños, así que decidí no mostrarlo en 'más grande 'pantallas

¡Espero que ayude! cheerio!


0

Si solo le preocupa el móvil:

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

0

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

Publicar código sin ninguna explicación no es bienvenido aquí. Edite su publicación.
Cid

0

Aquí hay otro posible truco que no usa js y sigue usando css content. Tenga en cuenta que como :afterno es compatible con algunos navegadores para las entradas, debemos seleccionar la entrada de otra manera, lo mismo paracontent 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

Esto funciona para mí usando esto como elemento de entrada:

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

Este CSS muestra un marcador de posición permanente. El valor seleccionado se muestra después del marcador de posición.

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 */
    }
}

Utilizo esta solución para un formulario de Wordpress con el complemento contact-form-7.


este prefijo moz no funciona en FF para mí: /
saomi

0

Ninguna de las soluciones me funcionaba correctamente en Chrome en iOS 12 y la mayoría de ellas no están diseñadas para hacer frente a posibles entradas de fecha múltiples en una página. Hice lo siguiente, que básicamente crea una etiqueta falsa sobre la entrada de fecha y la elimina al tocarla. También eliminaré la etiqueta falsa si el ancho de la ventana gráfica supera los 992 px.

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;
    }
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.