ingenieradesistemas
499751083497328
Cargando...

Implementación de selector de fecha en HTML5



Una de las potencialidades de HTML5 es la posibilidad de tener el selector de fecha tan solo con agragar una línea de código en el input tal como se había trabajado con la validación de campos, solo es necesario agregar type="date" y tenemos ya de forma interactiva las opciones para seleccionar la fecha actual, anterior o posterior.

Implementación de selector de fecha en HTML5

El código es como sigue:

<!DOCTYPE html>
<html>
      <head>
       <title>Validacion de campos</title>
       <style type="text/css">
       [required] {
       border-color: green;
       box-shadow: 0px 0px 5px green;
       }

       :invalid {
        border-color: red;
        box-shadow: 0px 0px 5px red;
       }
       </style>
      </head>
      <body>
       <table>
        <tr>
         <td>
          Nombre
         </td>
         <td>
          <input type="text" required>

         </td>
        </tr>
        <tr>
         <td>
          Apellido
         </td>
         <td>
          <input type="text">
         </td>
        </tr>
        <tr>
         <td>
          Email
         </td>
         <td>
          <input type="email" value="usuario@dominio.com"/>
         </td>
        </tr>
        <tr>
         <td>
          Fecha
         </td>
         <td>
          <input type="date" value="16/12/2016">
         </td>
        </tr>
       </table>
      </body>
</html>

Y el resultado en pantalla es así:

Implementación de selector de fecha en HTML5



HTML5 y CSS3 892984889347702739

Publicar un comentario Default Comments

emo-but-icon

Página principal item

Los apuntes en tu correo

Síguenos en Facebook

Apuntes aleatorios