Trabalhar com datas em JavaScript se torna complicado quando queremos com exatid\u00e3o trazer diferen\u00e7as entre datas ou formatar datas para sair conforme precisamos. \u00a0Este post, tem como objetivo mostrar os diversos tipos de se tratar uma data e formas de apresent\u00e1-las, tamb\u00e9m como calcular a diferen\u00e7a entre 2\u00a0datas e resgatar estes valores.<\/p>\n
Primeiro vamos ver o comando Date() e suas propriedades, nativo do JavaScript, este comando pode ser utilizado das seguintes formas:<\/p>\n
\/\/ Tipos para inicializar data em JavaScript\n\/\/ new Date(); Data Corrente\n\/\/ new Date(milissegundos); \n\/\/ new Date(string_de_data);\n\/\/ new Date(ano, mes, dia);\n\/\/ new Date(ano, mes, dia, hora, minuto, segundo, milissegundo);\n\nvar Hoje = new Date(); \/\/ Fri Sep 26 2014 14:06:47 GMT-0300 (Hora oficial do Brasil)\nHoje.getDate(); \/\/ 26\nHoje.getDay(); \/\/ 4 - Retorna o dia da semana, come\u00e7ando com 0 na segunda\nHoje.getFullYear(); \/\/ 2014\nHoje.getHours(); \/\/ 14\nHoje.getMilliseconds(); \/\/ 757 - De acordo com os milisegundos que a vari\u00e1vel foi criada\nHoje.getMinutes(); \/\/ 6\nHoje.getMonth(); \/\/ 8 - Come\u00e7a do 0, logo janeiro \u00e9 0, fevereiro \u00e9 1\nHoje.getSeconds(); \/\/ 47\nHoje.getTime(); \/\/ 1411751207757\nHoje.getTimezoneOffset(); \/\/ 180 - Menos 3 horas conforme hor\u00e1rio GMT\ndata.getUTCDate(); \/\/ 26\n\/\/ Neste caso, ele retorna a hora do UTC - Tempo Universal Coordenado\n\/\/ Em ingl\u00eas Coordinated Universal Time (UTC)\n\/\/ Um teste r\u00e1pido para mostrar a diferen\u00e7a\nvar Data2 = new Date(\"2014\/09\/26-23:59\");\nconsole.log( Data2 ); \/\/ Fri Sep 26 2014 23:59:00 GMT-0300 (Hora oficial do Brasil)\nData2.getUTCDate(); \/\/ 27 **Dia** UTC\ndata2.getUTCHours(); \/\/ 2 **hora** UTC\nData2.getDate(); \/\/ 26 Hor\u00e1rio LOCAL de acordo com o GMT-300 \nData2.getHours(); \/\/ 23 Hor\u00e1rio LOCAL de acordo com o GMT-300\n\nHoje.toDateString(); \/\/ \"Fri Sep 26 2014\"\nHoje.toGMTString(); \/\/ \"Fri, 26 Sep 2014 17:06:47 GMT\"\nHoje.toISOString(); \/\/ \"2014-09-26T17:06:47.757Z\"\nHoje.toJSON(); \/\/ \"2014-09-26T17:06:47.757Z\"\nHoje.toLocaleDateString(); \/\/ \"26\/9\/2014\"\nHoje.toLocaleString(); \/\/ \"26\/9\/2014 14:06:47\"\nHoje.toLocaleTimeString(); \/\/ \"14:06:47\"\nHoje.toString(); \/\/ \"Fri Sep 26 2014 14:06:47 GMT-0300 (Hora oficial do Brasil)\"\nHoje.toTimeString(); \/\/ \"14:06:47 GMT-0300 (Hora oficial do Brasil)\"\nHoje.toUTCString(); \/\/ \"Fri, 26 Sep 2014 17:06:47 GMT\"\n\n\/\/ O objeto Date permite tamb\u00e9m setar novos valores, para isto, utilize o SET em vez de GET, exemplo\nHoje.getMonth(); \/\/ 8 - Setembro, lembrando que come\u00e7a janeiro com 0\nHoje.setMonth(11); \/\/ Seta o m\u00eas como Dezembro\nHoje.getMonth(); \/\/ 11 - Dezembro\n<\/pre>\n<\/p>\n
Agora que vimos os diversos tipos de sa\u00eddas, queremos mostrar o plugin momentjs.<\/p>\n
Link: http:\/\/momentjs.com\/<\/a>
\nDocumenta\u00e7\u00e3o em: http:\/\/momentjs.com\/docs\/<\/a><\/p>\nPor padr\u00e3o, quando \u00e9 utilizado o pacote com multi idiomas, o\u00a0script\u00a0tentar\u00e1 detectar qual \u00e9 o idioma padr\u00e3o do Browser, verificando em window.navigator.language. Se encontrar, j\u00e1 estar\u00e1 traduzido, do contr\u00e1rio ser\u00e1 necess\u00e1rio executar a configura\u00e7\u00e3o via o comando abaixo:<\/p>\n
moment.locale('pt-BR');<\/pre>\nDefinindo uma data com o Moment.<\/p>\n
\/\/ Inicializando uma data e mostrando em String a sa\u00edda\nmoment('30-09-2014','DD-MM-YYYY'); \/\/ Estamos definindo o dia como 30 de setembro de 2014, voc\u00ea pode alterar o formato e passar a data como desejar\nmoment().format(); \/\/ \"2014-09-30T11:01:00-03:00\"\n\n\/\/ Formatando a sa\u00edda de Datas\nmoment().format('MMMM Do YYYY, h:mm:ss a'); \/\/ setembro 26\u00ba 2014, 1:57:45 pm\nmoment().format('dddd'); \/\/ sexta-feira\nmoment().format(\"MMM Do YY\"); \/\/ set 26\u00ba 14\nmoment().format('YYYY [escaped] YYYY'); \/\/ 2014 escaped 2014\nmoment().format(); \/\/ 2014-09-26T13:58:14-03:00\n\n\/\/ Data Relativa\nmoment(\"20111031\", \"YYYYMMDD\").fromNow(); \/\/ 3 anos atr\u00e1s\nmoment(\"20120620\", \"YYYYMMDD\").fromNow(); \/\/ 2 anos atr\u00e1s\nmoment().startOf('day').fromNow(); \/\/ 14 horas atr\u00e1s\nmoment().endOf('day').fromNow(); \/\/ em 10 horas\nmoment().startOf('hour').fromNow(); \/\/ uma hora atr\u00e1s\n\n\/\/ Calend\u00e1rio\nmoment().subtract(10, 'days').calendar(); \/\/ 16\/09\/2014 - Remove 10 dias\nmoment().subtract(6, 'days').calendar(); \/\/ \u00daltimo s\u00e1bado \u00e0s 13:58 - Remove 6 dias\nmoment().subtract(3, 'days').calendar(); \/\/ \u00daltima ter\u00e7a-feira \u00e0s 13:58 - Remove 3 dias\nmoment().subtract(1, 'days').calendar(); \/\/ Ontem \u00e0s 13:58 - Remove 1 dia\nmoment().calendar(); \/\/ Hoje \u00e0s 13:58\nmoment().add(1, 'days').calendar(); \/\/ Amanh\u00e3 \u00e0s 13:58 - Adiciona 1 da\nmoment().add(3, 'days').calendar(); \/\/ segunda-feira \u00e0s 13:58 - Adiciona 3 dias\nmoment().add(10, 'days').calendar(); \/\/ 06\/10\/2014 - Adiciona 10 dias\n\n\/\/ M\u00faltiplos formatos de Data\nmoment().format('L'); \/\/ 26\/09\/2014\nmoment().format('l'); \/\/ 26\/9\/2014\nmoment().format('LL'); \/\/ 26 de setembro de 2014\nmoment().format('ll'); \/\/ 26 de set de 2014\nmoment().format('LLL'); \/\/ 26 de setembro de 2014 \u00e0s 14:01\nmoment().format('lll'); \/\/ 26 de set de 2014 \u00e0s 14:01\nmoment().format('LLLL'); \/\/ sexta-feira, 26 de setembro de 2014 \u00e0s 14:01\nmoment().format('llll'); \/\/ sex, 26 de set de 2014 \u00e0s 14:01<\/pre>\nAgora, vamos mostrar o plugin DATE RANGE, \u00e9 um plugin adicional ao moment para calcular diferen\u00e7a entre duas datas.
\nDownload e documenta\u00e7\u00e3o em : https:\/\/github.com\/gf3\/moment-range<\/a><\/p>\nvar inicio = new Date(2014, 0, 1);\nvar fim = new Date();\nvar range = moment().range(inicio , fim);\n\nrange.diff('years'); \/\/ 0 - diferen\u00e7a entre anos\nrange.diff('months'); \/\/ 8 - diferen\u00e7a entre meses\nrange.diff('days'); \/\/ 273\nrange.diff(); \/\/ 23629091609 - diferen\u00e7a em milisegundos\n\n\/* Aceita os seguintes par\u00e2metros o comando diff \nyears\nmonths\nweeks\ndays\nhours\nminutes\nseconds\nmilliseconds\n*\/\n\n<\/pre>\nOutro plugin \u00fatil \u00e9 o Precise Range. Este traz de forma explicita a diferen\u00e7a entre duas datas.
\nDownload e documenta\u00e7\u00e3o em : http:\/\/codebox.org.uk\/pages\/moment-date-range-plugin<\/a><\/p>\nPara traduzir a formata\u00e7\u00e3o de texto de sa\u00edda,\u00a0basta\u00a0editar o arquivo readable-range.js na vari\u00e1vel STRINGS.
\nOriginal:<\/p>\nvar STRINGS = {\nnodiff: '',\nyear: 'year',\nyears: 'years',\nmonth: 'month',\nmonths: 'months',\nday: 'day',\ndays: 'days',\nhour: 'hour',\nhours: 'hours',\nminute: 'minute',\nminutes: 'minutes',\nsecond: 'second',\nseconds: 'seconds',\ndelimiter: ' '\n};<\/pre>\nTraduzido:<\/p>\n
var STRINGS = {\nnodiff: '',\nyear: 'ano',\nyears: 'anos',\nmonth: 'm\u00eas',\nmonths: 'meses',\nday: 'dia',\ndays: 'dias',\nhour: 'hora',\nhours: 'horas',\nminute: 'minuto',\nminutes: 'minutos',\nsecond: 'segundo',\nseconds: 'segundos',\ndelimiter: ' '\n};<\/pre>\n\/\/ Datas Precisas:\nmoment(\"2014-01-01 12:00:00\").preciseDiff(\"2014-09-30 10:44:00\"); \/\/ 8 months 28 days 22 hours 44 minutes\nmoment.preciseDiff(\"2014-01-01 12:00:00\", \"2014-09-30 10:44:00\"); \/\/ 8 months 28 days 22 hours 44 minutes\n\n\/\/ Depois de traduzido:\nmoment(\"2014-01-01 12:00:00\").preciseDiff(\"2014-09-30 10:44:00\"); \/\/ 8 meses 28 dias 22 horas 44 minutos\nmoment.preciseDiff(\"2014-01-01 12:00:00\", \"2014-09-30 10:44:00\"); \/\/ 8 meses 28 dias 22 horas 44 minutos\n\n\/\/ Calculando o tempo de vida:\nvar data_de_nascimento = '1987-10-14';\nmoment(data_de_nascimento + \" 00:00:00\").preciseDiff( new Date() ); \/\/ \"26 anos 11 meses 16 dias 10 horas 52 minutos 27 segundos\"\n\n\/\/ou somente com o moment\nvar data_de_nascimento = moment('14-10-1987','DD-MM-YYYY');\nmoment(data_de_nascimento).preciseDiff( new Date() ); \/\/ \"26 anos 11 meses 16 dias 10 horas 52 minutos 27 segundos\"<\/pre>\nPlugin Strftime ajuda na formata\u00e7\u00e3o de sa\u00edda das datas, \u00a0Download e documenta\u00e7\u00e3o em: https:\/\/github.com\/benjaminoakes\/moment-strftime<\/a><\/p>\n
moment().strftime(\"%m\/%d\/%y %I:%M %p %Z\"); \/\/ 09\/30\/14 01:24 PM\nmoment().strftime(\"%d\/%m\/%y %H:%M\"); \/\/ \"30\/09\/14 13:24<\/pre>\nEste \u00e9 o primeiro post de dois sobre como trabalhar com\u00a0datas, o segundo ser\u00e1 em PHP. Acompanhe-nos no Facebook<\/a> e Google Plus<\/a> para receber todas novidades. <\/p>\n","protected":false},"excerpt":{"rendered":"
Trabalhar com datas em JavaScript se torna complicado quando queremos com exatid\u00e3o trazer diferen\u00e7as entre datas ou formatar datas para sair conforme precisamos. <\/p>\n","protected":false},"author":1,"featured_media":3586,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,15],"tags":[162,180],"class_list":["post-3577","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dicas","category-javascript","tag-datas-em-javascript","tag-destaque"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3577"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3577\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media\/3586"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}