Icon 100x60 momentjs Trabajando con moment.js

en JavascriptDate

Librería javascript indispensable para manipular la fecha y la hora

La manipulación de la fecha y la hora en Javascript siempre ha causado dolores de cabeza a los desarrolladores. Es una de las partes más tediosas del lenguaje. Por suerte han aparecido librerías como momentjs que nos facilitarán enormemente trabajar con el objeto Date. Una vez hayas leído este artículo la encontrarás indispensable.

Puedes descargar la última versión de moment.js en su página oficial. Este framework es gratuito y de código libre.

Ejemplos básicos

Vamos a la acción con una serie de ejemplos:

1
2
3
4

// creamos un objeto moment
var ahora = moment();
// creamos una fecha año, mes, dia
var fechaHoy = moment([2015, 3, 15]);

Hasta aquí nada nuevo, casi exactamente igual que crear un objeto Date de Javascript solo que con la nueva librería.

1
2
3
4
5
6
7
8

// Hora actual
moment().format('HH:mm:ss'); // "15:46:28"
// día de la semana
moment().day(); // numérico indicando el número de día
// mes actual
moment().month; // numérico indicando el número de mes
// nombre del mes actual
moment.months()[moment().month()]; // en inglés: March

Trabajando con fechas

Vamos a complicar un poco las cosas: 

1
2
3
4
5
6
7
8
9
10
11
12
13

var fecha = moment([2000, 1, 1]); // 1/1/2000
// ¿Cuánto tiempo ha pasado?
fecha.fromNow(true); // años que han pasado desde la fecha
fecha.add(20, 'years'); // añade 20 años a la fecha
fecha.subtract(20, 'days'); // resta 20 días a la fecha
// comprobar si una fecha es anterior a otra
moment('2015-10-20').isBefore('2015-10-21');
// comprobar si es la misma fecha
moment('2015-10-20').isSame('2015-10-20'); 
// comprobar si la fecha esta entre otras dos
moment('2015-10-20').isBetween('2015-10-19', '2015-10-25');
// comprobar si un año es bisiesto
moment([2000]).isLeapYear();

Usar momentjs en español

Esta librería permite localizarla para el idioma español. Tan solo tenemos que añadir el archivo de las traducciones y definir el idioma antes de ejecutar cualquier otra instrucción: 

moment.locale('es');

Si necesitáis todos los idiomas podéis descargarlos en http://momentjs.com/downloads/moment-with-locales.js, pero aquí os dejo la versión en español:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

// moment.js locale configuration
// locale : spanish (es)
// author : Julio Napurí : https://github.com/julionc
(function (factory) {
    factory(moment);
}(function (moment) {
    var monthsShortDot = 'ene._feb._mar._abr._may._jun._jul._ago._sep._oct._nov._dic.'.split('_'),
        monthsShort = 'ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic'.split('_');
    return moment.defineLocale('es', {
        months : 'enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre'.split('_'),
        monthsShort : function (m, format) {
            if (/-MMM-/.test(format)) {
                return monthsShort[m.month()];
            } else {
                return monthsShortDot[m.month()];
            }
        },
        weekdays : 'domingo_lunes_martes_miércoles_jueves_viernes_sábado'.split('_'),
        weekdaysShort : 'dom._lun._mar._mié._jue._vie._sáb.'.split('_'),
        weekdaysMin : 'Do_Lu_Ma_Mi_Ju_Vi_Sá'.split('_'),
        longDateFormat : {
            LT : 'H:mm',
            LTS : 'LT:ss',
            L : 'DD/MM/YYYY',
            LL : 'D [de] MMMM [de] YYYY',
            LLL : 'D [de] MMMM [de] YYYY LT',
            LLLL : 'dddd, D [de] MMMM [de] YYYY LT'
        },
        calendar : {
            sameDay : function () {
                return '[hoy a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
            },
            nextDay : function () {
                return '[mañana a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
            },
            nextWeek : function () {
                return 'dddd [a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
            },
            lastDay : function () {
                return '[ayer a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
            },
            lastWeek : function () {
                return '[el] dddd [pasado a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
            },
            sameElse : 'L'
        },
        relativeTime : {
            future : 'en %s',
            past : 'hace %s',
            s : 'unos segundos',
            m : 'un minuto',
            mm : '%d minutos',
            h : 'una hora',
            hh : '%d horas',
            d : 'un día',
            dd : '%d días',
            M : 'un mes',
            MM : '%d meses',
            y : 'un año',
            yy : '%d años'
        },
        ordinalParse : /\d{1,2}º/,
        ordinal : '%dº',
        week : {
            dow : 1, // Monday is the first day of the week.
            doy : 4  // The week that contains Jan 4th is the first week of the year.
        }
    });
}));

No olvides visitar la página oficial de momentjs para leer toda la documentación.

Prohibida la reproducción total o parcial de este artículo sin el previo consentimiento de Webtutoriales.com

Comentarios