How do I make the Datepicker refresh work?

Question

First I will talk about how this datepiker works, it has to follow several rules, which makes it difficult to create the code. I can use only one datepicker for the selection of dates, both input and output, and after selecting the first date, only the following seven days can be selected and when the same date is selected, (as input and output), should give a refresh on datepicker.

I was able to make practically everything work, except for the refresh part, I saw in several places different ways of doing it, but I was not successful. I switched refresh for Stroy and it works, but I need it to work with refresh, someone can clarify what I’m doing wrong and or show me how to make refresh work in my code?

<style type="text/css">
.dp-highlight a.ui-state-default:nth-of-type(1) {
    background: #4176A2 !important;
}
</style>    
<div class="calendario_dias_reservas">
    <div id="date1" class="datepicker_reservas"></div>
</div>


$(".datepicker_reservas").datepicker({        
    minDate: 0,
    numberOfMonths: [1, 4],
    beforeShowDay: function (date) {            
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#datepicker_entrada").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#datepicker_saida").val());
        return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
    },
    onSelect: function(dateText, inst) {

        if($("#datepicker_id").val() == '' || $("#datepicker_id").val() != inst['id']){
            $("#datepicker_entrada").val('');
        }
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#datepicker_entrada").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#datepicker_saida").val());
        var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);

        if (!date1 || date2) {
            $("#datepicker_entrada").val(dateText);
            $("#datepicker_saida").val(""); 
            $("#datepicker_id").val(inst['id']); 
            var data = $.datepicker.parseDate('dd/mm/yy', dateText);
            data.setDate(data.getDate('dd/mm/yy') + 7);                 
            $("#"+inst['id']+"").datepicker( "option", "minDate", dateText);   

            $("#"+inst['id']+"").datepicker( "option", "maxDate", data);
            $(this).datepicker();
        } else if (selectedDate < date1) {
            $("#datepicker_saida").val($("#datepicker_entrada").val());
            $("#datepicker_entrada").val(dateText);
            $(this).datepicker();
        } else {
            if(dateText != $("#datepicker_entrada").val()){
                $("#datepicker_saida").val(dateText);
                $(this).datepicker();
            }else{
                console.log(inst['id']);
                $("#"+inst['id']+"").datepicker("refresh");
            }
        }
    }
});

Answer 1

I could not use the refresh method in my datepicker, so I tried to find an alternative measure.. It’s not the right way, but it solved my problem.

onSelect: function (dateText, inst) {

        if ($("#datepicker_id").val() == '' || $("#datepicker_id").val() != inst['id']) {
            $("#datepicker_entrada").val('');
        }
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#datepicker_entrada").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#datepicker_saida").val());
        var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);
        if (!date1) {
            $("#datepicker_entrada").val(dateText);
            $("#datepicker_saida").val("");
            $("#datepicker_id").val(inst['id']);
            var data = $.datepicker.parseDate('dd/mm/yy', dateText);
            data.setDate(data.getDate('dd/mm/yy') + 7);
            $("#" + inst['id'] + "").datepicker("option", "minDate", dateText);
            $("#" + inst['id'] + "").datepicker("option", "maxDate", data);
            $(this).datepicker();
        } else if (selectedDate < date1) {
            $("#datepicker_saida").val($("#datepicker_entrada").val());
            $("#datepicker_entrada").val(dateText);
            $(this).datepicker();
        } else if (date1 && date2) {

//Eis aqui a solução; Verifico se as duas datas já existem
//Se existirem então reseto todos os valores "manualmente"
//Fazendo com que o datepicker "resete"

            date1 = false;
            date2 = false;
            $("#datepicker_entrada").val("");
            $("#datepicker_saida").val("");
            $("#" + inst['id'] + "").datepicker("option", "minDate", 0);
            $("#" + inst['id'] + "").datepicker("option", "maxDate", null);
        } else {
            if (dateText != $("#datepicker_entrada").val()) {
                $("#datepicker_saida").val(dateText);
                $(this).datepicker();
            } else {

//E aqui utilizo o mesmo método 
//Para resetar o datepicker quando a segunda data for igual a primeira

                date1 = false;
                date2 = false;
                $("#datepicker_entrada").val("");
                $("#datepicker_saida").val("");
                $("#" + inst['id'] + "").datepicker("option", "minDate", 0);
                $("#" + inst['id'] + "").datepicker("option", "maxDate", null);
            }
        }
    }

As I said is not the most correct means since there is a specific function for this, but it was the solution and the means that I could find, I hope I can help someone else with a similar problem.