2

Tenho um formulário:

    <div class="span12" style="padding: 10px;">
        <form action="<?php echo base_url()?>index.php/chamadas" method="get">
        <div class="span2">
            <label for="">Data Inicial:</label>
            <input type="date" name="dataInicial" class="span12" />
        </div>
        <div class="span2">
            <label for="">Data Final:</label>
            <input type="date" name="dataFinal" class="span12" />
        </div>
        <div class="span2">
            <label for="">&nbsp;</label>
            <button class="btn btn-inverse span12"><i class="icon-print icon-white"></i> Filtrar</button>
        </div>
        </form>
    </div>

Gostaria de ao preencher a data inicial, automaticamente já ir para o outro campo data final. Alguém pode me ajudar? Muito obrigado!

1 Resposta 1

4

Só precisas de ouvir o evento change e copiar os valores de um para o outro. Assim por exemplo:

var inicial = document.querySelector('[name="dataInicial"]');
var final = document.querySelector('[name="dataFinal"]');

inicial.addEventListener('change', function () {
    final.value = this.value;
});

jsFiddle: http://jsfiddle.net/q6ujsa4v/

6
  • Não gostaria de copiar um para o outro, gostaria apenas de passar um campo para o outro, sem precisar usar o tab, apenas pular um campo para o outro... e gostaria também de ter um checkbox... que quando eu selecionar, ele preenche estes dois campos, será que dá? Commented 11/06/2015 às 22:38
  • @AndréBaill então basta teres final.focus(); dentro do event handler. Explica melhor o que queres fazer com o checkbox... dar uma data defenida?
    – Sergio
    Commented 11/06/2015 às 22:48
  • Quase isso @sergio, mas ali quando preenche a data inicial, no ANO, se eu preencher apenas um dígito, ele já pula para o outro dígito. Commented 11/06/2015 às 22:53
  • Com referência ao checkbox, eu quero colocar um que ao clicar, ele ative um determinado periodo dentro destas datas: Exemplo: cliquei no checkbox, ele coloca a data: 21/05/2015 e 20/06/2015. Commented 11/06/2015 às 22:55
  • @AndréBaill e onde estão essas datas? podes adaptar o meu jsFiddle até não saberes como continuar? junta HTML que tenha essas datas algures que eu ajudo no resto
    – Sergio
    Commented 11/06/2015 às 23:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .