HTML | Propiedad de valor de fecha y hora de entrada DOM

La propiedad de valor de fecha y hora de entrada se utiliza para establecer o devolver el valor del atributo de valor de un campo de fecha y hora. 
El atributo de valor Input Datetime se puede utilizar para especificar una fecha y una hora para el campo de fecha y hora.

Sintaxis: 

  • Para devolver la propiedad de valor:
datetimeObject.value
  • Para establecer la propiedad de valor:
datetimeObject.value = YYYY-MM-DDThh:mm:ssTZD

El valor de la propiedad: 

  • AAAA-MM-DDThh:mm:ssTZD: Se utiliza para especificar la fecha y/o la hora. 
    • AAAA: Especifica el año.
    • MM: Especifica el mes.
    • DD: Especifica el día del mes.
    • T: Especifica el separador si también se ingresa el tiempo.
    • hh: Especifica la hora.
    • mm: Especifica los minutos.
    • ss: Especifica los segundos.
    • TZD: Especifica el Designador de Zona Horaria.

Valores devueltos: Devuelve un valor de string que representa el valor de fecha y hora para el campo Fechahora. 

El siguiente programa ilustra la propiedad de valor de fecha y hora:

Ejemplo 1: Devolver el valor de la fecha y la hora para el campo de fecha y hora. 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Input Datetime value 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 value Property</h2>
    <br> Date Of Birth:
    <input type="datetime" id="Test_Datetime" value="2019-11-11">
 
     
 
 
 
<p>To return a date and time for the datetime field,
    double-click the "Set Date And Time" button.</p>
 
 
 
 
 
    <button ondblclick="My_Datetime()">Return Date And Time</button>
 
    <p id="test"></p>
 
 
 
 
 
    <script>
        function My_Datetime() {
            var g = document.getElementById("Test_Datetime").value;
            document.getElementById("test").innerHTML = g;
                                         
        }
    </script>
 
</body>
 
</html>

Antes:

Después:

Ejemplo 2: establecer una fecha y una hora para un campo de fecha y hora.  

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Input Datetime value 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 value Property</h2>
    <br> Date Of Birth:
    <input type="datetime" id="Test_Datetime">
 
     
 
 
 
<p>To set a date and time for the datetime field,
      double-click the "Set Date And Time" button.</p>
 
 
 
 
 
    <button ondblclick="My_Datetime()">Set Date And Time</button>
 
    <p id="test"></p>
 
 
 
 
 
    <script>
        function My_Datetime() {
            document.getElementById("Test_Datetime").value =
                                         "2019-02-04T12:32Z";
        }
    </script>
 
</body>
 
</html>
                                        

Producció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 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *