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 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!

• javascript
• jquery
• angularjs
• jquery-events
• bootstrap-datepicker

• $("#date_entrega").datepicker("update", null); Place this line after updating $scope.periodDelivery in the getDaysClosedFromLocation function, just before reinitializing the #date_entrega datepicker. Hope this works for you. – Zaheer Bashir Commented Nov 18, 2024 at 12:13
• After adding it, the calendar seems to have become misconfigured. It no longer highlights today's date and fails to update correctly. – Zenin0 Commented Nov 18, 2024 at 12:16

1 Answer 1

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!