El objeto Fecha de entrada se utiliza para representar un elemento HTML <input> del tipo =”fecha” .
El objeto de fecha de entrada es un objeto nuevo en HTML5.
Sintaxis:
- Para crear un elemento <input> con el tipo = «fecha»:
var gfg = document.createElement("input") gfg.setAttribute("type", "date"); - Para acceder a un elemento <input> con el tipo = «fecha»:
document.getElementById("date_object")
Valores de propiedad:
| Valor | Descripción |
|---|---|
| autocompletar | Se utiliza para establecer o devolver el valor del atributo de autocompletar de un campo de fecha y hora. |
| enfoque automático | Se utiliza para establecer o devolver si un campo de fecha y hora debe enfocarse automáticamente cuando se carga la página. |
| valor por defecto | Se utiliza para establecer o devolver el valor predeterminado de un campo de fecha y hora. |
| desactivado | Se utiliza para establecer o devolver si un campo de fecha y hora está deshabilitado o no. |
| forma | Se utiliza para devolver una referencia al formulario que contiene el campo de fecha y hora. |
| lista | Se utiliza para devolver una referencia a la lista de datos que contiene el campo de fecha y hora. |
| máximo | Se utiliza para establecer o devolver el valor del atributo máximo del campo de fecha y hora. |
| min | Establece o devuelve el valor del atributo min del campo de fecha y hora. |
| nombre | Se utiliza para establecer o devolver el valor del atributo de nombre de un campo de fecha y hora. |
| solo lectura | Se utiliza para establecer o devolver si el campo de fecha y hora es de solo lectura o no. |
| requerido | Se utiliza para establecer o devolver si el campo de fecha y hora debe completarse antes de enviar un formulario. |
| paso | Se utiliza para establecer o devolver el valor del atributo de paso del campo de fecha y hora. |
| escribe | Se utiliza para devolver qué tipo de elemento de formulario es el campo de fecha y hora. |
| valor | Se utiliza para establecer o devolver el valor del atributo de valor de un campo de fecha y hora. |
Métodos de objeto de fecha de entrada:
- stepDown() : se utiliza para disminuir el valor del campo de fecha y hora en un número específico.
- stepUp() : se utiliza para incrementar el valor del campo de fecha y hora en un número específico.
- select() : Se utiliza para seleccionar el contenido del campo Fecha de entrada.
Los siguientes programas ilustran el Objeto Fecha:
Ejemplo-1: Crear un elemento <input> con el tipo =”fecha”.
<!DOCTYPE html>
<html>
<head>
<title>Input Date Object</title>
<style>
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Input Date Object</h2>
<p>Double Click the "Create" button
to create a Date field.
</p>
<button ondblclick="Create()">Create
</button>
<script>
function Create() {
// create input element type date.
var c = document.createElement("INPUT");
c.setAttribute("type", "date");
c.setAttribute("value", "2019-07-02T25:32Z");
document.body.appendChild(c);
}
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo-2: Acceso a un elemento <input> con el tipo = «fecha».
<!DOCTYPE html>
<html>
<head>
<title>Input Date Object</title>
<style>
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Input Date Object</h2>
<input type="date"
id="test"
value="2019-07-02T25:32Z">
<p>Double Click the "Access"
button to access a Date field.</p>
<button ondblclick="Access()">Access
</button>
<p id="check"></p>
<script>
function Access() {
// Accessing input element type =”date”
var a = document.getElementById(
"test").value;
document.getElementById(
"check").innerHTML = a;
}
</script>
</body>
</html>
Producción:
Después de hacer doble clic en el botón
Navegadores compatibles:
- Ópera
- Firefox
- Google Chrome
- safari de manzana
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA