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!