Introducción

Una cosa que me gusta de AngularJS es la facilidad que brinda para agregar nuestros propios filtros. Hoy quiero compartir 2 filtros que personalmente utilizo en mis aplicaciones, son para filtrar fechas. Es decir, formatear una fecha para que sea legible por el humano.

Fecha corta

Este filtro puede recibir un objeto de tipo Date, o una cadena que sea válida para instanciar un objeto de tipo Date. Devuelve una fecha como “13/abr/2018”

angular
    .module("tuApp")
    .filter("fechaCorta", function () {
        return function (fecha) {
            if (!fecha) return "";
            fecha = new Date(fecha);
            return (fecha.getDate() > 9 ? fecha.getDate() : "0" + fecha.getDate()) + "/" + (["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"][fecha.getMonth()]) + "/" + fecha.getFullYear()
        };
    });

Después podemos utilizarlo como cualquier filtro.

Fecha expresiva

Este filtro devuelve una cadena muy larga, pero es útil si queremos saber incluso la hora. Devuelve algo como “viernes, 13 de abril de 2018 16:57”.

El filtro es este:

angular
    .module("tuApp")
    .filter("fechaExpresiva", function () {
        return function (fecha) {
            if (!fecha) return "";
            fecha = new Date(fecha);
            return ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"][fecha.getDay()] + ", " + fecha.getDate().toString() + " de " + ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"][fecha.getMonth()] + " de " + fecha.getFullYear().toString() + " " + (fecha.getHours() > 9 ? fecha.getHours() : "0" + fecha.getHours()).toString() + ":" + (fecha.getMinutes() > 9 ? fecha.getMinutes() : "0" + fecha.getMinutes()).toString();
        };
    });

Ejemplo de uso

Aquí dejo un pequeño plunker para demostrar el uso de los filtros.