Entrar Ainda não tem acesso?
1
resposta

Por que preciso usar format(DD/MM/YYY) em criaData() tanto em carregaTarefa.js quanto em criaData.js?

Referente ao curso JS na Web: Armazenando dados no navegador, no capítulo Ordenando as tarefas e atividade Organizando as tarefas

por Estudante
| 75.4k xp | 46 posts

No final do arquivo carregaTarefa.js, nós chamamos a função criaData(), dentro do tarefasCadatradas.forEach:

    tarefasCadastradas.forEach(function(event) {
        const dia = moment(event.dataFormatada, 'DD/MM/YYYY')
        // Em criaTarefa.js:
        // const calendario = document.querySelector('[data-form-date]')
        // const data = moment(calendario.value)
        // const dataFormatada = data.format('DD/MM/YYYY')
        lista.appendChild(criaData(dia))

Observe que a const 'dia' contém a const dataFormatada que já usa o format(DD/MM/YYYY). E observe que 'dia' está sendo passado como parâmetro para a function criaData(dia).

Ao analisar criaData.js, percebemos que novamente há utilização do format(DD/MM/YYY) na criação do elemento

. Como criaData() recebe o parâmetro 'dia' lá em carregaTarefa.js, entendo que o format está sendo usdo 2 vezes ao criar o elemento

: 

Se:

const dia = moment(event.dataFormatada, 'DD/MM/YYYY')

E:

const dataFormatada = data.format('DD/MM/YYYY')


Logo:

<p class="content-data">${moment(event.data.format('DD/MM/YYYY'), 'DD/MM/YYYY').format('DD/MM/YYYY')}</p>
export const criaData = function (data) {
    //Em carregaTarefa.js criaData recebe o parâmetro 'dia': criaData(dia).
    //Portanto, onde há 'data', será substituído por 'dia', recebido como parâmetro em carregaTarefa.js.
    const tarefas = JSON.parse(localStorage.getItem('tarefas'))
    const dataTopo = document.createElement("li")
    const conteudo = `<p class="content-data">${data.format('DD/MM/YYYY')}</p>`

    dataTopo.innerHTML = conteudo

    tarefas.forEach((tarefa) => {
        dataTopo.appendChild(Tarefa(tarefa))
    });
1 resposta
por Eduardo Tioma
| 233.8k xp | 261 posts
Instrutor

Oi Bruno!

Pelo que eu entendi, você está questionando o por quê ter que continuar informando 'DD/MM/YYYY' como parâmetro da função moment() se já convertemos anteriormente para o formato adequado usando o .format('DD/MM/YYYY'), correto?

O padrão da biblioteca moment espera receber uma data com o formato "DD-MM-YYYY", pois é o comum dos Estados Unidos. Se quisermos criar um objeto com o padrão brasileiro "DD/MM/YYYY", temos que informar isso pra função, então passamos esse padrão como parâmetro secundário. Caso contrário a função retorna um erro. Esse segundo parâmetro só serve pra função entender o formato, mas o objeto criado ainda é no padrão americano.

Olhe esse exemplo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

A variável dataPadrao foi criada utilizando o padrão americano e a dataFormatada foi criada com o padrão brasileiro, sendo necessário informar o formato "DD/MM/YYYY". Apesar de terem sido criadas de modo diferente, ao fazer um console.log() podemos ver que a data é mostrada no padrão americano:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Sendo assim, se no projeto foi decidido passar as datas no padrão brasileiro, será necessário sempre converter a data e depois informar o padrão na hora de criar a nova data 

const dataFormatada = data.format('DD/MM/YYYY');
const novaData = moment(dataFormatada, 'DD/MM/YYYY )

ou de maneira mais comprimida:

const novaData = moment(data.format('DD/MM/YYYY'), 'DD/MM/YYYY )

Espero que tenha ficado claro essa necessidade de converter e informar o padrão toda vez. Entretanto, confesso que é muito repetitivo e caso você esqueça de fazer isso uma vez, o programa vai dar erro. Na minha opinião, as datas deveriam ser informadas sempre no padrão americano e convertidas apenas onde fosse necessário mostrar para o usuário, como em:

<p class="content-data">${moment(event.data.format('DD/MM/YYYY'), 'DD/MM/YYYY').format('DD/MM/YYYY')}</p>

Poderia ser mudado para

<p class="content-data">${moment(event.data).format('DD/MM/YYYY')}</p>

Facilitando assim o trabalho do desenvolvedor e mantendo legível para o usuário.

Espero ter ajudado! Se tiver mais alguma dúvida pode postar aqui! :)