JavaScript para otimizadores: adicionando um seletor de data e hora

Todos nós já passamos por isso: a tarefa frustrante de adicionar manualmente a data em um formulário.

Agora, eu não sei sobre você, mas quando estou procurando o formato de data, meu cérebro fica sobrecarregado. Você está indo para MM/DD/AAAA? E se quisermos AAAA-MM-DD em vez disso? Quantos dias tem fevereiro de novo?

Esta postagem de blog o guiará por algumas funções JavaScript que ajudarão a otimizar seu código adicionando um campo de entrada DateTime Picker aos seus formulários.

Caso de negócios: adicionando um seletor de data e hora

Nesse cenário hipotético, chegamos à seguinte hipótese:

Para testar essa hipótese, vamos aplicar as alterações abaixo:

O código usado no experimento

Agora vamos para a parte divertida!

Para executar a alteração, executamos o código JavaScript abaixo na página de teste. Copie o código e experimente você mesmo!

 var dateInput = document.querySelector("#date");
var suportado = true;
var teste = document.createElement("input");
tentar {
  test.type = "data";
} pegar (e) {
  suportado = falso;
}
se (suportado) {
  dateInput.setAttribute("tipo", "data");
  dateInput.setAttribute("valor", getFormattedDate(0));
  dateInput.setAttribute("min", getFormattedDate(-1));
  dateInput.setAttribute("max", getFormattedDate(1));
}
function getFormattedDate(changeYear) {
  var hoje = new Date();
  var dd = String(today.getDate()).padStart(2, "0");
  var mm = String(hoje.getMonth() + 1).padStart(2, "0");
  var aaaa = hoje.getFullYear() + changeYear;
  dataformatada = aaaa + "-" + mm + "-" + dd;
  retornar data formatada;
}

Divisão do Código

1. Nova Sintaxe

O detalhamento começa analisando toda a nova sintaxe no exemplo acima. Como este artigo faz parte de uma série, verifique a documentação completa da sintaxe nos outros artigos da série (incluindo este artigo publicado no blog Convert).

try {} catch (erro) {} é uma instrução que você pode usar para testar códigos específicos e detectar erros, se necessário. Quando o código é executado e nenhum erro ocorre, ele ignora a captura.

Se ele retornar um erro, ele irá pegá-lo. O script agora executará o código entre o corpo de captura. Como ele passa o erro na função, você pode console.log para localizar o problema específico.

Normalmente, quando você se depara com um erro, o código para de ser executado. Essa instrução permitirá que você continue com seu script quando esperar um erro.

.type é um método que define o valor do atributo “type” de um elemento no DOM.

.getDate() é um método que retorna o dia de um objeto de data. Ele retornará o dia como um número.

.padStart(targetLength, padString) é um método que nos permite preencher uma string com um caractere diferente para a quantidade que queremos. Você passa o número de vezes que deseja preencher uma string no argumento targetLength. Você passa a string que é usada como preenchimento no argumento padString. Ele levará em consideração o comprimento do padString ao preenchê-lo.

.getMonth() é um método que retorna o mês do objeto de data como um número. Começa a contar em 0, então será janeiro. O número 11 será dezembro.

String() é um método que tenta converter o argumento que é passado para um valor de string. Esse método geralmente é usado quando você deseja converter números em strings.

.getFullYear() é um método que retorna o ano de um objeto de data.

return é uma declaração comum e importante ao trabalhar com funções. Às vezes, você precisa executar uma função para obter dados e usá-los em outro lugar. Um estado de retorno em uma função encerrará a execução da função e retornará o que estiver à direita da instrução.

2. Lógica

 var dateInput = document.querySelector("#date");

Começamos selecionando os campos de entrada de data com o método querySelector. Adicionamos o id=”date” ao nosso campo de entrada para usar #date como nosso seletor. Atribuímos o elemento à nossa variável dateInput recém-declarada.

 var suportado = true;

Em seguida, declaramos a variável suportada. Atribuímos o booleano true à nossa variável recém-declarada. Alteraremos esse valor posteriormente se o navegador não suportar um seletor de data e hora.

 var teste = document.createElement("input");

Precisamos criar um campo de entrada que usaremos apenas para verificar se esse tipo é suportado. Fazemos isso com o método .createElement.

Passamos “input” como uma string para criar o elemento de entrada. Salvamos esse elemento na variável de teste recém-declarada.

