Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

DATA com Javascript

Procurando por uma solução encontrei essa função para no input type ="hidden" eu possa enviar para o formulário a data atual mas não está funcionando o retorno é:

DateConverter.js:14 Uncaught Error: A data deve estar no formato dd/mm/aaaa
    at Function.paraData (DateConverter.js:14)
    at RegistroController._criaRegistro (RegistroController.js:46)
    at RegistroController.adiciona (RegistroController.js:28)
<script type="text/javascript">
    window.onload = function() {
       var currentDate = new Date()
    var day = currentDate.getDate()
    var month = currentDate.getMonth() + 1
    var year = currentDate.getFullYear()
    document.getElementById("data").innerHTML =("<b>" + day + "/" + month + "/" + year + "</b>")
    }
    </script>
        <div class="form-group"
            <input type="hidden" id="data" class="form-control"  />
        </div>

esse é o data converter:

class DateConverter {

    constructor() {
        throw new Error('Esta classe não pode ser instanciada');
    }

    static paraTexto(data) {
        return `${data.getDate()}/${data.getMonth() + 1}/${data.getFullYear()}`;
    }
    static paraData(texto) {
        if (!/\d{2}\/\d{2}\/\d{4}/.test(texto))
            throw new Error('A data deve estar no formato dd/mm/aaaa');
        return new Date(...texto.split('/')
            .reverse()
            .map((item, indice) =>
                item - indice % 2));
    }
}

registroController

class RegistroController {

    constructor() {

        const $ = document.querySelector.bind(document);
        this._inputData = $('#data');
        this._inputNome = $('#nome');
        this._inputTipo_documento = $('#tipo_documento');
        this._inputNumero_documento = $('#numero_documento');


        this._registros = new Bind(
            new Registros(), 
            new RegistrosView('#registros'),
        'adiciona', 'esvazia',
        );

        this._mensagem = new Bind(
            new Mensagem(),
            new MensagemView('#mensagemView'),
            'texto'
        );
         }

    adiciona(event) {

        event.preventDefault();
        this._registros.adiciona(this._criaRegistro());
        this._mensagem.texto = 'Registro efetuado com sucesso';
        this._limpaFormulario();

    }


    _limpaFormulario() {
        this._inputData.value = '';
        this._inputNome.value = '';
        this._inputTipo_documento.value = '';
        this._inputNumero_documento.value = '';
        this._inputData.focus();
    }

    _criaRegistro() {
        // retorna uma instância de registro
        return new Registro(
            DateConverter.paraData(this._inputData.value),
            this._inputNome.value,
            this._inputTipo_documento.value,
            parseFloat(this._inputNumero_documento.value)
        );
    }

    apaga() {

        this._registros.esvazia();
        //this._registrosView.update(this._registros);
        this._mensagem.texto = 'Negociações apagadas com sucesso';
    }

}
8 respostas

Sergio, boa tarde.

O correto seria passar a data para a propriedade 'value' do input.

document.getElementById("data").value = day + "/" + month + "/" + year;

Acredito que consiga o que gostaria.

Se pude ajudar, marque a resposta como solucionada. Abs

obrigado pelo retorno Murilo, fiz a correção que sugeriu e ainda apresenta os seguintes erros nos arquivos DateConverter e RegistroController:

Uncaught Error: A data deve estar no formato dd/mm/aaaa
    at Function.paraData (DateConverter.js:14)
    at RegistroController._criaRegistro (RegistroController.js:46)
    at RegistroController.adiciona (RegistroController.js:28)
paraData @ DateConverter.js:14
_criaRegistro @ RegistroController.js:46
adiciona @ RegistroController.js:28

Este é o index que alterei seguindo sua sugestão:

<script type="text/javascript">
        window.onload = function() {
           var currentDate = new Date()
        var day = currentDate.getDate()
        var month = currentDate.getMonth() + 1
        var year = currentDate.getFullYear()
        document.getElementById("data").value = day + "/" + month + "/" + year;
        }
        </script>
</head>

<body class="container">

    <h1 class="text-center">Registro de Entradas</h1><br>

    <!-- nova tag! name="txtData"-->
     <div id="mensagemView"></div>

    <form class="form">

        <div class="form-group">
                <label for="nome">Data</label>
            <input type="hidden" id="data"  class="form-control" readonly=“true”/>
        </div>

Sergio, desculpe minha falta de atenção, mas a sua expressão regular está validando apenas se a data vier com mês de 2 dígitos, e sua data vem com apenas 1.

Mude conforme abaixo para aceitar "\d{1,2}" um ou dois dígitos no mês e no dia:

