2

Estou utilizando o plugin datepicker

Todos os meus input de datepicker, possui a classe chamada datepicker

<input type="text" class="datepicker">

Para assim, eu ter apenas uma configuração para o datepicker e poder utilizar em todas as páginas, então faço a configuração em um arquivo dateconfig.js, nesse arquivo eu possuo apenas o seguinte código:

 $(".datepicker").datepicker({
        dateFormat: 'dd/mm/yy',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
    });

Mas eu tenho uma página com um table e nela existe o input com a class="datepicker"

Mas quando eu chamo uma modal via ajax, e nela existe também uma input, ela não carrega o plugin, então na página dessa modal eu copio o código de configuração e adiciono dentro de uma tag <script> //Codigo de configuração citado acima </script>, fazendo isso ele adiciona o plugin, mas lá na minha página com a table, ele duplica o plugin, criando 2 calendários do datepicker

Como eu poderia resolver esses dois problemas?

Edit

A forma que atualmente faço a chamada da modal é essa:

em meu "index/grid/table"

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="modalContent">
        </div>
    </div>
</div>

a minha chamada de ajax, eu utilizei um html helper do asp.net mvc, mas acredito que ele se interprete como essa chamada do jquery:

        $.ajax({
            type: "GET",
            url: "URL",
            success: function (result) {
                $("#modalContent").html(result);
            },
            complete: function (msg) {
                $('#myModal').modal('show');
            }
        });
