Fala moçada gente boa!
Mais um dia de trabalho, a necessidade de adicionar um calendário modal para seleção de data.
Após procurar um pouco na internet achei o plugin criado pelo Danilo, do site "http://www.tidbits.com.br".
Aí, ok, fui tentar usar, PAU!!! Ops, deu conflito com uma outra biblioteca que uso fora o jQuery, a biblioteca Protoype! Então, ao invés de tentar concertar o problema do conflito fui atrás de outro e achei o calendário DatePicker no site do jQuery, mas esse do jQuery, de um conjunto de utilitários também não me serviu muito bem. Faltou eu poder fazer algo que no do nosso amigo Danilo, fez muito bem, poder separar dia, mes e ano em cada input diferente.
Desta vez, invés de ficar procurando um calendário que servisse resolvi olhar o código criado no calendário do Danilo, e fui aos ajustes... Após umas 2 ou 3 horas, consegui não só corrigir o problema do conflito, como também adicionei uma correção para os elementos do tipo SELECT.
Eu uso no meu formulários, combobox(select) para seleção de Dia, Mês e Ano separadamente, e por isso este plugin me foi muito útil, mas ele estava projetado apenas para inserir valores em inputs tipo texto, então uma rápida alteração e voi-lá!!! Selects também podem ser usados.
Para tirar conflito com outras bibliotecas usamos jQuery.noConflit, mas mesmo assim a versão 1.0 do plugin não funcionava, agora na versão 1.2, pode mandar bala.
Para visualizar todo conteúdo, completo do plugin visite: http://www.tidbits.com.br/click-calendario-plugin-de-jquery-para-calendarios-em-portugues .
Lá você encontrará a versão 1.0, juntamente do CSS e todo material de consulta do plugin. Após o download da versão 1.0, copie o código da versão 1.2.min.js logo abaixo e teste.
Uma boa dica de uso é usar um elemento como "<span id="calendario" title="Mostrar Calendário"></span>" com as regras css corretas bem elaboradas, utilizando um background com imagem de calendario, sem bordas, sem padding, e fixando o tamanho no mesmo tamanho da imagem, e depois de elaborar as regras css adicionar a chamada do calendário para o click deste "span".
Calendário versão 1.2.min:
Logo logo, pretendo aperfeiçoar mais o código do nosso amigo Danilo.
Abraço galera. Ate a próxima.
Mais um dia de trabalho, a necessidade de adicionar um calendário modal para seleção de data.
Após procurar um pouco na internet achei o plugin criado pelo Danilo, do site "http://www.tidbits.com.br".
Aí, ok, fui tentar usar, PAU!!! Ops, deu conflito com uma outra biblioteca que uso fora o jQuery, a biblioteca Protoype! Então, ao invés de tentar concertar o problema do conflito fui atrás de outro e achei o calendário DatePicker no site do jQuery, mas esse do jQuery, de um conjunto de utilitários também não me serviu muito bem. Faltou eu poder fazer algo que no do nosso amigo Danilo, fez muito bem, poder separar dia, mes e ano em cada input diferente.
Desta vez, invés de ficar procurando um calendário que servisse resolvi olhar o código criado no calendário do Danilo, e fui aos ajustes... Após umas 2 ou 3 horas, consegui não só corrigir o problema do conflito, como também adicionei uma correção para os elementos do tipo SELECT.
Eu uso no meu formulários, combobox(select) para seleção de Dia, Mês e Ano separadamente, e por isso este plugin me foi muito útil, mas ele estava projetado apenas para inserir valores em inputs tipo texto, então uma rápida alteração e voi-lá!!! Selects também podem ser usados.
Para tirar conflito com outras bibliotecas usamos jQuery.noConflit, mas mesmo assim a versão 1.0 do plugin não funcionava, agora na versão 1.2, pode mandar bala.
Para visualizar todo conteúdo, completo do plugin visite: http://www.tidbits.com.br/click-calendario-plugin-de-jquery-para-calendarios-em-portugues .
Lá você encontrará a versão 1.0, juntamente do CSS e todo material de consulta do plugin. Após o download da versão 1.0, copie o código da versão 1.2.min.js logo abaixo e teste.
Uma boa dica de uso é usar um elemento como "<span id="calendario" title="Mostrar Calendário"></span>" com as regras css corretas bem elaboradas, utilizando um background com imagem de calendario, sem bordas, sem padding, e fixando o tamanho no mesmo tamanho da imagem, e depois de elaborar as regras css adicionar a chamada do calendário para o click deste "span".
Calendário versão 1.2.min:
/* Calendario jQuery UI
version: 1.2
By: Danilo - http://www.tidbits.com.br/click-calendario-plugin-de-jquery-para-calendarios-em-portugues
Edited by: Pyetro SaFe - 02/07/2012 11:53 */
(function(a){a.Calendario_cfgs=a.Calendario_cfgs||{Version: '1.2'}; a.Calendario_cfgs.conf={cfgs:{target:'', targetDay:'', targetMonth:'', targetYear:'', minDate:'', maxDate:'', dateDefault: '', left:'0', top:'30', referencePosition: this, closeClick: true}}; a.fn.Calendario=function(ops){var defaults=a.Calendario_cfgs.conf.cfgs; var cfgs=(ops)?a.extend({}, defaults, ops):defaults; var ultimo_dia=function(mes,ano){if(mes==1||mes==3||mes==5||mes==7||mes==8||mes==10||mes==12)return 31; if(mes==4||mes==6||mes==9||mes==11)return 30; if(mes==2)if(ano%400==0)return 29; if(mes==2)if(ano%100==0)return 28; if(mes==2)if(ano%4==0)return 29; else return 28;}; var nomeMes=new Array("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"); var hoje=new Date(); var diaAtual=hoje.getDate(); var mesAtual=hoje.getMonth()+1; var anoAtual=hoje.getFullYear(); var dataAtual=diaAtual+'/'+mesAtual+'/'+anoAtual; var contCalendario=0; cfgs.dateDefault=dataAtual; arrData=cfgs.dateDefault.split('/'); diaOriginal=parseInt(arrData[0],10); mesOriginal=parseInt(arrData[1],10)-1; anoOriginal=parseInt(arrData[2],10); var diaMinimo=0; var mesMinimo=0;var anoMinimo=0; if(cfgs.minDate!=''){arrData=cfgs.minDate.split('/'); diaMinimo=parseInt(arrData[0],10); mesMinimo=parseInt(arrData[1],10)-1; anoMinimo=parseInt(arrData[2],10);}var diaMaximo=9999; var mesMaximo=9999; var anoMaximo=9999; if(cfgs.maxDate!=''){arrData=cfgs.maxDate.split('/'); diaMaximo=parseInt(arrData[0],10); mesMaximo=parseInt(arrData[1],10)-1; anoMaximo=parseInt(arrData[2],10);}this.each(function(){if(a(this).attr('id')==''){contCalendario++; a(this).attr('id','chamada_cal_'+contCalendario)}idChamada=a(this).attr('id'); var mes=mesOriginal; var ano=anoOriginal; idCalendario='cal_'+idChamada; idCalendario=idCalendario.replace('_dia','').replace('_mes','').replace('_ano',''); if(a('#'+idCalendario).size()>0)return false; a('body').append('<div class="calendario" id="'+idCalendario+'"><a href="#" class="fechar" title="Fechar">X</a><a href="#" class="bt_controle_mes bt_voltar_mes">«</a><p class="nome_mes">mês ano</p><a href="#" class="bt_controle_mes bt_avancar_mes">»</a><ul class="lista_dia"><li class="semana">D</li><li class="semana">S</li><li class="semana">T</li><li class="semana">Q</li><li class="semana">Q</li><li class="semana">S</li><li class="semana">S</li></ul></div>'); a('#'+idCalendario).append('<input type="hidden" name="calendarioMes" value="'+mes+'"/>'); a('#'+idCalendario).append('<input type="hidden" name="calendarioAno" value="'+ano+'"/>'); function preencher_calendario(idCalendario){var titulo=nomeMes[mes]+" "+ano; a('#'+idCalendario+' p.nome_mes').html(titulo); a('#'+idCalendario+' ul.lista_dia li.dia_vazio').remove(); a('#'+idCalendario+' ul.lista_dia li.dia').remove(); var primeiro=new Date(); primeiro.setFullYear(ano,mes,1); var inicioSemana=primeiro.getDay(); for(i=0;i<inicioSemana;i++){a('#'+idCalendario+' ul.lista_dia').append("<li class='dia_vazio'> <\/li>");}var fimMes=ultimo_dia(mes+1,ano); for(i=1;i<=fimMes;i++){if((ano==anoMinimo && mes==mesMinimo && i < diaMinimo)||(ano==anoMaximo && mes==mesMaximo && i > diaMaximo)){a('#'+idCalendario+' ul.lista_dia').append("<li class='dia dia_n"+i+"'>"+i+"<\/li>");}else{if(cfgs.target!='' || cfgs.targetDay !='' || cfgs.targetMonth !='' || cfgs.targetYear !=''){a('#'+idCalendario+' ul.lista_dia').append("<li class='dia dia_n"+i+"'><a href='#'>"+i+"<\/a><\/li>");}else{a('#'+idCalendario+' ul.lista_dia').append("<li class='dia dia_n"+i+"'>"+i+"<\/li>");}}}if(mes==mesOriginal && ano==anoOriginal){a('#'+idCalendario+' ul.lista_dia li.dia_n'+diaOriginal).addClass('default');}a('#'+idCalendario+' ul.lista_dia li a').click(function(){var dia=a.trim(a(this).html()); if(dia.length==1)dia='0'+dia; var mes=(1 + parseInt(a.trim(a(this.parentNode.parentNode.parentNode).find('input[name="calendarioMes"]').val()),10)).toString(); if(mes.length==1)mes='0'+mes; var ano=parseInt(a.trim(a(this.parentNode.parentNode.parentNode).find('input[name="calendarioAno"]').val()),10); if(cfgs.target!='' && a(cfgs.target).size()>0){var tag=a(cfgs.target).get(0).tagName.toLowerCase(), dataVal=dia+'/'+mes+'/'+ano; if(tag=='input'){a(cfgs.target).val(dataVal);}else if(tag=='select'){a(cfgs.target).find('option[selected]').removeAttr('selected'); a(cfgs.target).find('option[value='+dataVal+']').attr('selected',true);}else{a(cfgs.target).html(dataVal);}}if(cfgs.targetDay!='' && a(cfgs.targetDay).size()>0){var tag=a(cfgs.targetDay).get(0).tagName.toLowerCase(); if(tag=='input'){a(cfgs.targetDay).val(dia);}else if(tag=='select'){a(cfgs.targetDay).find('option[selected]').removeAttr('selected'); a(cfgs.targetDay).find('option[value='+dia+']').attr('selected',true);}else{a(cfgs.targetDay).html(dia);}}if(cfgs.targetMonth!='' && a(cfgs.targetMonth).size()>0){var tag=a(cfgs.targetMonth).get(0).tagName.toLowerCase(); if(tag=='input'){a(cfgs.targetMonth).val(mes);}else if(tag=='select'){a(cfgs.targetMonth).find('option[selected]').removeAttr('selected'); a(cfgs.targetMonth).find('option[value='+mes+']').attr('selected',true);}else{a(cfgs.targetMonth).html(mes);}}if(cfgs.targetYear!='' && a(cfgs.targetYear).size()>0){var tag=a(cfgs.targetYear).get(0).tagName.toLowerCase(); if(tag=='input'){a(cfgs.targetYear).val(ano);}else if(tag=='select'){a(cfgs.targetYear).find('option[selected]').removeAttr('selected'); a(cfgs.targetYear).find('option[value='+ano+']').attr('selected',true);}else{a(cfgs.targetYear).html(ano);}}if(cfgs.closeClick)a('#'+idCalendario).remove(); return false;}); navegacaoCalendario(idCalendario);}function navegacaoCalendario(idCalendario){a('#'+idCalendario+' a.fechar').unbind(); a('#'+idCalendario+' a.fechar').click(function(){a('#'+idCalendario).remove(); return false;}); if(ano==anoMinimo && mes==mesMinimo){a('#'+idCalendario+' a.bt_voltar_mes').hide();}else{a('#'+idCalendario+' a.bt_voltar_mes').show(); a('#'+idCalendario+' a.bt_voltar_mes').unbind(); a('#'+idCalendario+' a.bt_voltar_mes').click(function(){mes=parseInt(a('input[name="calendarioMes"]').val(),10); ano=parseInt(a('input[name="calendarioAno"]').val(),10); mes--; if(mes < 0){mes=11; ano--;}a('input[name="calendarioMes"]').val(mes); a('input[name="calendarioAno"]').val(ano); preencher_calendario(idCalendario); return false;});}if(ano==anoMaximo && mes==mesMaximo){a('#'+idCalendario+' a.bt_avancar_mes').hide();}else{a('#'+idCalendario+' a.bt_avancar_mes').show(); a('#'+idCalendario+' a.bt_avancar_mes').unbind(); a('#'+idCalendario+' a.bt_avancar_mes').click(function(){mes=parseInt(a('input[name="calendarioMes"]').val(),10); ano=parseInt(a('input[name="calendarioAno"]').val(),10); mes++; if(mes==12){mes=0; ano++;}a('input[name="calendarioMes"]').val(mes); a('input[name="calendarioAno"]').val(ano); preencher_calendario(idCalendario); return false;});}}preencher_calendario(idCalendario); var posicoes=a(this).offset(); var leftPosition=posicoes.left + parseInt(cfgs.left,10); var topPosition=posicoes.top + parseInt(cfgs.top,10); a('#'+idCalendario).css({'left':leftPosition, 'top':topPosition}); a('#'+idCalendario).show();});};})(jQuery);
Logo logo, pretendo aperfeiçoar mais o código do nosso amigo Danilo.
Abraço galera. Ate a próxima.
Bom dia, você esta de parabéns pela iniciativa. Eu estava usando o calendário do Danilo no meu projeto de conclusão de curso e no meio da implementação eis que deu conflito com outras bibliotecas. Porém ao colocar o codigo do (jQuery Plugin - Calendário v 1.3.2 ) no arquivo (jquery.click-calendario-1.0-min.js) acusou erro no arquivo pelo netbeans de uma forma que nao pude entender nem solucionar. Pode me ajudar?
ResponderExcluir