html5 - tipo - poner placeholder en input date

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

Question

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

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

Answer 1

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

Datos de entrada 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;
}

Answer 2

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

El problema se debe a que el navegador se comporta de acuerdo con el tipo de entrada al hacer clic (= texto). Por lo tanto, es necesario dejar de enfocarse en el elemento de entrada (desenfoque) y luego reiniciar el enfoque mediante programación en el elemento de entrada que se definió como tipo = fecha por JS en el primer paso. Teclado muestra en phonenumber-mode.

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

Answer 3

Ampliando la solución de @ mvp con JavaScript no intrusivo 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'') }
)

Answer 4

Basándome en las respuestas de deadproxor y Alessio, solo intentaría usar 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 no válido, si su entrada es obligatoria.

EDITAR

Aquí el código si está utilizando requerido 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>

Answer 5

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] si es necesario. Si haces esto, aparecerá el marcador de posición.

Answer 6

De acuerdo con el estándar HTML :

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

Answer 7

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

Antes que nada, 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 que el marcador de posición normal, entonces 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 usó un atributo birthchild birth viewchild, para poder acceder a esta entrada desde el componente. Y definió una expresión angular en el atributo 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'' :
'''';
}
}

Answer 8

Encontré una mejor manera de manejar la comprensión básica del usuario con mouseover y abrir datepicker 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 de webkit y hágala 100% amplia 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;
}

Answer 9

Entonces, lo que he decidido hacer finalmente está aquí y está funcionando 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

Answer 10

Esto funciona para mi:

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

Answer 11

Estoy trabajando con el marco iónico y la solución provista por @Mumthezir es casi perfecta. En caso de que alguien tenga el mismo problema que yo (después del cambio, la entrada sigue enfocada y al desplazarse, el valor simplemente desaparece) Así que agregué el cambio para hacer input.blur ()

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

Answer 12

Extensión de la versión de Mumthezir que funciona mejor en iOS, según el comentario de Mathijs Segers:

(Utiliza algunos AngularJS pero espero que entiendas la idea).

<label style=''position:relative''>
<input type="date"
name="dateField"
onfocus="(this.type=''date'')"
ng-focus="dateFocus=true" ng-blur="dateFocus=false" />
<span ng-if=''!dateFocus && !form.date'' class=''date-placeholder''>
Enter date
</span>
</label>

Debido a que todo está envuelto en una label , al hacer clic en el span se enfoca automáticamente la input .

CSS:

.date-placeholder {
display: inline-block;
position: absolute;
text-align: left;
color: #aaa;
background-color: white;
cursor: text;
/* Customize this stuff based on your styles */
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
line-height: 32px;
padding-left: 12px;
}

Answer 13

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

Answer 14

Hola, me encontré con el mismo problema anoche y descubrí que una combinación de todas tus respuestas y un poco de magia brillante están 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 en sí. Hice esto solo disponible desde un ancho de ventana de 1024 px, ¿por qué voy a contar más tarde? Y ahora el jQuery , después de refactorizar un par de veces, obtuve este código que verificará cada cambio si hay un valor establecido o no, si no lo es (re) agregará la clase, viceversa .

CONOCER 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 ''dd.mm.aaaa'' predeterminada. También podría 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 otros problemas más pequeños, así que fui con solo no mostrarlo en ''mayor pantallas

¡Espero que ayude! cheerio!

Answer 15

Lo usé en mi CSS:

input[type="date"]:before{
color:lightgray;
content:attr(placeholder);
}
input[type="date"].full:before {
color:black;
content:""!important;
}

y pon algo así en javascript:

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

funciona para dispositivos móviles (Ios8 y Android). Pero utilicé la máscara de entrada jquery para el escritorio con el tipo de texto de entrada. Esta solución es una buena manera si tu código se ejecuta en ie8.

Answer 16

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

Incluso me gusta la idea 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 lo que está sucediendo arriba

Answer 17

Para resumir el problema de las entradas de fecha:

• Tienes que mostrarlos (es decir, evitar la visualización: ninguno) de lo contrario, la IU 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 IU específica);
• convertirlos a otro tipo de entrada para el tiempo desenfocado permite marcadores de posición, pero el enfoque activa la interfaz de usuario (teclado) de entrada incorrecta, al menos por un tiempo pequeño, 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 esos requisitos es utilizar el truco habitual para dar estilo a los elementos de formulario nativos: asegúrese de que el elemento se muestre pero no sea visible y muestre el 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 ser diseñado como:

.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, enfoque) 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 en vivo, puede ejecutar esta versión angular desde su tableta o dispositivo móvil.

Answer 18

Podría usar el atributo "valor", por ejemplo:

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

Answer 19

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

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

Answer 20

Si solo te preocupa el móvil:

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

Answer 21

Si usa el método de mvp, pero agrega el evento onblur para cambiarlo de nuevo a un campo de texto, el texto del marcador de posición aparece nuevamente cuando el campo de entrada pierde 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.

Answer 22

Terminé usando lo siguiente.

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

Answer 23

Usted puede

1. configurarlo como texto tipo
2. convertir a la fecha en foco
3. haz clic en él
4. ... dejar que el usuario verifique la fecha
5. en 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" />

Answer 24

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

Answer 25

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

Código revisado de mumthezir