El atributo de marcador de posición no funciona con el tipo de entrada Fecha, así que coloque cualquier valor como marcador de posición en el tipo de entrada Fecha. Puede usar onfocus=”(this.type=’date’) dentro del campo de entrada. Debido a que debe tener un valor de marcador de posición personalizado para el tipo de entrada «fecha», y tiene un calendario desplegable desde donde el usuario puede seleccionar la fecha.
Sintaxis:
onfocus="(this.type='date')"
El siguiente ejemplo ilustra el enfoque anterior:
Ejemplo 1:
<!DOCTYPE html> <html> <head> <title> Placeholder value for input type="Date" </title> </head> <body style="text-align:center;"> <h1 style="color:green;">GeeksforGeeks</h1> <h4>Placeholder value for input type="Date"</h4> <!-- using onfocus="(this.type='date')" --> Starting Date: <input type="text" placeholder="MM/DD/YYYY" onfocus="(this.type='date')"> <!-- Not using onfocus="(this.type='date')" --> Ending Date: <input type="text" placeholder="MM/DD/YYYY"> </body> </html>
Producción:
Nota: Después de hacer clic en el campo izquierdo, obtenemos el cuadro dd/mm/yyyy, y obtenemos el menú desplegable del calendario después de hacer clic en él nuevamente. Esto se debe a que el cuadro de entrada es en realidad una entrada de «texto», pero al hacer clic en él (es decir, enfocándonos en él), obtenemos la entrada del tipo de datos. Pero el campo derecho es una entrada de texto normal archivada.
Ejemplo 2: cuando pierde el foco en la fecha, el campo de fecha vuelve a cambiar a un campo de texto.
<!DOCTYPE html> <html> <head> <title> Placeholder value for input type="Date" </title> </head> <body style="text-align:center;"> <h1 style="color:green;">GeeksforGeeks</h1> <h4>Placeholder value for input type="Date"</h4> <!-- using onfocus="(this.type='date')" --> Starting Date: <input type="text" placeholder="MM/DD/YYYY" onfocus="(this.type='date')" onblur="(this.type='text')"> <!-- Not using onfocus="(this.type='date')" --> Ending Date: <input type="text" placeholder="MM/DD/YYYY"> </body> </html>
Producción:
- Como podemos ver, podemos modificar el texto del marcador de posición según sea necesario. Con un clic, obtenemos el campo de entrada de fecha estándar y podemos ingresar la fecha:
- Después de ingresar la fecha, se ve de la siguiente manera:
- Al perder el foco, vuelve a cambiar a un campo de texto debido al evento onblur que hemos introducido:
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .