El objeto Input Datetime en HTML DOM se utiliza para representar un elemento de entrada HTML con type= “datetime” . Se puede acceder al elemento de entrada con type= “datetime” usando el método getElementById() .
Sintaxis:
- Se utiliza para acceder al objeto de fecha y hora de entrada.
document.getElementById("id"); - Se utiliza para crear elementos de entrada.
document.createElement("input");
Propiedades del objeto de fecha y hora de entrada:
| Propiedad | Descripción |
|---|---|
| escribe | Esta propiedad se utiliza para devolver qué tipo de elemento de formulario es el campo de fecha y hora. |
| valor | Esta propiedad se utiliza para establecer o devolver el valor del atributo de valor de un campo de fecha y hora. |
| autocompletar | Esta propiedad se utiliza para establecer o devolver el valor del atributo de autocompletar de un campo de fecha y hora. |
| enfoque automático | Esta propiedad se usa para establecer o devolver el campo Fecha y hora para que se enfoque automáticamente cuando se carga la página. |
| valor por defecto | Esta propiedad se utiliza para establecer o devolver el valor predeterminado de un campo de fecha y hora. |
| desactivado | Esta propiedad se usa para establecer o devolver si un campo de fecha y hora está deshabilitado o no. |
| forma | Esta propiedad se utiliza para devolver la referencia al formulario que contiene el campo Fecha y hora. |
| lista | Esta propiedad se utiliza para devolver una referencia a la lista de datos que contiene el campo de fecha y hora. |
| máximo | Esta propiedad se utiliza para establecer o devolver el valor del atributo máximo de un campo de fecha y hora. |
| min | Esta propiedad se utiliza para establecer o devolver el valor del atributo min de un campo de fecha y hora. |
| nombre | Esta propiedad se utiliza para establecer o devolver el valor del atributo de nombre de un campo de fecha y hora. |
| marcador de posición | Esta propiedad se utiliza para establecer o devolver el valor del atributo de marcador de posición de un campo de fecha y hora. |
| solo lectura | Esta propiedad se utiliza para establecer o devolver si el campo de fecha y hora es de solo lectura o no. |
| requerido | Esta propiedad se usa para establecer o devolver si el campo Fecha y hora debe completarse antes de enviar un formulario. |
| paso | Esta propiedad se utiliza para establecer o devolver el valor del atributo de paso de un campo de fecha y hora. |
Métodos de objetos de fecha y hora de entrada:
| Método | Descripción |
|---|---|
| Seleccione() | Este método se utiliza para seleccionar el contenido del campo de texto de fecha y hora. |
| paso abajo() | Este método se utiliza para disminuir el valor de la fecha y hora de entrada en un número específico. |
| aumentar() | Este método se utiliza para incrementar el valor de la fecha y hora de entrada en un número específico. |
Ejemplo-1: Devuelva la fecha y la hora usando “document.getElementById(“id”);” .
<!DOCTYPE html>
<html>
<body>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Input Datetime Object</h2>
<input type="datetime"
id="myDatetime"
value="2018-02-07 10:15 AM ">
<p>Click the button to get the date and time of the datetime field.</p>
<button onclick="myFunction()">
Click Here!
</button>
<p id="demo"></p>
<script>
function myFunction() {
// Get datetime value.
var x =
document.getElementById(
"myDatetime").value;
document.getElementById(
"demo").innerHTML = x;
}
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo-2: Crear elemento «fechahora»
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Input Datetime Object</h2>
<p>
Click the button to create a Datetime field.
</p>
<button onclick="myFunction()">
Click Here!
</button>
<script>
function myFunction() {
// Create datetime element and
// set attributes.
var x = document.createElement("INPUT");
x.setAttribute("type", "datetime");
x.setAttribute("value", "2018-02-07 10:15 AM");
document.body.appendChild(x);
}
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Nota: El elemento <input type=”datetime”> no muestra ningún campo/calendario de fecha y hora en ninguno de los principales navegadores, excepto Safari.
Navegadores compatibles:
- Google Chrome
- Mozilla Firefox
- Borde
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por divyatagoel0709 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA