How do I refresh Datepicker?

0

First of all I'll tell you how this datepiker works, it has to follow several rules, which makes it difficult to create the code. I can only use a datepicker to select dates, both in and out, and after the first date is selected, only the next seven days can be selected and when the same date is selected, (as input and output), it should give a refresh in datepicker.

I managed to make everything pretty much work, except for the refresh part, I saw in several places different ways of doing, but I did not succeed. I changed the refresh for destroy and it works, but I need it to work with refresh, can someone clarify what I'm doing wrong and show me how to make the 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");
            }
        }
    }
});
    
asked by anonymous 11.03.2016 / 22:04

1 answer

0

I was not able to use the refresh method in my datepicker, so I tried to find an alternative measure. It is not the right way, but 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, it is not the right way since there is a specific function for this, but it was the solution and the medium I could find, I hope it can help someone else with a similar problem.     

17.03.2016 / 19:27