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