Procurar

Categorias

Posts recentes

Arquivo

Blog feeds

Bookmarks


Data em Javascript como na função date() do PHP
quarta, 15 de novembro de 2006

Sempre tive a idéia de que trabalhar com datas no Javascript era algo chato, que exigia muitas linhas de código para se conseguir algo simples. Bem, isso hoje certamente não é mais verdade, com a quantidade de scripts e frameworks e todo tipo de interfaces para facilitar a vida do programador, mas resolvi fazer um script que me permitisse manipular strings de data tão facilmente como no PHP. Naturalmente, nem todas as opções de date() estão disponíveis aqui, mas acredito que facilitou muito o trabalho de colher e formatar informações separadas para formar um frase simples como ‘Segunda, 3 de maio de 2006′.

Criei então alguns novos métodos adicionados ao objeto Date.prototype. O principal deles é o Date.toFormattedString(), que devolve a string enviada, com alguns caracteres especiais convertidos para valores de data e hora (veja a tabela de substituição), como na função date() do PHP.
O resultado pode ser em inglês ou português, mas pode-se também definir outros idiomas dinamicamente. Além do Date.toFormattedString(), há algumas outras funcionalidades. Segue o script e algumas explicações.

Há métodos para:

  • Formatar data de acordo com uma string de formatação
  • Trabalhar com nomes de dias e meses em qualquer idioma
  • Converter datas para o formato aceito em arquivos RSS (RFC 2822)
  • Converter datas para o formato aceito em arquivos ATOM (RFC 3339)
  • Determinar o fuso horário em horas, minutos ou segundos
  • Manter os valores do objeto sempre atualizados
  • Acionar uma função de relógio a intervalos regulares
  • Métodos extras
    • Array.walk -> aplica determinada função a todos os elementos do array
    • String.UCFirst -> transforma a primeira letra da string para caixa alta

Pegue o arquivo aqui date.prototype.js

Exemplo de uso:

var dat = new Date();
var uc_output = dat.toFormattedString(’l, j \de F’);
var lc_output = dat.toFormattedString(’l, j \de F’, ‘m’);
alert(uc_output+’ - ‘+lc_output);
// mostra algo como: Terça, 5 de Setembro - Terça, 5 de setembro

Podemos definir o idioma de saída da função toFormattedString().
Para isso há os métodos addLang() e setLang(), que devem ser chamados antes de toFormattedString().
Apenas os idiomas inglês (’en’) e português (’pt-br’) estão disponíveis no sistema e o padrão é inglês.
Para usar português, basta chamar setLang(), passando o parâmetro ‘pt-br’.

Segue uma pequena referência das funções:

boolean Date.addLang(lang_id, days, months)


string lang_id -> string identificador do idioma (’en’, ‘it’, ‘pt-br’, etc…)
array days -> nomes dos dias num array (domingo a sábado)
array_months -> nomes dos meses num array (janeiro a dezembro)

Adiciona nomes de dias e meses em um idioma ao sistema. Equivale a definir as propriedades Date.days[’id_do_idioma’] (array com os nomes dos dias) e Date.months[’id_do_idioma’] (array com os nomes dos meses) com os nomes enviados. Veja o exemplo 1.

boolean Date.setLang(lang_id)

string lang_id -> string identificador do idioma (’en’, ‘it’, ‘pt-br’, etc…)

Define o idioma de trabalho para id enviado. O id precisa fazer referência a um idioma existente (’en’ ou ‘pt-br’) ou que tenha sido adicionado previamente com Date.addLang(). Equivale a definir a propriedade Date.lang para o id enviado. Veja o exemplo 1.

Para adicionar e selecionar um idioma, use addLang() e depois setLang(), assim:

// Exemplo 1 - adicionando o idioma italiano, por ex.
var dat = new Date();
var days = ["domenica", "lunedì", "martedì", "mercoledì", "giovedì", "venerdì", "sabato"];
var months = ["gennaio", "febbraio", "marzo", "aprile", "può", "giugno", "luglio", "agosto", "settembre", "ottobre", "novembre", "dicembre"];
dat.addLang(’it’, days, months); // adiciona o idioma
dat.setLang(’it’); // seleciona o idioma

Para retornar valores formatados segundo especificações oficiais, há os métodos toRFC2822 e toRFC3339.

string Date.toRFC2822() sem parâmetros


var dat = new Date();
alert(dat.toRFC2822());
// mostra algo como: Tue, 5 Sep 2006 14:17:32 +03:00

