-2

inserir a descrição da imagem aqui

neste calendário quero pré carrega-lo com o dia 5 pré selecionado(active).

o código que carrega ele é este:

$('#agenda_profissional_online').datepicker({
        format: "yyyy-mm-dd", 
        //este é dia 5(datas[0]) que vem do meu array do banco.
        startDate: datas[0],
        endDate: datas[datas.length-1],
        language: "pt-BR",
        height: "300px",
        datesDisabled: datas_desativadas
    }).on('changeDate', function(e) {
        $("#agendar").fadeOut(400);
        $('#loading-padrao').toggle();
        var agendaData = $('#agenda_profissional_online').datepicker('getDate');
        // agendaData = agendaData.toLocaleDateString("pt-BR");
        agendaData = moment(agendaData).format('YYYY-MM-DD');
        //SOLICITACAO RECUPERO A DATA CLICADA ENVIO PARA O FUNCOES.PHP COM DOIS PARAMETROS SOLICITACAO VIA GET E PICKERDATA VIA POST)
        $.ajax({type:"POST",data:{pickerData:agendaData},url: "funcoes/funcoes.php?solicitacao=HORAS_DISPONIVEIS", success: function(result){                        
            $('#loading-padrao').toggle();               
            var horarios_disponiveis= [];
            // alert(result);
            var horarios = JSON.parse(result);

            $.each(horarios, function (index, value) {
                var hora = value.replace(agendaData,"");
                hora =hora.replace(":00.000","");                    
                console.log(hora);
                horarios_disponiveis.push("<span class='badge hora_badge'>"+hora+"</span>");
            });     
            $("#horarios_agendamento").fadeOut(200,function(){
                $(this).html(horarios_disponiveis).fadeIn();  
            });
        }});
        pega_horario();            
    });

Resolução, enontrada(porem bug) preciso de ajdua para resolver

 $('#agenda_profissional_online').datepicker({
        format: "yyyy-mm-dd",        
        startDate: datas[0],
        endDate: datas[datas.length-1],
        language: "pt-BR",
        height: "300px",
        datesDisabled: datas_desativadas,
        beforeShowDay: function(date){
                            var caseinicial = datas[0].substr(-1);
                            caseinicial = parseInt(caseinicial);
                            console.log(caseinicial);
                          if (date.getMonth() == (new Date()).getMonth())
                            switch (date.getDate()){
                              case caseinicial:
                                return  {
                                  // tooltip: 'Example tooltip',
                                  classes: 'active',                                      
                                };                                
                          }
                          var agendaData = moment(date).format('YYYY-MM-DD');
                          busca_monta_horario(agendaData);
                        }            
    }).on('changeDate', function(e) {
        $("#agendar").fadeOut(400);         
        var agendaData = $('#agenda_profissional_online').datepicker('getDate');
        // agendaData = agendaData.toLocaleDateString("pt-BR");
        agendaData = moment(agendaData).format('YYYY-MM-DD');
        //SOLICITACAO RECUPERO A DATA CLICADA ENVIO PARA O FUNCOES.PHP COM DOIS PARAMETROS SOLICITACAO VIA GET E PICKERDATA VIA POST)
        busca_monta_horario(agendaData);
        pega_horario('');            
    });
}

}

porém agora vem um selecionado, só que quando seleciona outro, fica ambos selecionados

inserir a descrição da imagem aqui

2 Respostas 2

-1

Ao selecionar um novo dia, o dia anterior ainda permanece marcado como ativo. Isso pode acontecer porque o código não remove a marcação 'active' do dia anterior. Vamos ajustar o código para garantir que apenas um dia seja marcado como ativo de cada vez. Podemos fazer isso removendo a classe 'active' dos dias que não são o dia inicial. Aqui está a modificação no seu código:

$('#agenda_profissional_online').datepicker({
    format: "yyyy-mm-dd",        
    startDate: datas[0],
    endDate: datas[datas.length-1],
    language: "pt-BR",
    height: "300px",
    datesDisabled: datas_desativadas,
    beforeShowDay: function(date){
        var caseinicial = parseInt(datas[0].substr(-1));
        if (date.getDate() === caseinicial && date.getMonth() === (new Date()).getMonth()) {
            return {
                classes: 'active',
            };
        } else {
            return {};
        }
    }            
}).on('changeDate', function(e) {
    $("#agendar").fadeOut(400);         
    var agendaData = $('#agenda_profissional_online').datepicker('getDate');
    agendaData = moment(agendaData).format('YYYY-MM-DD');
    busca_monta_horario(agendaData);
    pega_horario('');
});

A adição do else { return {}; } no beforeShowDay garante que as classes 'active' sejam removidas dos dias que não são o dia inicial do mês. Isso deve resolver o problema que você está enfrentando. Teste e veja se funciona conforme o esperado.

-2

Para o datepicker tem a opção startDate, para inicializar o datepicker com uma data pré selecionada basta adiciona-la

$('#agenda_profissional_online').datepicker({
    format: "yyyy-mm-dd", 
    //este é dia 5(datas[0]) que vem do meu array do banco.
    startDate: datas[0],
    endDate: datas[datas.length-1],
    language: "pt-BR",
    height: "300px",
    datesDisabled: datas_desativadas,
    startDate:  new Date('2019-03-06')
});
4
  • oi, desculpa coloquei errado no titulo é o DATE PICKER BOOTSTRAP
    – Igor Silva
    Commented 27/03/2019 às 12:26
  • @IgorSilva Fiz as edições para o bootstrap datepicker
    – JrD
    Commented 27/03/2019 às 13:15
  • na verdade, não deu, ele só deixou habilitado, mas não deixou com o active
    – Igor Silva
    Commented 27/03/2019 às 13:30
  • adcionei uma resolução na pergunta, só que eu gerei outro bug, vê se consegue me ajudar
    – Igor Silva
    Commented 27/03/2019 às 13:33

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 .