Hace unas semanas tuve la necesidad de dar formato a una fecha y 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 para mostrar el valor de fecha (DD/MM/AAAA, DD/MM/AAAA, MM-DD-AAAA, etc) y el valor de la hora. Terminé de escribir dos funciones – una para la fecha y una para la hora – que toma el valor fecha/hora en JavaScript y una cadena de formato, y retorna la fecha (o hora) en el formato deseado. Esta semana voy a hablar acerca de la función para formatear la fecha.
function formatDate(dateValue, format) {
La variable DateValue es un valor JavaScript de fecha/hora. La variable format es una cadena. La cadena tiene el formato. Hay dos separadores permitidos entre los meses, días y años – son el guión y la barra inclinada. Entre los separadores están los meses, días y años. Si desea forzar un cero a la izquierda para el mes, entonces usted debe incluir MM en el valor de mes. Una sola M para el valor de mes se quitara el cero. Funciona de la misma manera para los días – puede incluir ya sea DD o D para el día. El valor del año es siempre los cuatro dígitos, por lo que YYYY es necesario ser utilizado.
Por ejemplo, los siguientes son cadenas de formato válido:
DD/MM/YYYY Este será un dígito de dos meses, luego una barra, y luego un dígito de dos días, luego una barra, y luego un dígito de cuatro años.
DD-MM-YYYY Este será un dígito de dos días, y luego un guión, luego un dígito de dos meses, luego un guión, luego un año de cuatro dígitos.
YYYY/M/D Este será un dígito de cuatro años, luego una barra, entonces el mes sin un cero a la izquierda, luego una barra, entonces un día sin un cero a la izquierda.
Los siguientes no son cadenas formato válido:
MM/DD-YYYY Esta no es válida ya que el separador debe ser el mismo en ambas posiciones.
MM~DD~YYYY Esta no es válida porque la tilde no es un separador válido.
MM/DD/YY Esta no es válida porque el año tiene que ser de 4 dígitos.
Cualquier formato no válido se convierte en DD/MM/YYYY (el formato de los EE.UU.). Obviamente, puede cambiar el código si usted quiere hacer por defecto será otro formato o permitir formatos adicionales.
La primera parte del código es válido el formato:
var fmt = format.toUpperCase();
var re = /^(M|MM|D|DD|YYYY)([\-\/]{1})(M|MM|D|DD|YYYY)(\2)(M|MM|D|DD|YYYY)$/;
if (!re.test(fmt)) { fmt = "MM/DD/YYYY"; }
if (fmt.indexOf("M") == -1) { fmt = "MM/DD/YYYY"; }
if (fmt.indexOf("D") == -1) { fmt = "MM/DD/YYYY"; }
if (fmt.indexOf("YYYY") == -1) { fmt = "MM/DD/YYYY"; }
Puedo usar una expresión regular para hacer la primera parte de la validación, a continuación, asegurar de que las tres piezas (mes, día y año) están incluidas. Esto se debe a una cadena de formato de MM/MM/MM pasaría la validación, pero no es una cadena de formato válido.
Lo siguiente que hace el código es conseguir uno y dos meses dígitos, un dígito y dos días, y un año de cuatro dígitos:
var M = "" + (dateValue.getMonth()+1);
var MM = "0" + M;
MM = MM.substring(MM.length-2, MM.length);
var D = "" + (dateValue.getDate());
var DD = "0" + D;
DD = DD.substring(DD.length-2, DD.length);
var YYYY = "" + (dateValue.getFullYear());
Para obtener el dígito y dos dígitos los valores, en primer lugar crear el valor «sin cero a la izquierda». Echemos un vistazo a los del mes como un ejemplo. Quiero que sea una cadena, por lo que forzar la cadena vacía al principio y luego añadir el valor de mes. Así que la variable M tiene un valor de «0» a «12». Entonces pongo un cero a la izquierda en la parte delantera para conseguir MM. Ese cero a la izquierda está muy bien para «01» a «09», pero no es el adecuado para «010» a «012». Así que la segunda declaración tiene los dos últimos caracteres.
El siguiente paso es averiguar qué separador se utilizó y se partir la cadena de formato en tres piezas basadas en el separador.
var sep = "/";
if (fmt.indexOf("-") != -1) { sep = "-"; }
var pieces = fmt.split(sep);
var result = "";
Por último, la variable result se construye con las tres piezas. Cada pieza debe estudiarse en forma independiente y la variable correcta se añade a la cadena de result. Por ejemplo, aquí está la primera parte del resultado:
switch (pieces[0]) {
case "M" : result += M + sep; break;
case "MM" : result += MM + sep; break;
case "D" : result += D + sep; break;
case "DD" : result += DD + sep; break;
case "YYYY" : result += YYYY + sep; break;
}
Si la primera pieza es el mes sin un cero a la izquierda, entonces la variable M y el separador se agregan a la cadena de resultado. La segunda y tercera partes de la cadena de resultado se agregan de forma similar:
switch (pieces[1]) {
case "M" : result += M + sep; break;
case "MM" : result += MM + sep; break;
case "D" : result += D + sep; break;
case "DD" : result += DD + sep; break;
case "YYYY" : result += YYYY + sep; break;
}
switch (pieces[2]) {
case "M" : result += M; break;
case "MM" : result += MM; break;
case "D" : result += D; break;
case "DD" : result += DD; break;
case "YYYY" : result += YYYY; break;
}
Cuando la cadena de resultados completos se construye, se devuelve como el valor de la función:
return result;
}
Por lo tanto, esta función debe ser capaz de darle la representación de texto de un valor de fecha en el formato deseado. Como dije anteriormente, este código puede ser modificado para incluir otros separadores, o cambiar el formato por defecto, o incluir la posibilidad de un año de dos dígitos.
