My challenge lies in working with an array of dates retrieved from the server to determine which dates should be disabled on the datepicker.
getStaffAvailability(){
let x = this;
this.$http.get(this.weeklyAvailabilityUrl + "GetAvailableDaysForStaff/" + this.entity.staffId)
.then(function (event: any) {
x.staffAvailableDays = event.body;
});
}
Once this method executes successfully, I can observe that the staffAvailableDays array is populated with the expected values as shown in the Vue dev tools at https://i.sstatic.net/9cUpx.png
The issue arises when attempting to access this array within the disableddates method of the datepicker options - it appears empty and devoid of any values. The reason behind this inconsistency eludes me.
export default class StaffAllocation extends Mixins<BaseCrudMixin>(BaseCrudMixin) {
staffAvailableDays: Date[];
datePickerOptions: any;
@Prop(Number) eventId!: number;
constructor() {
this.staffAvailableDays = [];
this.datePickerOptions = {
disabledDate: (currentDate: Date) => {
return (this.staffAvailableDays.findIndex(item => { return item.getTime() == currentDate.getTime() })) == -1;
}
};
}