function paraData(texto) {
        if (!/\d{1,2}\/\d{1,2}\/\d{4}/.test(texto))
            throw new Error('A data deve estar no formato dd/mm/aaaa');

Espero que agora ajude. Não esqueça de marcar como solucionada se pude ajudar.

Abs

Oi Murilo, obrigado, funciona sem erro, mas agora ele insere NaN/NaN/NaN no campo da data na listagem não a data de hoje e o id = data que aciona o script não está gerando a data. Nâo sei como fazê-lo e nem porque. Já tentei de várias formas.

está exibindo a data assim:

esse é a listagem da inserção:

DATA            NOME    TIPO DOCUMENTO   NUMERO DOCUMENTO
NaN/NaN/NaN    Sergio          rg                11111

Deixa te explicar melhor, eu comprei o livro do Cangaceiro Javascript , autor Flavio Almeida, aqui da casa do código, por enquanto não estou utilizando o node.js (vou entrar nesse capítulo hoje) então por enquanto as inclusões aparecem na listagem diretamente assim que é incluido. O modelo é igualzinho do livro, mas eu quis inventar um registro de entrada onde, ao invés de o usuário digitar a data de hoje, (assim é o exercicio), o sistema incluiria automaticamente a data e a hora de hoje (input=hidden). Mas agora estou apanhando para fazer isso. Eu enviei a mesma pergunta para o fórum do livro da casa do código (faz uma semana) e até hoje não responderam. Só aqui vc. está tentando me ajudar.

Sergio, para isso estar acontecendo só pode ser a ordem de execução das funções javascript ou passagem de parâmetros entre o form e o controller. Eu fiz um teste básico através do código abaixo e usei a forma mais simples que pude para testar as funções. Você pode conferir que funciona e depois usar os comandos Console.log([VALOR]) no seu código para exibir conteúdo de variáveis e ver o resultado no console ou usar o comando "debugger" no seu código também, que pausa a execução do script quando vc estiver com o F12 no browser.

Salve como HTML esse código, abra e dê F5 se precisar... Veja:

<!DOCTYPE html>
<html>
<head></head>
<body class="container">
    <h1 class="text-center">Registro de Entradas</h1><br>
    <div id="mensagemView"></div>
    <form class="form">
        <div class="form-group">
            <input type="hidden" id="data"  class="form-control" readonly=“true”/>
        </div>
    </form>
    <script type="text/javascript">
        window.onload = function() {
            var currentDate = new Date();
            var day = currentDate.getDate();
            var month = currentDate.getMonth() + 1;
            var year = currentDate.getFullYear();
            document.getElementById("data").value = day + "/" + month + "/" + year;
            alert(paraData(document.getElementById("data").value));
        }
        function paraData(texto) {
            if (!/\d{2}\/\d{1,2}\/\d{4}/.test(texto))
                throw new Error('A data deve estar no formato dd/mm/aaaa');
            return new Date(...texto.split('/')
                .reverse()
                .map((item, indice) => item - indice % 2));
        }
    </script>
</body>
</html>

Torço para que dessa vez dê certo! Abs

Muito obrigado Murilo, executei esse exemplo que me enviou e realmente os dados estão sendo passados mas ao observar o alert ele está exibindo:

Fri Sep 13 2019 00:00:00 GMT-0300 (Horário Padrão de Brasília)

E será que esse parâmetro desta forma que está sendo enviada não está sendo entendida pela função paraData e assim está mostrando o erro NaN/NaN/NaN no form? Será que não deveria estar indo no formato 13-09-2019 00:00:00 porque no script do window.onload estamos dizendo para transformar em:

document.getElementById("data").value = day + "/" + month + "/" + year;

Nossa, tá dificil !!!

Tentei alterar a posição do document.getElementById no inicio do script mas aí não funciona. Somente funciona sem erro no console se deixar como vc. sugeriu. Como vc. demonstrou, o problema não estaria na inclusão dos dados, mas na hora de exibir no form. Abaixo está a função paraTexto que exibe a inclusão dos dados no form

static paraTexto(data) {
        return `${data.getDate()}/${data.getMonth() + 1}/${data.getFullYear()}`;
    }

Esse é o index.js que faz exibição do form no index.html

var campos = [
    document.querySelector('#data'),
    document.querySelector('#nome'),
    document.querySelector('#tipo_documento'),
    document.querySelector('#documento')
    ];

    console.log(campos); // verificando o conteúdo do array

    var tbody = document.querySelector('table tbody');

    document.querySelector('.form').addEventListener('submit', function(event) {

        // cancelando a submissão do formulário
event.preventDefault();

var tr = document.createElement('tr');

campos.forEach(function(campo) {

    var td = document.createElement('td');
    td.textContent = campo.value;
    tr. appendChild(td);

tbody.appendChild(tr);

// limpa o campo da data
campos[0].value = '';
// limpa o campo da nome
campos[1].value = '';
// limpa o campo do tipo documento
campos[2].value = '';
//limpa o campo numero documento
campos[3].value = 1;
// foca no campo da data
campos[0].focus();

});
});

solução!

Dê um Console.log abaixo do código e veja o resultado:

document.getElementById("data").value = day + "/" + month + "/" + year;
console.log(document.getElementById("data").value);

No meu o resultado é 13/9/2019

Porém sua função paraData retorna um tipo "Date" do javascript e a sua exibição no alert está correta.

Encha seu código de console.log e veja como está o valor de cada variável e descobrirá porque está chegando NaN

Murilo, excelente. Muito obrigado pelas dicas foram valiosas para eu conseguir descobrir o erro e também aprender. O problema estava no arquivo Registro.js Como cheguei a essa conclusão? No DateConverter.js no static para Data(texto) que você sugeriu a mudança na expressão regular, fiz uma mudança no return new Date para return new Data e automaticamente veio um erro referenciando ao arquivo Registro.js. Fui até o arquivo onde ele chamava o new Date e percebi que era o this.data = new Date(data.getTime()) assim fiz como me sugeriu o console.log:

console.log(_data.getTime());

e o resultado foi Nan

Alterei esse trecho para this._data = new Date(); ficando assim:

constructor(_data, _nome, _tipo_documento, _numero_documento) {
        Object.assign(this, {_nome, _tipo_documento, _numero_documento});
       this._data = new Date(); 
        Object.freeze(this);
        }

e a data funcionou certinho.

Muito obrigado Murilo

abração!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software