4
  • Qual é o código que estás a usar para abrir o modal?
    – Sergio
    1/04/2015 às 6:53
  • @Sergio editei a pergunta, é mais ou menos assim...
    – Rod
    1/04/2015 às 13:20
  • Ok, estou a sair agora do trabalho vou olhar mais logo aqui, mas porque não juntares $("#modalContent .datepicker").datepicker({ dentro desse complete: function (msg) { do AJAX. Assim só vai juntar datepicker a esse(s) inputs que o modal tenha recebido.
    – Sergio
    1/04/2015 às 13:23
  • @Sergio, mas toda requisição ajax, eu terei que fazer isso? torna-se o código de um simples "get" repetitivo
    – Rod
    1/04/2015 às 13:25

4 Respostas 4

1

Eu alteraria o ficheiro dateconfig.js para que o mesmo lide com o datepicker duma forma mais pragmática:

Solução

// Opções para o Datepicker
var options = {
    dateFormat: 'dd/mm/yy',
    dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
    dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
    dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
    monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
    monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
};

// Controlo para instanciar e/ou apresentar o datepicker
$("body").on("click", ".datepicker", function(){

    var $this = $(this);

    if (!$this.hasClass("hasDatepicker")) {
        $this.datepicker(options);
    }

    $this.datepicker("show");
});

Explicação

  1. Estamos a delegar um evento ao elemento body que vai disparar sempre que se clicar num elemento com a classe datepicker.

  2. O plugin datepicker ao criar uma instância, deixa nos elementos a classe de controlo hasDatepicker. Isto permite-nos verificar se o elemento que recebeu o clique já tem uma instância e assim passar logo para a apresentação do calendário.

  3. Por fim, ao clicar nos elementos com a classe datepicker vamos abrir o mesmo.

Desta forma, seja de forma assíncrona, seja de forma "regular", todo o trabalho referente ao datepicker é realizado no teu ficheiro dateconfig.js e não precisas de tomar medidas adicionais para gerir o plugin.

Exemplo

O exemplo em baixo encontra-se também no JSFiddle.

// Opções para o Datepicker
var options = {
    dateFormat: 'dd/mm/yy',
    dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
    dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
    dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
    monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
    monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
};

// Controlo para instanciar e/ou apresentar o datepicker
$("body").on("click", ".datepicker", function(){
    
    var $this = $(this);
    
    if (!$this.hasClass("hasDatepicker")) {
        $this.datepicker(options);
    }
    
    $this.datepicker("show");
});


// Gerar elementos simulando chamada Ajax
$('button').on("click", function(){ $('body').append($('<input/>').addClass('datepicker'))});
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<input type="text" class="datepicker"> <button>+</button>

0

Você vai ter que aplicar o plugin somente nos elementos que tiverem sido carregados via AJAX para dentro do contêiner do modal:

$("#conteiner-do-modal .datepicker").datepicker({
        dateFormat: 'dd/mm/yy',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
    });

Estou assumindo que o contêiner do modal tenha o id="conteiner-do-modal".

Evitando repetições

Para não ter erro em ficar repetindo, você pode criar um método que aplica o plugin usando um seletor jQuery, sendo que esta função ficará disponível globalmente para quem quiser chamar:

function setupDatepicker(seletor) {
    $(seletor).datepicker({
        dateFormat: 'dd/mm/yy',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
    });
}

Então em cada lugar que tiver que chamar, faça da forma que for apropriada:

  • na página principal:

    setupDatepicker(".datepicker");
    
  • após carregar o modal:

    setupDatepicker("#conteiner-do-modal .datepicker");
    

O código acima em forma de plugin:

(function ( $ ) {

    $.fn.setupDatepicker = function() {
        this.datepicker({
            dateFormat: 'dd/mm/yy',
            dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
            dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
            dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
            monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
            monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
        });
        return this;
    };

}( jQuery ));

Para usar faça assim:

  • na página principal:

    $(".datepicker").setupDatepicker();
    
  • após carregar o modal:

    $("#conteiner-do-modal .datepicker").setupDatepicker();
    
7
  • Olá @Miguel Angelo, obrigado por responder, mas não há outra forma? fazendo isso parece tão repetitivo o código...
    – Rod
    1/04/2015 às 1:04
  • na verdade esse problema de não carregar, é praticamente em todos os plugins, rsrsrs =/
    – Rod
    1/04/2015 às 1:05
  • Editei a resposta com algo para evitar erros com repetição de código. 1/04/2015 às 1:14
  • obrigado, imaginei que poderia fazer algo assim... Mas o arquivo com a função, deve ser passado na página que será carregada por ajax né? É que eu vejo que alguns plugins, nem precisam passar os arquivos dentro da página que está sendo carregada...
    – Rod
    1/04/2015 às 1:16
  • Não é necessário caso haja garantia que na página principal o arquivo já esteja carregado. Caso contrário, ai sim, precisará incluir o arquivo no carregamento do AJAX. 1/04/2015 às 1:30
0

O problema aqui é que há conteudo a ser criado dinamicamente e seria necessário delegar o datepicker para nõ correr código duplicado e com isso gerar várias janelas de datepicker para cada input.

Uma solução é criar uma nova instancia cada vêz que novo conteúdo é adicionado ao DOM. O melhor é fazer isso na chamanda AJAX assim:

var formato = {
    dateFormat: 'dd/mm/yy',
    dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
    dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
    dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
    monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
    monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
};

// ... depois dentro do ajax: 

complete: function (msg) {
    $('#myModal').modal('show');
    $("#conteiner-do-modal .datepicker").datepicker(formato);
}

e dessa maneira somente os novos inputs vão ser selecionados.

Outra solução é chamar o datepicker delegando num evento, por exemplo focusin:

$("body").on("input.datepicker", "focusin", function(){
   $(this).datepicker(formato);
});

Exemplo: https://jsfiddle.net/6ajoomct/

0
0

Pra começar, as configurações você pode setar utilizando a função setDefaults.

$.datepicker.setDefaults({
    dateFormat: 'dd/mm/yy'
});

Agora, para adicionar o datepicker apenas aos inputs com classe datepicker e que ainda não possuem o datepicker inicializado, você pode fazer o seguinte:

$(".datepicker:data(datepicker)").datepicker();

Como funciona? Os plugins do jquery ui sempre armazenam no elemento a instância do objeto criado, utilizando o nome do plugin (neste caso, datepicker). Assim, para verificar se o plugin já foi inicializado no elemento, é só verificar pela existência da instância no mesmo.

Uma versão final do seu código poderia ser a seguinte:

function iniciarDatepicker() {
    // você pode passar as configurações aqui ou setar via o setDefults
    $(".datepicker:data(datepicker)").datepicker();
}

Assim, você pode chamar sempre a mesma função.

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 .