Essa função formata a data definida ao instanciar o objeto Date() de acordo com as especificações no RFC 2822.
>> Tipo de data suportado em formatos RSS.

string Date.toRFC3339(no_timezone)


boolean no_timezone -> se true, retorna uma string sem a parte time zone (AAAA:MM:DDTHH:MM:SSZ)

Essa função formata a data definida ao instanciar o objeto Date() de acordo com as especificações no RFC 3339.
>> Tipo de data suportado em formatos ATOM.

var dat = new Date();
alert(dat.toRFC3339()); // mostra algo como: 2006-09-05T14:17:32+03:00
alert(dat.toRFC3339(true)); // mostra algo como: 2006-09-05T14:17:32Z

Quando instanciamos um objeto Date, a hora de trabalho é relativa ao momento em que este foi instanciado.
Para construir um relógio, por exemplo, com precisão de segundos, normalmente se executa uma função que instancia o objeto novamente a cada segundo, para obter a hora atualizada. A função descrita a seguir executa esse processo, sem precisar instanciar o objeto novamente.

Date.setClock([interval [, code]])


number interval -> intervalo de tempo em milissegundos para a atualização
string code -> código (como string) a ser executado a cada atualização

Mantém o momento para o qual o objeto Date aponta sempre atualizado, de acordo com o parâmetro interval ou a cada 1 segundo, se ele for omitido.. Se seu relógio não precisa de segundos (ou se não se trata de um relógio), seria aconselhável definir interval com um intervalo maior (1 minuto, por exemplo). Opcionalmente, executa a string de código code a cada atualização. Isso torna possível usar o método como uma espécie de setInterval, onde code é executado a cada interval milisegundos. Você pode querer apenas ter o objeto atualizado, para quando o usuário executar determinada ação, a hora estar certa. Para isso basta executar o método enviando o parâmetro interval ou nenhum.

Métodos extra

string String.UCFirst()


Converte a primeira letra da string para caixa alta

array Array.walk(func)


function func -> função a ser aplicada aos elementos do array
Transforma todos os elementos do array através da função enviada.

 

Tabela de substituição

Caracter Descrição Exemplos de retorno
a Ante / pós meio dia (minúsculas) am / pm
A Ante / pós meio dia (maiúsculas) AM / PM
d Dia do mês (2 digitos) 01 - 31
D Dia da semana, 3 letras dom - sáb
F Nome de um mês janeiro - dezembro
g Horas, formato 12h (1-2 dígitos) 1 - 12
G Horas, formato 24h (1-2 dígitos) 0 - 23
h Horas, formato 12h (2 dígitos) 01 - 12
H Horas, formato 24h (2 dígitos) 00 - 23
i Minutos 00 - 59
j Dia do mês (1-2 dígitos) 1 - 31
l Dia da semana domingo - sábado
m Mês (2 dígitos) 01 - 12
M Nome de um mês, 3 letras jan - dez
n Mês (1-2 dígitos) 1 - 12
s Segundos 00 - 59
U Segundos desde 1970-01-01 00:00:00 Ex.: 1157322265473
w Representação numérica do dia da semana 0 (domingo) - 6 (sábado)
Y Ano, 4 dígitos Ex.: 1999 ou 2003
y Ano, 2 dígitos Ex: 99 ou 03
Z Fuso horário em minutos Ex.: 180 (+03:00)

2 Comentários »

Feeds para os comentários nesse post:
TrackBack: http://cauguanabara.blogsome.com/2006/11/15/6/trackback/

  1. É isso aí, gostei do seu blog novo. Resolveu abandonar o blogger. Deve tá sofrendo um monte pra digitar os códigos (é, já tive o problema também).

    Parabéns, continue com seus posts, estão realmente bons

    Por JulioGreff em 2006-11-15 06:47:52, quarta

  2. Valeu júlio. É verdade… difícil com os códigos aqui, mas estou fazendo um lance que melhorou um pouco. As aspas simples são substituídas por acentos (ou sei lá o que). Veja:
    <body onload=”document.body.innerHTML = document.body.innerHTML.replace(/(&#8216;|&#8217;|&#8242;)/g,'\'');”>
    Isso desfaz a coisa. (porra, difícil escrever essa linha aí em cima!)
    Abraço

    Por Administrator em 2006-11-15 06:47:52, quarta

Say something! »















Por favor digite o texto da imagem acima.

lamp! Mapa do site
Data em Javascript como na função date() do PHP