7

Estou criando uma aplicação com criação de calendário dinâmico.

Minha aplicação usa:

  • Bootstrap 3
  • jQuery 1.11.0
  • jQuery-ui 1.10.3
  • jQuery Timepicker Addon 1.5.0

Eu crio um calendário na página (jQuery UI DatePicker), quando a pessoa seleciona a data eu crio um campo dinâmico para seleção de horas (períodos de inicio e fim) nesse dia que podem ser adicionados.

HTML

<div class="form-group">
    <label for="datas_sel" class="control-label">Datas do evento</label><br>
    <div id="datas_sel" style="float:left;"></div><br class="clear">&nbsp;<br>
    <label>Horas para as datas selecionadas:</label><br>
    <div id="horas_sel" style="width:100%;"></div><br class="clear">&nbsp;<br>
</div>

Javascript

//classe de implementação
var calendario = {
    datas : new Array(),
    padNumero: function(num) {
        return (num.toString().length == 1)?"0"+num.toString():num.toString();
    },
    forDate : function(str){
        return str.substring(6) + "/" + str.substring(4,6) + "/" + str.substring(0,4);
    },
    sorteio: function(a, b) {
        return a.getAttribute('data-date') - b.getAttribute('data-date');
    },
    dataOrganiza: function(){
        var organizar = $("#horas_sel div").toArray().sort(this.sorteio);
        $("#horas_sel div").remove();
        $.each(organizar, function (k, v) {
            $('#horas_sel').append(v);
        });
    },
    addRemData: function(data) {
        var index = jQuery.inArray(data, this.datas);
        if (index >= 0){
            this.removeDate(index);
        }else{
            this.addDate(data);
        }
        this.dataOrganiza();
    },
    addDate: function(data) {
        if (jQuery.inArray(data, this.datas) < 0){
            this.datas.push(data);
        }
        $('#horas_sel').append('<div id="dia_'+data+'" data-date="'+data+'" data-horas="0">\
<span id="data_'+data+'"><b>'+this.forDate(data)+':</b></span>\
<span id="hora_'+data+'"></span>\
<span id="plusicon_'+data+'" class="glyphicon glyphicon-plus-sign" style="padding:3px;border-left:1px solid #CCC;"></span>\
</div>');
        setTimeout(function(){
            $('#plusicon_'+data).click(function(){
                calendario.addHora(data)
            });
            calendario.addHora(data);
        },300);
    },
    removeDate: function(ind) {
        var d = this.datas.splice(ind, 1);
        $('#dia_'+d).remove();
    },
    addHora: function(data){
        var num = $('#dia_'+data).attr('data-horas');
        num = (parseInt(num)>=0)? parseInt(num)+1:1;
        $('#dia_'+data).attr('data-horas',num);
        $('#hora_'+data).append('<span id="ttem_'+data+'_'+num+'">\
Inicio: <input type="text" id="tini_'+data+'_'+num+'" class="form-control" placeholder="12:00"/> \
Final:  <input type="text" id="tfim_'+data+'_'+num+'" class="form-control" placeholder="13:00"/>\
<span id="tmen_'+data+'_'+num+'" class="glyphicon glyphicon-minus-sign" style="margin-right:10px; padding:3px; border-right:1px solid #ccc;"></span>\
</span>');
        if($('#hora_'+data+' input').length >= 6){
            $('#plusicon_'+data).css('display', 'none');
        }else{
            $('#plusicon_'+data).css('display', 'inline-block');
        }
        setTimeout(function(){
            $('#tini_'+data+'_'+num+', #tfim_'+data+'_'+num).timepicker({stepMinute: 5});
            $('#tmen_'+data+'_'+num).click(function(){
                calendario.remHora(data,num);
            });
        },300);
    },
    remHora: function(data, id){
        $('#ttem_'+data+'_'+id).remove();
        if($('#hora_'+data+' input').length >= 8){
            $('#plusicon_'+data).css('display', 'none');
        }else{
            $('#plusicon_'+data).css('display', 'inline-block');
        }
    }
}
//inicia o calendário
$('#datas_sel').datepicker({
    numberOfMonths: [1,3],
    howWeek: true,
    weekHeader: "W",
    onSelect: function (dateText, inst) {
        calendario.addRemData(dateText.split('/').reverse().join(''));
    },
    beforeShowDay: function (date) {
        var year = date.getFullYear();
        var month = calendario.padNumero(date.getMonth() + 1);
        var day = calendario.padNumero(date.getDate());
        var dateString = year.toString() + month.toString() + day.toString();

        var gotDate = jQuery.inArray(dateString, calendario.datas);
        if (gotDate >= 0) {
            return [true, "ui-state-highlight"];
        }
        return [true, ""];
    }
});

Funciona até a inclusão de datas. O Problema é que quanto mais datas eu seleciono, ou quanto mais horas eu incluo na data X, os campos de timepicker das que já estavam lá começam a não serem exibidos no focus.

Eu criei um fiddle para a visualização disso.

Cliquem na data do calendário ele irá adicionar um campo para seleção de horas.

1
  • Aqui o timepicker não aparece nunca, nem na primeira vez que seleciono uma data. 26/01/2015 às 12:20

2 Respostas 2

1

O código está definido para remover a data caso ela já tenha sido selecionada, você pode eliminar esta função comentando a linha:

//this.removeDate(index);

Veja no JSFiddle

1
  • Ele é feito para funcionar assim. A pessoa pode deletar a data seleciona dessa forma. Memso sem ela o campo de seleção de hora não é exibido.
    – Skymidt
    14/01/2015 às 20:13
0

Cada vez que retiras elementos do DOM perde-se o oscultador de eventos que estava ligado a esse elemento.

Por exemplo:

dataOrganiza: function(){
        var organizar = $("#horas_sel div").toArray().sort(this.sorteio);
        $("#horas_sel div").remove();

Nesta ultima linha ^ o .remove() remove os elementos dentro dessa div. Eu percebo a ideia de re-organizar as datas mas isso gera este problema pois quebra os laço entre elemento e seu oscultador (event handler).

Solução:

Sugiro delegar esses oscultadores de eventos. Podes mesmo tirá-los desse namespace e colocar no código junto de // inicia calendário. Ou seja:

Em vez deste código dentro do setTimeout:

$('#plusicon_'+data).click(function(){
    calendario.addHora(data)
});

podes ter (fora do calendário:

$(document).on('click', '[id^="plusicon_"]', function () {
    calendario.addHora(this.id.split('_').pop());
});

Neste novo código vou buscar a data à propria ID usando this.id.split('_').pop() que me dá o ultimo pedaço partindo essa string pelo caractér: _

Exemplo: http://jsfiddle.net/bwb9605y/6/

1
  • Fiz seu teste. Mesmo dentro do seu Fiddle ele continua não exibindo o campo de seleção de hora. Existe alguma outra forma? Seu teste funcionou?
    – Skymidt
    14/01/2015 às 20:18

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 .