Trabalhando com Datas em JavaScript

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(); // 26
Hoje.getDay(); // 4 - Retorna o dia da semana, começando com 0 na segunda
Hoje.getFullYear(); // 2014
Hoje.getHours(); // 14
Hoje.getMilliseconds(); // 757 - De acordo com os milisegundos que a variável foi criada
Hoje.getMinutes(); // 6
Hoje.getMonth(); // 8 - Começa do 0, logo janeiro é 0, fevereiro é 1
Hoje.getSeconds(); // 47
Hoje.getTime(); // 1411751207757
Hoje.getTimezoneOffset(); // 180 - Menos 3 horas conforme horário GMT
data.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ça
var 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** UTC
data2.getUTCHours(); // 2 **hora** UTC
Data2.getDate(); // 26 Horário LOCAL de acordo com o GMT-300 
Data2.getHours(); // 23 Horário LOCAL de acordo com o GMT-300

Hoje.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, exemplo
Hoje.getMonth(); // 8 - Setembro, lembrando que começa janeiro com 0
Hoje.setMonth(11); // Seta o mês como Dezembro
Hoje.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ída
moment('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 desejar
moment().format(); // "2014-09-30T11:01:00-03:00"

// Formatando a saída de Datas
moment().format('MMMM Do YYYY, h:mm:ss a'); // setembro 26º 2014, 1:57:45 pm
moment().format('dddd'); // sexta-feira
moment().format("MMM Do YY"); // set 26º 14
moment().format('YYYY [escaped] YYYY'); // 2014 escaped 2014
moment().format(); // 2014-09-26T13:58:14-03:00

// Data Relativa
moment("20111031", "YYYYMMDD").fromNow(); // 3 anos atrás
moment("20120620", "YYYYMMDD").fromNow(); // 2 anos atrás
moment().startOf('day').fromNow(); // 14 horas atrás
moment().endOf('day').fromNow(); // em 10 horas
moment().startOf('hour').fromNow(); // uma hora atrás

// Calendário
moment().subtract(10, 'days').calendar(); // 16/09/2014 - Remove 10 dias
moment().subtract(6, 'days').calendar(); // Último sábado às 13:58 - Remove 6 dias
moment().subtract(3, 'days').calendar(); // Última terça-feira às 13:58 - Remove 3 dias
moment().subtract(1, 'days').calendar(); // Ontem às 13:58 - Remove 1 dia
moment().calendar(); // Hoje às 13:58
moment().add(1, 'days').calendar(); // Amanhã às 13:58 - Adiciona 1 da
moment().add(3, 'days').calendar(); // segunda-feira às 13:58 - Adiciona 3 dias
moment().add(10, 'days').calendar(); // 06/10/2014 - Adiciona 10 dias

// Múltiplos formatos de Data
moment().format('L'); // 26/09/2014
moment().format('l'); // 26/9/2014
moment().format('LL'); // 26 de setembro de 2014
moment().format('ll'); // 26 de set de 2014
moment().format('LLL'); // 26 de setembro de 2014 às 14:01
moment().format('lll'); // 26 de set de 2014 às 14:01
moment().format('LLLL'); // sexta-feira, 26 de setembro de 2014 às 14:01
moment().format('llll'); // sex, 26 de set de 2014 às 14:01

Agora, 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 anos
range.diff('months'); // 8 - diferença entre meses
range.diff('days'); // 273
range.diff(); // 23629091609 - diferença em milisegundos

/* Aceita os seguintes parâmetros o comando diff 
years
months
weeks
days
hours
minutes
seconds
milliseconds
*/

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 minutes
moment.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 minutos
moment.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 moment
var 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 PM
moment().strftime("%d/%m/%y %H:%M"); // "30/09/14 13:24

Este é 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.