角mydatepicker monthchange事件更新ui问题

问题描述

我正在使用这个有角度的mydatepicker：https://github.com/kekeh/angular-mydatepicker

我所面临的问题是月度更改，它会发出此事件calendarViewChanged，并且我正在为api更改月份的可用日期调用api，但是在我得到api ui的响应之前，已经针对该月设置了ui，因此从api接收响应哪个日期启用和禁用，但我无法在上个月和下个月的更改中更新日历中的ui。以下是我从api获得的列表

     this.dayAvailabilityList = [
  { "date": 1577854800000,"month": month,"available": true,"dayOfMonth": 1,"dayName": "Wednesday" },{ "date": 1577941200000,"dayOfMonth": 2,"dayName": "Thursday" },{ "date": 1578027600000,"dayOfMonth": 3,"dayName": "Friday" },{ "date": 1578114000000,"dayOfMonth": 4,"dayName": "Saturday" },{ "date": 1578200400000,"dayOfMonth": 5,"dayName": "Sunday" },{ "date": 1578286800000,"dayOfMonth": 6,"dayName": "Monday" },{ "date": 1578373200000,"dayOfMonth": 7,"dayName": "Tuesday" },{ "date": 1578459600000,"dayOfMonth": 8,{ "date": 1578546000000,"dayOfMonth": 9,{ "date": 1578632400000,"dayOfMonth": 10,{ "date": 1578718800000,"dayOfMonth": 11,{ "date": 1578805200000,"dayOfMonth": 12,{ "date": 1578891600000,"dayOfMonth": 13,{ "date": 1578978000000,"dayOfMonth": 14,{ "date": 1579064400000,"dayOfMonth": 15,{ "date": 1579150800000,"dayOfMonth": 16,{ "date": 1579237200000,"dayOfMonth": 17,{ "date": 1579323600000,"dayOfMonth": 18,{ "date": 1579410000000,"dayOfMonth": 19,{ "date": 1579496400000,"dayOfMonth": 20,{ "date": 1579582800000,"dayOfMonth": 21,{ "date": 1579669200000,"dayOfMonth": 22,{ "date": 1579755600000,"dayOfMonth": 23,{ "date": 1579842000000,"dayOfMonth": 24,{ "date": 1579928400000,"dayOfMonth": 25,{ "date": 1580014800000,"available": false,"dayOfMonth": 26,{ "date": 1580101200000,"dayOfMonth": 27,{ "date": 1580187600000,"dayOfMonth": 28,{ "date": 1580274000000,"dayOfMonth": 29,{ "date": 1580360400000,"dayOfMonth": 30,{ "date": 1580446800000,"dayOfMonth": 31,"dayName": "Friday" }]

有什么方法可以在收到api响应时更新日历中的当前月份视图吗？ 请帮忙。

下面是相同的代码

HTML

<form [formGroup]="myForm" #add="ngForm" (ngSubmit)="submit()">
    <div class="input-Box-container">
        <input class="form-control" style="float:none" 
            placeholder="Select a date" angular-mydatepicker
            #dp="angular-mydatepicker" name="myDate"
            formControlName="myDate" [options]="myDatePickerOptions"                 
            (calendarViewChanged)="onCalendarViewChanged($event)" 
            (dateChanged)="onDateChanged($event)" />
    </div>
</form>

英语JS

`

@ViewChild('dp',{static: true}) dp: AngularMyDatePickerDirective;
myDatePickerOptions : IAngularMyDpOptions  = {
    daterange:false,dateFormat: 'dd/mm/yyyy',inline : false,selectorWidth:'100%',closeSelectorOnDateSelect : false,closeSelectorOnDocumentClick : false,showSelectorArrow:false,disableuntil : {year :new Date().getFullYear(),month :new Date().getMonth()+ 1,day :new 
    Date().getDate()-1 },}

async setCalendarDates(dateList,month){
    
    this.availableDate = [];
    this.notAvailableDate = [];
    let copy : IAngularMyDpOptions  = this.getcopyOfOptions();
    copy.markDates =this.getMarkedDate(dateList,month);
    this.myDatePickerOptions = copy;
    await new Promise(resolve => setTimeout(resolve,3000));
    this.dp.openCalendar();
  }
  
  getMarkedDate(dateList,month) : any {

    for( var i=0 ; i<dateList.length; i++ ) {
    if(dateList[i].available){
        let dateAdd = {day : dateList[i].dayOfMonth,month : month,year : 2020};
        this.availableDate.push(dateAdd);
      }
    }

    for( var i=0 ; i<dateList.length; i++ ) {
      if(!dateList[i].available){
        let dateAdd = {day : dateList[i].dayOfMonth,year : 2020};
        this.notAvailableDate.push(dateAdd);
      }
    }

    let dates = [
      { dates: this.availableDate,color: 'green' },{ dates: this.notAvailableDate,color: 'red' },]
    console.log("Available Date",this.availableDate);
    console.log("Not Available Date",this.notAvailableDate);
    return dates;
  }

onCalendarViewChanged(event: IMyCalendarViewChanged) {
    console.log('onCalendarViewChanged(): Year: ',event);
    this.setDates(event.month);;
    this.setCalendarDates(this.dayAvailabilityList,event.month);
  }

onDateChanged(event: IMyDateModel) {
    console.log('onDateChanged(): ',event);
  }

getcopyOfOptions() {
    return JSON.parse(JSON.stringify(this.myDatePickerOptions));
  }

setDates( month : number ){
  this.dayAvailabilityList = 
                    [
                      {"date":1577854800000,"month":month,"available":true,"dayOfMonth":1,"dayName":"Wednesday"},{"date":1577941200000,"dayOfMonth":2,"dayName":"Thursday"},{"date":1578027600000,"dayOfMonth":3,"dayName":"Friday"},{"date":1578114000000,"dayOfMonth":4,"dayName":"Saturday"},{"date":1578200400000,"dayOfMonth":5,"dayName":"Sunday"},{"date":1578286800000,"dayOfMonth":6,"dayName":"Monday"},{"date":1578373200000,"dayOfMonth":7,"dayName":"Tuesday"},{"date":1578459600000,"dayOfMonth":8,{"date":1578546000000,"dayOfMonth":9,{"date":1578632400000,"dayOfMonth":10,{"date":1578718800000,"dayOfMonth":11,{"date":1578805200000,"dayOfMonth":12,{"date":1578891600000,"dayOfMonth":13,{"date":1578978000000,"dayOfMonth":14,{"date":1579064400000,"dayOfMonth":15,{"date":1579150800000,"dayOfMonth":16,{"date":1579237200000,"dayOfMonth":17,{"date":1579323600000,"dayOfMonth":18,{"date":1579410000000,"dayOfMonth":19,{"date":1579496400000,"dayOfMonth":20,{"date":1579582800000,"dayOfMonth":21,{"date":1579669200000,"dayOfMonth":22,{"date":1579755600000,"dayOfMonth":23,{"date":1579842000000,"dayOfMonth":24,{"date":1579928400000,"dayOfMonth":25,{"date":1580014800000,"available":false,"dayOfMonth":26,{"date":1580101200000,"dayOfMonth":27,{"date":1580187600000,"dayOfMonth":28,{"date":1580274000000,"dayOfMonth":29,{"date":1580360400000,"dayOfMonth":30,{"date":1580446800000,"dayOfMonth":31,"dayName":"Friday"}
                    ]
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）