El JavaScript "DatePicker" le permite elegir una fecha de un calendario desplegable interactivo en lugar de escribirlo manualmente. Se utiliza en escenarios en los que desea programar tareas de acuerdo con una fecha específica, como guardar una fecha de nacimiento. A "selector de fechas"Se puede agregar rápidamente a un"campo de entrada" utilizando el "complemento jQuery". También existen varios otros complementos de DatePicker; sin embargo, "jQuery ui datepicker"Se destaca en el mercado debido a su naturaleza altamente flexible.

Esta publicación discutirá el procedimiento para usar un JavaScript DatePicker. Entonces, comencemos!

JQueryui DatePicker Plugin

El jQueryui "selector de fechasEl complemento "permite al usuario ingresar las fechas visualmente. También le permite cambiar fácilmente el formato de fecha y su idioma, agregar opciones de navegación y limitar los rangos de fecha. Para utilizar todas estas funcionalidades, JQueryui ofrece un "selector de fechas()"Método y agrega nuevas clases de CSS a las páginas HTML cambiando su apariencia.

Sintaxis

$ (selector).datePicker (opciones);

Aquí el "selector"El parámetro representa los selectores CSS como"div"O cualquier nodo de modelo de objeto de documento, y"opción"Es un parámetro opcional que comprende diferentes opciones como "DateFormat", "Closettexo", "Names de día".

Ahora, diremos hacia la implementación de JavaScript "selector de fechas".

Cómo usar JavaScript DatePicker

Para el propósito de demostración, crearemos una aplicación JavaScript y agregaremos la funcionalidad de un básico "selector de fechas" a una campo de entrada. Para hacer lo mismo, siga las instrucciones paso a paso dadas:

Paso 1: Importar bibliotecas requeridas

En primer lugar, importe las bibliotecas requeridas en el archivo HTML para usar el complemento jQuery UI:

Paso 2: Agregar elementos HTML

En el siguiente paso, cree los elementos HTML deseados en su aplicación. En nuestro caso, primero agregaremos un "Título" dentro de la etiqueta "":

Entonces, un encabezado con el "

"Etiqueta y un párrafo con el"

"Etiqueta, dentro del"" etiqueta:

Demostración del uso de JavaScript DatePicker

Ingrese la fecha:

Además, en el agregado "campo de entrada", Aparecerá un calendario interactivo en una superposición cuando el campo de entrada esté enfocado.

Paso 3: código de archivo JavaScript

Cambie a su archivo JavaScript y escriba el siguiente código para especificar la ID del campo de entrada "#selector de fechas" como "selector"Parámetro del"selector de fechas()" método. Aquí, también puede agregar algunas "opciones" de configuración avanzada relacionadas con JavaScript "selector de fechas"Como cambiar el formato de fecha:

$ (function ()
$ ("#DatePicker").selector de fechas();
DateFormat: "yy-mm-dd"
);

Paso 4: código de archivo CSS

Para mejorar la apariencia de la aplicación JavaScript, defina el estilo de los elementos HTML agregados en el archivo CSS. Por ejemplo, agregaremos el color de fondo para "cuerpo", Color de texto y fuente de fuentes para el "H1" encabezado y "P" Elementos de párrafo:

cuerpo
Color de fondo: PowderBlue;

H1
Color: RGB (21, 7, 145);
Font-Family: 'Courier New', Courier, Monospace;

pag
Color: RGB (37, 25, 5);
Font-Family: Courier;

Paso 5: Enlace CSS y JavaScript al archivo HTML

Por último, vincule los archivos CSS y JavaScript al archivo HTML del proyecto JavaScript:

Así es como nuestro "JavaScript DatePicker.html"El archivo se parece:

Paso 6: Ejecutar la aplicación JavaScript

Después de agregar todo el código requerido, haga clic con el botón derecho en el archivo HTML y en el menú contextual abierto, seleccione el "Abrir con servidor en vivo" opción:

Su aplicación JavaScript creada ahora se ejecutará en el navegador. Clickea en el "campo de entrada"Y elija una fecha del"selector de fechas":

Te mostramos el método para utilizar un JavaScript DatePicker. Puedes explorar más a fondo según sea necesario.

Conclusión

JQueryui ofrece un "selector de fechas()Método que le permite elegir una fecha de un calendario desplegable interactivo en lugar de escribirlo manualmente. Se utiliza un JavaScript DatePicker en escenarios en los que desea programar tareas de acuerdo con una fecha específica, como guardar una fecha de nacimiento. En esta publicación, hemos discutido el método para agregar la funcionalidad de un básico "selector de fechas"A un campo de entrada.