Trabalhar com datas em JavaScript se torna complicado quando queremos com exatidão trazer diferenças entre datas ou formatar datas para sair conforme precisamos. Este post, tem como objetivo mostrar os diversos tipos de se tratar uma data e formas de apresentá-las, também como calcular a diferença entre 2 datas e resgatar estes valores.
Primeiro vamos ver o comando Date() e suas propriedades, nativo do JavaScript, este comando pode ser utilizado das seguintes formas:
// Tipos para inicializar data em JavaScript// new Date(); Data Corrente// new Date(milissegundos); // new Date(string_de_data);// new Date(ano, mes, dia);// new Date(ano, mes, dia, hora, minuto, segundo, milissegundo);var Hoje = new Date(); // Fri Sep 26 2014 14:06:47 GMT-0300 (Hora oficial do Brasil)Hoje.getDate(); // 26Hoje.getDay(); // 4 - Retorna o dia da semana, começando com 0 na segundaHoje.getFullYear(); // 2014Hoje.getHours(); // 14Hoje.getMilliseconds(); // 757 - De acordo com os milisegundos que a variável foi criadaHoje.getMinutes(); // 6Hoje.getMonth(); // 8 - Começa do 0, logo janeiro é 0, fevereiro é 1Hoje.getSeconds(); // 47Hoje.getTime(); // 1411751207757Hoje.getTimezoneOffset(); // 180 - Menos 3 horas conforme horário GMTdata.getUTCDate(); // 26// Neste caso, ele retorna a hora do UTC - Tempo Universal Coordenado// Em inglês Coordinated Universal Time (UTC)// Um teste rápido para mostrar a diferençavar Data2 = new Date("2014/09/26-23:59");console.log( Data2 ); // Fri Sep 26 2014 23:59:00 GMT-0300 (Hora oficial do Brasil)Data2.getUTCDate(); // 27 **Dia** UTCdata2.getUTCHours(); // 2 **hora** UTCData2.getDate(); // 26 Horário LOCAL de acordo com o GMT-300 Data2.getHours(); // 23 Horário LOCAL de acordo com o GMT-300Hoje.toDateString(); // "Fri Sep 26 2014"Hoje.toGMTString(); // "Fri, 26 Sep 2014 17:06:47 GMT"Hoje.toISOString(); // "2014-09-26T17:06:47.757Z"Hoje.toJSON(); // "2014-09-26T17:06:47.757Z"Hoje.toLocaleDateString(); // "26/9/2014"Hoje.toLocaleString(); // "26/9/2014 14:06:47"Hoje.toLocaleTimeString(); // "14:06:47"Hoje.toString(); // "Fri Sep 26 2014 14:06:47 GMT-0300 (Hora oficial do Brasil)"Hoje.toTimeString(); // "14:06:47 GMT-0300 (Hora oficial do Brasil)"Hoje.toUTCString(); // "Fri, 26 Sep 2014 17:06:47 GMT"// O objeto Date permite também setar novos valores, para isto, utilize o SET em vez de GET, exemploHoje.getMonth(); // 8 - Setembro, lembrando que começa janeiro com 0Hoje.setMonth(11); // Seta o mês como DezembroHoje.getMonth(); // 11 - Dezembro
Agora que vimos os diversos tipos de saídas, queremos mostrar o plugin momentjs.
Link: http://momentjs.com/
Documentação em: http://momentjs.com/docs/
Por padrão, quando é utilizado o pacote com multi idiomas, o script tentará detectar qual é o idioma padrão do Browser, verificando em window.navigator.language. Se encontrar, já estará traduzido, do contrário será necessário executar a configuração via o comando abaixo:
moment.locale('pt-BR');Definindo uma data com o Moment.
// Inicializando uma data e mostrando em String a saídamoment('30-09-2014','DD-MM-YYYY'); // Estamos definindo o dia como 30 de setembro de 2014, você pode alterar o formato e passar a data como desejarmoment().format(); // "2014-09-30T11:01:00-03:00"// Formatando a saída de Datasmoment().format('MMMM Do YYYY, h:mm:ss a'); // setembro 26º 2014, 1:57:45 pmmoment().format('dddd'); // sexta-feiramoment().format("MMM Do YY"); // set 26º 14moment().format('YYYY [escaped] YYYY'); // 2014 escaped 2014moment().format(); // 2014-09-26T13:58:14-03:00// Data Relativamoment("20111031", "YYYYMMDD").fromNow(); // 3 anos atrásmoment("20120620", "YYYYMMDD").fromNow(); // 2 anos atrásmoment().startOf('day').fromNow(); // 14 horas atrásmoment().endOf('day').fromNow(); // em 10 horasmoment().startOf('hour').fromNow(); // uma hora atrás// Calendáriomoment().subtract(10, 'days').calendar(); // 16/09/2014 - Remove 10 diasmoment().subtract(6, 'days').calendar(); // Último sábado às 13:58 - Remove 6 diasmoment().subtract(3, 'days').calendar(); // Última terça-feira às 13:58 - Remove 3 diasmoment().subtract(1, 'days').calendar(); // Ontem às 13:58 - Remove 1 diamoment().calendar(); // Hoje às 13:58moment().add(1, 'days').calendar(); // Amanhã às 13:58 - Adiciona 1 damoment().add(3, 'days').calendar(); // segunda-feira às 13:58 - Adiciona 3 diasmoment().add(10, 'days').calendar(); // 06/10/2014 - Adiciona 10 dias// Múltiplos formatos de Datamoment().format('L'); // 26/09/2014moment().format('l'); // 26/9/2014moment().format('LL'); // 26 de setembro de 2014moment().format('ll'); // 26 de set de 2014moment().format('LLL'); // 26 de setembro de 2014 às 14:01moment().format('lll'); // 26 de set de 2014 às 14:01moment().format('LLLL'); // sexta-feira, 26 de setembro de 2014 às 14:01moment().format('llll'); // sex, 26 de set de 2014 às 14:01Agora, vamos mostrar o plugin DATE RANGE, é um plugin adicional ao moment para calcular diferença entre duas datas.
Download e documentação em : https://github.com/gf3/moment-range
var inicio = new Date(2014, 0, 1);var fim = new Date();var range = moment().range(inicio , fim);range.diff('years'); // 0 - diferença entre anosrange.diff('months'); // 8 - diferença entre mesesrange.diff('days'); // 273range.diff(); // 23629091609 - diferença em milisegundos/* Aceita os seguintes parâmetros o comando diff yearsmonthsweeksdayshoursminutessecondsmilliseconds*/Outro plugin útil é o Precise Range. Este traz de forma explicita a diferença entre duas datas.
Download e documentação em : http://codebox.org.uk/pages/moment-date-range-plugin
Para traduzir a formatação de texto de saída, basta editar o arquivo readable-range.js na variável STRINGS.
Original:
var STRINGS = {nodiff: '',year: 'year',years: 'years',month: 'month',months: 'months',day: 'day',days: 'days',hour: 'hour',hours: 'hours',minute: 'minute',minutes: 'minutes',second: 'second',seconds: 'seconds',delimiter: ' '};Traduzido:
var STRINGS = {nodiff: '',year: 'ano',years: 'anos',month: 'mês',months: 'meses',day: 'dia',days: 'dias',hour: 'hora',hours: 'horas',minute: 'minuto',minutes: 'minutos',second: 'segundo',seconds: 'segundos',delimiter: ' '};// Datas Precisas:moment("2014-01-01 12:00:00").preciseDiff("2014-09-30 10:44:00"); // 8 months 28 days 22 hours 44 minutesmoment.preciseDiff("2014-01-01 12:00:00", "2014-09-30 10:44:00"); // 8 months 28 days 22 hours 44 minutes// Depois de traduzido:moment("2014-01-01 12:00:00").preciseDiff("2014-09-30 10:44:00"); // 8 meses 28 dias 22 horas 44 minutosmoment.preciseDiff("2014-01-01 12:00:00", "2014-09-30 10:44:00"); // 8 meses 28 dias 22 horas 44 minutos// Calculando o tempo de vida:var data_de_nascimento = '1987-10-14';moment(data_de_nascimento + " 00:00:00").preciseDiff( new Date() ); // "26 anos 11 meses 16 dias 10 horas 52 minutos 27 segundos"//ou somente com o momentvar data_de_nascimento = moment('14-10-1987','DD-MM-YYYY');moment(data_de_nascimento).preciseDiff( new Date() ); // "26 anos 11 meses 16 dias 10 horas 52 minutos 27 segundos"Plugin Strftime ajuda na formatação de saída das datas, Download e documentação em: https://github.com/benjaminoakes/moment-strftime
moment().strftime("%m/%d/%y %I:%M %p %Z"); // 09/30/14 01:24 PMmoment().strftime("%d/%m/%y %H:%M"); // "30/09/14 13:24Este é o primeiro post de dois sobre como trabalhar com datas, o segundo será em PHP. Acompanhe-nos no Facebook e Google Plus para receber todas novidades.