最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

javascript - Datepicker not refreshing data - Stack Overflow

matteradmin1PV0评论

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!

Share Improve this question edited Nov 18, 2024 at 12:13 Zenin0 asked Nov 18, 2024 at 12:06 Zenin0Zenin0 631 silver badge8 bronze badges 2
  • $("#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
Add a comment  | 

1 Answer 1

Reset to default 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!

Post a comment

comment list (0)

  1. No comments so far