Inicio > Programación Web > Javascript: Formato de la Hora

Javascript: Formato de la Hora

miércoles, 13 de marzo de 2024 Dejar un comentario Ir a comentarios

Hace pocas semanas atrás tuve la necesidad para dar formato a una fecha y una hora en una página web. Había todo tipo de usuarios, así que quería ser capaz de dejar al usuario elegir su formato (HH:MM:SS, HH:MM, H:MM:SS, etc) para mostrar el valor de fecha y hora. Terminé de escribir dos funciones – una para la fecha y una para la hora – que tiene una fecha/hora en JavaScript y una cadena de formato, y retorna la fecha (u hora) en el formato deseado. La semana conversaba con un amigo sobre la función de formato a la fecha y esta semana hablo de la función para dar formato a la hora.

function formatTime(timeValue, format) {

La variable TimeValue es un valor fecha/hora JavaScript. La variable format es una cadena. La cadena tiene el formato apropiado. El formato tiene la hora con rellenada de ceros («HH») o sin ceros («H») seguido de dos puntos a continuación, los dos dígitos de minutos («MM»). Si deseas incluir el segundo (opcional), entonces pones otros dos puntos seguidos por los dos dígitos de segundos («SS»). Si deseas incluir el meridiano (AM o PM) – de nuevo, opcional – entonces pones un espacio y «AM». Si el meridiano no está incluido, el horario será el reloj de 24 horas. El meridiano está siempre en mayúsculas.

Por ejemplo, las siguientes son cadenas de formato válido:

H:MM:SS Este arroja las horas, minutos y segundos en formato de 24 horas sin un cero a la izquierda para las horas.
H:MM:SS AM la salida será de hora, minutos, y segundos y «AM» o «PM» sin un cero a la izquierda para las horas.
HH:MM AM la salida será las horas y minutos (no hay segundos) y en «AM» o «PM» con un cero a la izquierda para las horas.

Los siguientes son cadenas de formato no válido:
H:M:SS Esta no es válida porque el valor de los minutos siempre debe contener dos dígitos.
HH:MM:SS PM Esta no es válida porque el meridiano (AM/PM) debe ser siempre «AM».
HH+MM AM Esta no es válida ya que el separador debe ser de dos puntos.

Cualquier formato no válido se convierte en H:MM AM. Obviamente, puedes cambiar el código si quieres poner otro formato por defecto o permitir formatos adicionales.

La primera parte del código es validar el formato:

    var fmt = format.toUpperCase();
    var re = /^(H|HH)(:MM)(:SS)?( AM)?$/;
    if (!re.test(fmt)) { fmt = "H:MM AM"; }

Uso una expresión regular para validar el formato. La primera parte puede ser una sola H o doble HH. A continuación, los dos puntos y los minutos que deben aparecer. A continuación, los dos puntos y el segundo son opcionales (el «?» significa que el grupo anterior debe aparecer 0 o 1 vez). A continuación, el meridiano es opcional.

Lo siguiente que hace el código es conseguir uno y dos dígitos de las horas, dos dígitos de los minutos y dos dígitos de los segundos:

    var MM = "0" + (timeValue.getMinutes());
    MM = MM.substring(MM.length-2, MM.length);
    var SS = "0" + (timeValue.getSeconds());
    SS = SS.substring(SS.length-2, SS.length);
    var H = "" + (timeValue.getHours());
    var HH = "0" + H;
    HH = HH.substring(HH.length-2, HH.length);

Para obtener los valores de dos dígitos, echamos un vistazo a los minutos como un ejemplo. Quiero que sea una cadena, por lo fuerzo los ceros a la izquierda como una cadena al inicio y luego añado el valor de los minutos. Así que la variable MM tiene un valor de «00» al «09»«010» al «059». La segunda declaración toma los dos últimos caracteres, que conserva el cero a la izquierda para los números menores que 10 y elimina el cero para los números mayores o iguales que 10.

El código a continuación, calcula el valor del meridiano si se encuentra en la cadena de formato:

    var meridian = "";
    if (fmt.indexOf(" AM") != -1) {
         meridian = "AM";
         if (HH == "00") { HH = "12"; }
         if (HH == "12") { meridian = "PM"; }
         if (parseInt(HH, 10) > 12) {
              meridian = "PM";
              var hrs = (parseInt(HH, 10)-12);
              H = "" + hrs;
              HH = "0" + H;
              HH = HH.substring(HH.length-2, HH.length);
         }
    }

La función estándar de JavaScript getHours() que se utilizó para obtener las horas devuelve un número de 0 a 23 (hora militar). Así que si las horas, con el cero a la izquierda, es «00», entonces que se convierte a las 12:00 AM. Si la hora es «12», entonces la hora no es necesaria cambiarla, pero el meridiano es «PM». Si el horario es de 13 o superior, a continuación, se restan 12 horas y el meridiano es «PM». Las horas entre 1:00 AM y 11:00 AM no se convierten (el meridiano supuesto de «AM» sucede en el inicio del bloque).

La cadena es construida y devuelta basada en el formato:

    var meridian = "";
    var result = "";
    if (fmt.indexOf("HH") == -1) { result += H + ":" + MM; } else { result += HH + ":" + MM; }
    if (fmt.indexOf("SS") != -1) { result += ":" + SS; }
    if (fmt.indexOf(" AM") != -1) { result += " " + meridian; }
    return result;
}

Comparte y diviertete:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • BarraPunto
  • Bitacoras.com
  • BlinkList
  • Blogosphere
  • Live
  • Meneame
  • MSN Reporter
  • MySpace
  • RSS
  • Suggest to Techmeme via Twitter
  • Technorati
  • LinkedIn
  • email
  • FriendFeed
  • PDF
  • Reddit
  • Wikio IT
  • Add to favorites
  • blogmarks
Top Footer