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.
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 |
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(); |
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