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");
}
}
}
});