Usaremos a seguinte instrução try para verificar se nossa alteração é suportada:

 tentar {

Comece escrevendo a palavra-chave try. Abrimos a instrução com um colchete.

A função tentará tudo entre esses colchetes. Ele apenas executará o código para ver se ocorre um erro.

 test.type = "data";

Podemos testar se o tipo de data é suportado definindo o tipo de data para nosso campo de entrada de teste. Se não ocorrer nenhum erro, sabemos que o navegador o suporta.

 } pegar (e) {

Em seguida, escrevemos nossa instrução catch após o colchete de fechamento. A parte entre as chaves será executada quando detectarmos um erro.

Colocando um “e” como argumento, podemos usar isso em nossa instrução catch. Você pode usar isso para console.log do erro específico, por exemplo.

 suportado = falso;

Se detectarmos o erro, precisamos alterar a variável suportada para false. Usaremos este valor mais tarde, para determinar se queremos ou não executar a mudança.

 }

Em seguida, feche a instrução catch com um colchete de fechamento.

 se (suportado) {

Usaremos o valor da variável suportada para executar uma instrução if. Se a variável for verdadeira, ela executará a instrução. Dessa forma, garantimos que o navegador não seja incompatível.

 dateInput.setAttribute("tipo", "data");

Para adicionar um seletor de data e hora, basta adicionar o tipo de atributo com o valor data à nossa variável dateInput. Dependendo do navegador, ele agora mostrará um ícone no qual você pode clicar para selecionar as datas.

 dateInput.setAttribute("valor", getFormattedDate(0));

Também queremos adicionar uma data padrão ao campo de entrada. Você pode definir a data padrão de um campo de data adicionando um atributo de valor que contém a data como uma string.

Use a função getFormattedDate, que definimos, para obter a data de hoje no formato correto. A função pode adicionar ou remover anos inserindo um número como argumento ao chamá-la.

 dateInput.setAttribute("min", getFormattedDate(-1));

Dessa forma, podemos usar esta linha para definir a data mínima do seletor para 1 ano antes de hoje. Você pode fazer isso passando -1 como argumento. Isso restringirá o usuário de selecionar uma data anterior à data mínima.

 dateInput.setAttribute("max", getFormattedDate(1));

Faça o mesmo para a quantidade máxima que os usuários podem selecionar. Defina o ano máximo daqui a um ano passando um “1” como argumento.

 }

Feche a instrução if com um colchete. Essa alteração agora será visível no campo de entrada.

Ainda precisamos definir a função que é usada em nossa instrução if. Queremos que esta função retorne uma data no seguinte formato: aaaa-mm-dd.

 function getFormattedDate(changeYear) {

Para obter esse resultado, comece usando a palavra-chave function para definir um. Damos o nome getFormattedDate à nossa função.

Para ter um pouco de controle sobre que tipo de data é retornada, defina changeYear como o argumento.

Podemos usar isso como a palavra-chave no corpo da função para controlar o que é passado quando a função é chamada.

 var hoje = new Date();

Inicie este corpo de função criando um novo objeto de data. O momento em que o novo objeto de data for criado será a hora armazenada. Isso significa que podemos atribuir nosso novo objeto à variável today recém-declarada.

 var dd = String(today.getDate()).padStart(2, "0");

O método getDate obtém os dias da nossa data. Quando os dias estiverem em um dígito, ele adicionará um 0 antes do número com o método padStart.

Caso contrário, este seria o formato errado para o nosso campo de entrada. Também precisamos converter o número em uma string para que possamos concatenar nossos números mais tarde. Caso contrário, o programa usará adição.

 var mm = String(hoje.getMonth() + 1).padStart(2, "0");

Aqui, usamos o getMonth para obter os meses da data de hoje. Fazemos uma pequena correção adicionando 1 ao número retornado. Em seguida, preenchemos o número com um zero se o número for um dígito. Esse método garante que tenhamos o formato correto para os dados do mês.

 var aaaa = hoje.getFullYear() + changeYear;

Em seguida, obtemos o ano de hoje com o método getFullyear. Use o número que é passado pela função para alterar o ano.

 dataformatada = aaaa + "-" + mm + "-" + dd;

Em seguida, combinamos todas as nossas variáveis ​​em uma data formatada usando concatenação de strings.

 retornar data formatada;

Retornamos a variável formattedDate para que possa ser usada pelo chamador da função.

 }

Por fim, fechamos nossa função com um colchete e encerramos nosso script. O script pode usar essa função antes de ser declarada porque as funções são içadas para o topo do código. O mesmo acontece com as variáveis. O código pode ser executado um pouco mais rápido se você mover a função formattedDate acima da instrução if.

3. Exercício

Então, agora que você tem todo o processo definido, tudo o que resta é você experimentar. E não se esqueça de se divertir com isso!

Vá em frente e altere o campo de entrada, para que o campo min contenha a data que é exatamente dois anos a partir de hoje. Em seguida, adicione uma data máxima de dois anos a partir de agora. Boa sorte!

Não consegue descobrir? Envie-me uma mensagem no LinkedIn, e eu vou te ajudar!

E caso você tenha perdido nosso último artigo, confira como inserir uma seção de desconto total em seu site e outras técnicas avançadas de otimização de conversão.