Cómo agregar un fechlepicker en formato usando HTML

Los formularios son una herramienta importante y común para cualquier aplicación. Comprenden campos de entrada como nombre, género, correo electrónico y muchos más. Varios formularios utilizan un controlador de fecha para completar las entradas de tipo de fecha. Un DatePicker es un widget que ayuda a los usuarios con la instalación a elegir una fecha sin escribirla manualmente. Por lo general, se usa en formularios para ayudar al usuario a facilitar las fechas al formulario.

Este artículo lo guiará sobre cómo agregar DatePicker en formato usando HTML.

Cómo agregar datePicker en formato usando HTML?

La sintaxis para agregar un DatePicker en el formulario se proporciona de la siguiente manera:

Aquí, tanto el tipo de campo de entrada como la ID están configurados como "fecha".

Ejemplo: Agregar un capitador de fecha en formato usando HTML

En el archivo HTML, agregue un elemento DIV con el "contenido principal" nombre de la clase. Dentro de este Div:

• Agregue otro DIV con el "formulario" clase.
• Luego, agregue un elemento HTML que contenga los campos de entrada para el nombre y la fecha de nacimiento.
• El elemento de la etiqueta rodea estos campos de entrada.
• 
  Se especifican las etiquetas para agregar saltos de línea.
• Por último, agregue elemento para crear un botón en el formulario:

Introduzca su nombre






Introduzca su fecha de nacimiento






Entregar

Ahora, pase a la sección CSS para peinar los elementos.

Elemento de estilo "cuerpo"

cuerpo
Color de fondo: #7D6E83;

La sección del cuerpo se aplica con el "color de fondoPropiedad para establecer su color de fondo.

Estilo "Contente principal" Div

.contenido principal
Color de fondo: #DFD3C3;
Ancho: 450px;
Altura: 300px;
relleno: 8px;
Top-top: 5px;
Border-Radius: 10px;
margen: auto;
tamaño de fuente: 18px;

El ".contenido principal"Se refiere al contenido principal del div. A continuación se muestran las propiedades aplicadas a él:

• "color de fondo"La propiedad establece el color de fondo del elemento.
• "ancho"La propiedad establece el ancho del elemento.
• "altura"La propiedad establece la altura del elemento.
• "relleno"La propiedad establece espacio alrededor del contenido del elemento o dentro del borde.
• "acolchado superior"La propiedad agrega espacio a la parte superior del contenido del elemento.
• "radio fronterizo"La propiedad hace que los bordes del elemento reduzcan.
• "margen"La propiedad agrega espacio alrededor del elemento.
• "tamaño de fuenteLa propiedad se utiliza para establecer el tamaño de la fuente.

Estilo "Forma-contenido" Div

.contenido de forma
Ancho: 400px;
Margen: 70px Auto;

Elemento de "entrada" de estilo

aporte
relleno: 5px;
margen: auto;
Ancho: 250px;

Elemento de estilo "botón"

botón
Ancho: 260px;
relleno: 10px;
Color de fondo: #7D6E83;
Border-Radius: 8px;
Color: Floralwhite;
tamaño de fuente: 20px;
Shadow de caja: 1px 1px 1px 1px gris;
Transición: todos 0.3s facilidad;

Las propiedades de estilo aplicadas al elemento se explican a continuación:

• "color"La propiedad especifica el color de la fuente.
• "sombra de la caja"La propiedad aplica la sombra en el elemento que tiene valores para X-ofset, y-ofset, desenfoque, propagación y color.
• "transiciónLa propiedad se utiliza para cambiar las propiedades del elemento sin problemas. Especifica los valores de la propiedad a los que se aplica, su duración y su tipo. En nuestro caso, "facilidad"Se usa para especificar la transición del elemento para comenzar lentamente, luego rápido y lento al final.

Estilizar el elemento "botón" en "Hover"

Botón: Hover
transformar: traducir (3px, 3px);

El botón aplicado con el "transformar"Propiedad con el valor establecido como"Traducir (3px, 3px)"Moverá el elemento en el eje x y las ordenadas del eje Y.

Aquí está el aspecto final del formulario:

Se puede observar que el capitán de fecha se ha agregado con éxito al formulario.

Conclusión

Un Picker Date está asociado con los campos de entrada de fecha donde el usuario puede seleccionar una fecha. Proporciona a un usuario con facilidad. Para hacerlo, los elementos de entrada están asociados con el atributo "fecha"Tipo, como este" . Esta publicación ha demostrado cómo agregar un fechlepicker en forma usando HTML.