La propiedad Input Datetime required se usa para verificar si un campo de fecha y hora debe completarse o no antes de enviar un formulario.
Sintaxis:
- Para devolver la propiedad requerida:
datetimeObject.required
- Para establecer la propiedad requerida:
datetimeObject.required = true|false
El valor de la propiedad:
- verdadero|falso: se utiliza para especificar si un campo de fecha y hora debe ser una parte obligatoria del envío de un formulario o no. Es falso por defecto.
Valores devueltos: devuelve un valor booleano que representa que el campo de fecha y hora de entrada es obligatorio o no.
El siguiente programa ilustra la propiedad requerida de fecha y hora:
Ejemplo 1: averiguar si un campo de fecha y hora debe completarse antes de enviar un formulario o no.
html
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime required Property in HTML</title>
<style>
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Input Datetime required Property</h2>
<br>
<form action="/initials.php">
Date of Birth:
<input type="datetime" id="Test_Datetime" name="DOB" required>
<input type="submit">
</form>
<p>To find out if the datetime field must be filled out before
submitting the form, double-click the "Check" button.</p>
<button ondblclick="My_Datetime()">Check</button>
<p id="test"></p>
<script>
function My_Datetime() {
var d = document.getElementById("Test_Datetime").required;
document.getElementById("test").innerHTML = d;
}
</script>
</body>
</html>
Salida:
Antes:
Después de hacer clic en el botón:
Ejemplo 2: Establecer el valor del atributo requerido
HTML
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime required Property in HTML</title>
<style>
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Input Datetime required Property</h2>
<br>
<form action="/initials.php">
Date of Birth:
<input type="datetime"
id="Test_Datetime"
name="DOB"
required>
<input type="submit">
</form>
<p>To set the autofocus property,
double-click the "set" button.</p>
<button ondblclick="My_Datetime()">Setk</button>
<p id="test"></p>
<script>
function My_Datetime() {
var d = document.getElementById("Test_Datetime").required =
"false";
document.getElementById("test").innerHTML =
"The value of the required attribute was changed to:" + d;
}
</script>
</body>
</html>
Producción:
Antes:
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 web compatibles
- safari de manzana
- explorador de Internet
- Firefox
- Google Chrome
- Ópera
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