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

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

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

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

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.

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':'')">

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.

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

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.

Esto funciona para mi:

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

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

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>

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

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

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();">

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
}

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

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.

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

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

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

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

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

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

Código revisado de mumthezir

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.

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

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.

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!

Si solo le preocupa el móvil:

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

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>

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.

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