Rodrigo Brito

Manipulando datas

Dateé uma função construtora baseada no valor de tempo, criando objetos que contém valores de data baseados no relógio interno do host.

É construído através do new Date(). Caso o construtor não receba parâmetros (as datas são em inglês) a data de referência será a data do momento da instanciação do objeto. Ex:

Os métodos getDay() e getMonth()retornam o índice do vetor que corresponde aos valores de dia da semana (de domingo a sábado) e mês (de janeiro a dezembro).

O getUTCHours() retorna o horário do meridiano de Greenwich e deve ser levado em consideração para implementações em que a diferença de fuso tem significância para alguma ação (promoções e ofertas por exemplo). Caso seja necessário aplicar o fuso, basta somar ou subtrair o fuso local. No exemplo acima, meu fuso local (de Brasília) seria "dateNow.getUTCHours() - 3".

O método getTime() retorna o tempo total em milissegundos desde o dia 1º de janeiro de 1970 no padrão UTC e pode ser utilizado para calcular transformações e diferença entre datas. No exemplo abaixo, uma data futura dateBirthday(meu aniversário deste ano) e subtraída desta a data atual dateNow. O método getTime foi utilizado para a obtenção do valor número em milissegundos partindo de um ponto inicial igual para as duas variáveis. Após a subtração, que resulta uma diferença de milissegundos, foi executada a divisão pelo total de milissegundos em um dia (24 para horas * 60 para minutos * 60 para segundos * 1000 para milissegundos). O Math.floor foi utilizado para arredondar para baixo., resultando em 54 dias. Ex:

Agora, será utilizado o conteúdo do projeto para um exemplo de aplicação do Date Object. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.

Exemplo prático:

No projeto, será acrescentada uma simulação de horário de funcionamento, que irá variar de acordo com o horário e dia da semana da visualização da página com o passado como parâmetro.

Uma observação: sempre valide as regras de negócio no backend, nunca deixe a validação sob a responsabilidade do front, pois este pode ser editado por qualquer usuário com conhecimento básico.

Preparando o html:

No index.html, foi realizada a seguinte inclusão de um item, na lista da seção contato, utilizando dataset:

Deixando no estilo!

No css, será aplicado ao item um círculo usando o pseudo-elemento after. Esse círculo tem como padrão um tom de vermelho para sinalizar "fechado". Quando o elemento estivar com a classe "open", que será adicionada via JS, o background passará a ser ver, sinalizando a abertura. O código foi declarado no base.css mesmo, por ser bem simples e pequeno. O código é o seguinte:

Agora o JS:

Usando modules, em um novo arquivo js chamado "opening-hours", importado no script principal, exportando como default a função openingHours().

A seleção do elemento foi realizada utilizando o data-week, mas poderia ser de qualquer dataset presente no item da lista (variável operation).

Para transformar o valor do data-week de string para um array contendo números que representam os índices de dias da semana, foi realizado um acesso através do atributo dataset e com o método split(), foi obtido o retorno de um aarray separando a string na vírgula. Contudo, o retorno ainda é uma string e para transformar em número através de iteração, o método map() foi utilizado o construtor Number, que transforma um valor em número caso seja possível: const dayWeek = operation.dataset.week.split(',').map(Number). A constante dayWeek agora tem como valor o seguinte: Array(5) [ 1, 2, 3, 4, 5 ]. O mesmo processo foi adotado para obter o horário.

Continuando, será necessário obter a data e hora do cliente para realizar a comparação. Uma constante dateNow instanciou o objeto Date para a extração do índice do dia e obtenção da hora local do cliente.

O método indexOf() foi utilizado para verificar se o valor do índice do dia está dentro do array correpondente aos dias de funcionamento. O indexOf retorna o índice ou -1 para um valor falso. Então, foi utilizado a comparação com o -1 para verificar a veracidade do retorno e caso esse valor esteja dentro e o horário local esteja entre o valor dos índices 0 e 1 da constante dayHour, passado como uma expressão, será aplicada a classe "open" do css definida para sinalizar o funcionamento.

O código final, bem simples, ficou o seguinte:

Resultado final (horário antes das 17):

Para visualizar o projeto em andamento, clique aqui.

Para baixar o projeto, clique aqui.