Cómo mostrar la fecha y hora en formato de 12 horas AM/PM en JavaScript

Cuando se trabaja con JavaScript, a menudo es necesario mostrar la fecha y hora actual al usuario. Pero, ¿cómo se puede mostrar la fecha y hora en formato de 12 horas AM/PM en lugar del formato de 24 horas? En este artículo, explicaremos cómo lograr esto utilizando JavaScript.

📋 Aquí podrás encontrar✍

Obtención de la fecha y la hora
Mostrando la fecha y la hora en formato de 12 horas AM/PM
Ejemplos de códigos
Conclusión
Preguntas frecuentes

Obtención de la fecha y la hora

Para mostrar la fecha y hora en JavaScript, primero debemos obtener la fecha y hora actual. Esto se puede hacer utilizando el objeto Date de JavaScript.

Para obtener la fecha y hora actual, podemos crear una nueva instancia de la clase Date sin pasar ningún argumento. Por ejemplo:

var currentDate = new Date();

Ahora que tenemos la fecha y hora actual, podemos mostrarla al usuario en formato de 24 horas utilizando los métodos getFullYear(), getMonth(), getDate(), getHours(), getMinutes() y getSeconds() del objeto Date. Por ejemplo:

var currentYear = currentDate.getFullYear(); var currentMonth = currentDate.getMonth() + 1; var currentDay = currentDate.getDate(); var currentHour = currentDate.getHours(); var currentMinute = currentDate.getMinutes(); var currentSecond = currentDate.getSeconds();

Si quisiéramos mostrar la fecha y hora en formato de 24 horas, podríamos simplemente concatenar estos valores en una cadena y mostrarla al usuario. Por ejemplo:

var dateString = currentDay + "/" + currentMonth + "/" + currentYear + " " + currentHour + ":" + currentMinute + ":" + currentSecond; document.getElementById("fecha-hora").innerHTML = dateString;

Este código mostraría la fecha y hora actual en un elemento HTML con el ID "fecha-hora".

Mostrando la fecha y la hora en formato de 12 horas AM/PM

Ahora que sabemos cómo obtener la fecha y hora actual en JavaScript, podemos mostrarla en formato de 12 horas AM/PM utilizando los métodos getHours() y getMinutes() junto con un poco de lógica adicional.

Primero, necesitamos determinar si la hora actual es AM o PM. Para hacer esto, podemos usar una declaración if para verificar si la hora actual es mayor o igual a 12 (mediodía). Si es así, entonces es PM; de lo contrario, es AM. Por ejemplo:

var amPM = currentHour >= 12 ? 'PM' : 'AM';

Luego, necesitamos convertir las horas en formato de 24 horas a formato de 12 horas. Para hacer esto, podemos restar 12 de la hora actual si es mayor que 12 (para obtener la hora en formato de 12 horas), o simplemente usar la hora actual si es menor o igual a 12. Además, si la hora actual es cero, deberíamos mostrar "12" en lugar de "0". Por ejemplo:

var hour12 = currentHour % 12; hour12 = hour12 ? hour12 : 12;

Finalmente, podemos construir la cadena que muestra la fecha y hora actual en formato de 12 horas AM/PM. Por ejemplo:

var dateString = currentDay + "/" + currentMonth + "/" + currentYear + " " + hour12 + ":" + (currentMinute < 10 ? "0" : "") + currentMinute + " " + amPM; document.getElementById("fecha-hora").innerHTML = dateString;

Este código mostraría la fecha y hora actual en formato de 12 horas AM/PM en un elemento HTML con ID "fecha-hora".

Ejemplos de códigos

A continuación, se muestran algunos ejemplos de códigos para obtener y mostrar la fecha y hora actual en formato de 12 horas AM/PM:

// Crear una instancia de la clase Date var currentDate = new Date();


// Obtener los valores de la fecha y hora actual

var currentYear = currentDate.getFullYear();

var currentMonth = currentDate.getMonth() + 1;

var currentDay = currentDate.getDate();

var currentHour = currentDate.getHours();

var currentMinute = currentDate.getMinutes();

var currentSecond = currentDate.getSeconds();
// Determinar si la hora actual es AM o PM

var amPM = currentHour >= 12 ? 'PM' : 'AM';
// Convertir las horas en formato de 24 horas a formato de 12 horas

var hour12 = currentHour % 12;

hour12 = hour12 ? hour12 : 12;

// Construir la cadena que muestra la fecha y hora actual en formato de 12 horas AM/PM var dateString = currentDay + "/" + currentMonth + "/" + currentYear + " " + hour12 + ":" + (currentMinute < 10 ? "0" : "") + currentMinute + " " + amPM; // Mostrar la fecha y hora actual en un elemento HTML con ID "fecha-hora" document.getElementById("fecha-hora").innerHTML = dateString;

Conclusión

Mostrar la fecha y hora actual en formato de 12 horas AM/PM es fácil de lograr utilizando JavaScript. Simplemente debemos obtener la fecha y hora actual utilizando el objeto Date de JavaScript, y luego convertir las horas en formato de 24 horas a formato de 12 horas utilizando un poco de lógica adicional. Esto permitirá que los usuarios vean la hora actual en un formato más fácil de leer y comprender.

Preguntas frecuentes

¿Qué es la clase Date de JavaScript?

La clase Date de JavaScript proporciona una forma de trabajar con fechas y horas en JavaScript. Se puede usar para crear nuevas instancias de fechas, obtener y establecer los valores de fechas y horas, y realizar operaciones aritméticas con fechas.

¿Cómo puedo mostrar la fecha y hora actual en formato de 24 horas en JavaScript?

Para mostrar la fecha y hora actual en formato de 24 horas en JavaScript, debemos obtener la fecha y hora actual utilizando un objeto Date de JavaScript, y luego concatenar sus valores en una cadena usando los métodos getFullYear(), getMonth(), getDate(), getHours(), getMinutes() y getSeconds().

¿Hay alguna biblioteca de JavaScript que pueda usar para trabajar con fechas y horas?

Sí, existen varias bibliotecas de JavaScript que pueden simplificar el trabajo con fechas y horas en JavaScript. Algunas de las más populares incluyen Moment.js, fecha y date-fns.