La propiedad Input Datetime readOnly se usa para establecer o devolver si un campo de fecha y hora debe ser de solo lectura o no.
El campo de solo lectura se puede tabular, resaltar y se puede usar para copiar texto, pero no se puede modificar más. El atributo de solo lectura de HTML se refleja en la propiedad Input Datetime readOnly.
Sintaxis:
- Para devolver la propiedad readOnly
datetimeObject.readOnly
- Para configurar la propiedad readOnly:
datetimeObject.readOnly = true|false
El valor de la propiedad
- true|false: se utiliza para especificar si el campo de fecha y hora será de solo lectura o no. Es falso por defecto.
Valores de retorno: Devuelve un valor booleano que representa que el campo de fecha y hora sería de solo lectura o no.
El siguiente programa ilustra la propiedad Datetime readOnly:
Establecer un campo de fecha y hora en solo lectura.
html
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime readOnly 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 readOnly Property</h2>
<br> Date Of Birth:
<input type="datetime" id="Test_Datetime" name="DOB">
<p>To set the date time to read-only,
double-click the "Set Read-Only" button.</p>
<button ondblclick="My_Datetime()">Set Read-Only</button>
<p id="test"></p>
<script>
function My_Datetime() {
document.getElementById("Test_Datetime").readOnly = true;
}
</script>
</body>
</html>
Producción:
Después de hacer clic en el botón
Devolviendo la lectura [solo para el campo de fecha y hora.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime readOnly 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 readOnly Property</h2>
<br> Date Of Birth:
<input type="datetime" id="Test_Datetime" name="DOB">
<p>To return the date time to read-only,
double-click the "Return Read-Only" button.</p>
<button ondblclick="My_Datetime()">Return Read-Only</button>
<p id="test"></p>
<script>
function My_Datetime() {
var g = document.getElementById("Test_Datetime").readOnly;
document.getElementById("test").innerHTML = g;
}
</script>
</body>
</html>
Antes:
Después:
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