Formatear fecha y hora usando DateTimePicker en jQuery

Shiv Yadav 21 junio 2022
Formatear fecha y hora usando DateTimePicker en jQuery

Si solo desea elegir fechas, debe usar un complemento de jQuery llamado DatePicker. Pero a veces, debe seleccionar fechas y horas, por lo que debe usar el complemento jQuery llamado DateTimePicker.

Este artículo utilizará DateTimePicker para formatear la fecha.

Formatear fecha y hora usando DateTimePicker en jQuery

DateTimePicker proporciona la capacidad de escribir un valor de fecha y hora que aparecerá en el control datetimepicker.

Para usar DateTimePicker, primero debe descargar el complemento jQuery. Puedes descargarlo desde aquí].

Después de la descarga, debe extraer esos archivos.

archivos de complementos jquery

No es necesario utilizar todos los archivos. Solo debe utilizar los archivos jquery.js, jquery.datetimepicker.full.min.js y jquery.datetimepicker.min.css.

Recuerde que debe colocar estos archivos en el mismo directorio. Puede obtener jquery.js en la carpeta principal y los archivos restantes en el directorio build.

Para formatear fechas en jQuery DateTimePicker, cambie la propiedad de formato dentro del elemento enviado a la función datetimepicker.

Por ejemplo, podríamos escribir lo siguiente. Para ejecutar este código, debe guardar el archivo como un archivo HTML y ejecutarlo en el navegador.

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      type="text/css"
      href="jquery.datetimepicker.min.css"
    />
    <script src="jquery.js"></script>
    <script src="jquery.datetimepicker.full.min.js"></script>
  </head>
  <body>
    <input id="datetimepicker" type="text" />
    <script>
      $("#datetimepicker").datetimepicker({
        format: "d/m/Y H:m:s",
      });
    </script>
  </body>
</html>

Recuerde: El archivo jquery.js debe incluirse encima de jquery.datetimepicker.full.min.js.

Tenemos el elemento input para el selector de fecha y hora, incluido el script jQuery, las etiquetas de enlace y el jQuery datetimepicker. Luego, llamamos a datetimepicker con una entidad para modificar la propiedad de formato a d/m/Y para que el mejor ajuste aparezca en la entrada en formato DD-MM-YYYY.

Aquí, d representa la fecha, m representa el mes y Y representa el año. Asimismo, H representa la hora, m los minutos y s los segundos.

Producción:

jquery formato de fecha y hora

Aquí, el formato de fecha y hora está en d/m/Y y H:m:s. Puede cambiar el formato de entrada pasando sus formatos de fecha y hora.

En resumen, para formatear fechas usando jQuery DateTimePicker, cambie la propiedad de formato en el objeto enviado a la función datetimepicker.

Autor: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

Artículo relacionado - jQuery DateTime