0

Tenho uma página que é alimentado com informações do Banco de Dados Mysql. Esta página também contém um Input Text com calendário dataPicker. O problema é que apenas a primeira linha do looping funciona com DataPicker, as demais não.

Formulario:

    while($fetch = mysql_fetch_assoc($xxx)){ 

     <input  name="protocolo" id="protocolo" type="text" 
     placeholder="00/00/0000" 
     style="width:100px;font-size: 13px" class="form-control input-md">

DataPicker

<script type="text/javascript">
$(document).ready(function(e) {
    $("#protocolo").datepicker({
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        dateFormat: 'yy-mm-dd',
        nextText: 'Próximo',
        prevText: 'Anterior'
    });
});
</script>
     } ?>

Ambos estão dentro do While, testei colocando o DataPicker fora do white, porem o problema permanece, apenas a primeira linha do While abre o calendário, as demais não.

1 Resposta 1

0

O atributo ID deve ser único. Quando você tem mais de dois elementos com o mesmo atributo ID. O JavaScript irá considerar apenas o primeiro.

Ao invés de utilizar ID, utilize outros atributos como class, data-* etc.

Ex:

while($fetch = mysql_fetch_assoc($xxx)){ 
    <input name="protocolo[]" type="text" 
            placeholder="00/00/0000" 
            style="width:100px;font-size: 13px" class="form-control protocolo input-md"/>
}

JavaScript:

<script type="text/javascript">
$(document).ready(function(e) {
    $(".protocolo").datepicker({
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        dateFormat: 'yy-mm-dd',
        nextText: 'Próximo',
        prevText: 'Anterior'
    });
});
</script>

O mesmo vale para o atributo name. Quando você enviar o formulário, apenas um dos valores serão enviados os repetidos serão descartados, por isso você deve usar name="protocolo[]"

5
  • neste caso eu acrescento apenas o [] no ID do input id="protocolo[]" e altero o # pelo . no datapicker? Pois, fiz esta alteração e o datapicker parou de responder, agora nem a primeira linha sobe o calendario.
    – user54154
    Commented 19/02/2018 às 17:33
  • @user54154 Não! O [] só pode ser usado no atributo name. Você deve adicionar a classe protocolo no input (Ex: class="protocolo form-control...") e no javascript utilizar $(".protocolo"). Se possível copie e cole o código que postei na resposta e verifique. Commented 19/02/2018 às 17:36
  • Boaaa, era isso mesmo. Muito obrigado pela ajuda e aprendi mais uma :)
    – user54154
    Commented 19/02/2018 às 17:41
  • sabe me dizer porque ele só alimenta o primeiro Input com data? Se eu alimentar qualquer input que não seja o primeiro, ele vai mesmo assim, adiciona a data no primeiro Input.
    – user54154
    Commented 19/02/2018 às 17:55
  • Ele só alimenta o primeiro (quando está com o ID) pois é uma regra do HTML. Aqui há uma resposta mais completa sobre esse "problema": pt.stackoverflow.com/questions/57582/… Commented 19/02/2018 às 17:59

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 .