I´ve been trying to solve a problem I´m having beeing it the next one:
I have 2 datepickers:
Delivery Date Picker:
<div class="input-group date form_datetime times" id="date_entrega">
<input type="text"
placeholder="Fecha de entrega" size="16"
readonly class="form-control"
ng-model="reserva.fechasalida"
name="date_fecha_entrega"/>
<span class="input-group-btn">
<button class="btn default date-set"
type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
And return Date Picker:
<div class="input-group date form_datetime times" id="date_devolucion">
<input type="text"
placeholder="Fecha de devolución"
size="16" readonly class="form-control"
ng-model="reserva.fechaentrada"
name="date_fecha_devolucion"
ng-disabled="cobroOFacturaAlquiler"/>
<span class="input-group-btn">
<button class="btn default date-set"
type="button"
ng-disabled="cobroOFacturaAlquiler">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
And then in the Controller.js, I have this:
function getDaysClosedFromLocation(locationId) {
LocationDaysService.getPeriodsDaysClosedFromLocation(
locationId,
function (response) {
if (response.success) {
$scope.periodDelivery = response.data;
$scope.periodReturn = response.data;
$("#date_entrega")
.datepicker({
language: "es",
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
orientation: "left",
beforeShowDay: beforeShowDayDatePickerDelivery,
})
.on("changeDate", function (ev) {
$scope.configuracionCambioFechaHora("date_entrega");
});
$("#date_devolucion")
.datepicker({
language: "es",
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
orientation: "left",
beforeShowDay: beforeShowDayDatePickerReturn,
})
.on("changeDate", function (ev) {
$scope.configuracionCambioFechaHora("date_devolucion");
});
}
},
);
}
function beforeShowDayDatePickerDelivery(date) {
return beforeShowDay(date, $scope.periodDelivery);
}
function beforeShowDayDatePickerReturn(date) {
return beforeShowDay(date, $scope.periodReturn);
}
function beforeShowDay(date, periods) {
let day = date.getDay(); // 0 (Sunday) ... 6 (Saturday)
for (let i = 0; i < periods.length; i++) {
let period = periods[i];
if (date >= period.start && date <= period.end) {
if (period.daysToDisable.includes(day)) {
return false; // Disable this specific date
}
}
}
return true; // Enable all other dates
}
This functionality is used to block specific days and periods on the calendar, and it works quite well. However, when I change the location, #date_devolucion updates correctly and instantly, but #date_entrega does not. It only updates when I switch the month and then return. There are no visible console errors, so I don’t think it’s a logic error in the code. Most likely, it’s an AngularJS update issue.
I’ve tried various approaches, such as destroying with the destroy functionality before recreating it, using the datepicker's refresh method, or ensuring they are only created if they don’t already exist, but none of these have worked.
Does anyone know why this is happening and how I could resolve it?
Thanks in advance!
I´ve found how to solve it:
$scope.updateDatePicker = function () {
setTimeout(function () {
$("#date_entrega").datepicker("update");
$("#date_devolucion").datepicker("update");
}, 0);
};
Then calling it at the end of getDaysClosedFromLocation!
I don't know if it's a good solution, but it solved my problem!