记一次Angular使用PrimeNG V4.3.0版本Calendar组件不能根据系统时间实时刷新问题，经查证发现这是PrimeNG V4.3.0及以下版本遇到的问题，新版本已修复该问题，但是如果项目不能升级到新版本的情况下怎么使Calendar组件每次点开都能保持系统时间一致呢？为此我写了一个公共方法来使组件实时更新，代码如下：
html:
<p-calendar id="delayTime1" [maxDate]="dataScore.delayTime2" [(ngModel)]="dataScore.delayTime1" placeholder="请选择截止时间" readonlyInput="true" [showTime]="true" [style]="{'width':'170px','height':'30px'}" dateFormat="yy/mm/dd" [locale]="sc" showButtonBar="true" (onFocus)="onFocus1($event)" (onSelect)="onSelect1($event)" (click)="delayOnClick1($event)"></p-calendar>
ts:
onSelect1($event: any) { let zjhours = new Date($event).getHours();//组件小时 let newhours = new Date().getHours(); //系统小时 let zjminutes = new Date($event).getMinutes();//组件分钟 let newminutes = new Date().getMinutes(); //系统分钟 let newDate = new Date($event); Date(newDate.setHours(newhours,newminutes)); if (zjhours != newhours) { this.dataScore.editTaskCenterList.delayTime1 = new Date(newDate.setHours(zjhours, zjminutes)); document.getElementById('delayTime1').querySelector('.ui-hour-picker span:nth-child(3)').innerHTML = zjhours.toString(); document.getElementById('delayTime1').querySelector('.ui-minute-picker span:nth-child(3)').innerHTML = zjminutes.toString(); } else { if (zjminutes != newminutes) { this.dataScore.editTaskCenterList.delayTime1 = new Date(newDate.setHours(zjhours, zjminutes)); document.getElementById('delayTime1').querySelector('.ui-hour-picker span:nth-child(3)').innerHTML = zjhours.toString(); document.getElementById('delayTime1').querySelector('.ui-minute-picker span:nth-child(3)').innerHTML = zjminutes.toString(); } else { this.dataScore.editTaskCenterList.delayTime1 = new Date(newDate.setHours(newhours, newminutes)); document.getElementById('delayTime1').querySelector('.ui-hour-picker span:nth-child(3)').innerHTML = newhours.toString(); document.getElementById('delayTime1').querySelector('.ui-minute-picker span:nth-child(3)').innerHTML = newminutes.toString(); } } }
onFocus1($event: any) { // debugger let h, m, delayTime1 = this.dataScore.editTaskCenterList.delayTime1; if (!delayTime1) { //新增 h = new Date().getHours(); m = new Date().getMinutes(); } else { //编辑 h = new Date(delayTime1).getHours(); m = new Date(delayTime1).getMinutes(); } if (h && m) { document.getElementById('delayTime1').querySelector('.ui-hour-picker span:nth-child(3)').innerHTML = h.toString(); document.getElementById('delayTime1').querySelector('.ui-minute-picker span:nth-child(3)').innerHTML = m.toString(); // 判断时间、分钟是否小于两位数，小于两位数要把0显示在前面 if (h < 10) { let hours = <HTMLElement>document.getElementById('delayTime1').querySelector('.ui-hour-picker span:nth-child(2)'); hours.style.display = 'inline'; } else { let hours = <HTMLElement>document.getElementById('delayTime1').querySelector('.ui-hour-picker span:nth-child(2)'); hours.style.display = 'none'; } if (m < 10) { let minutes = <HTMLElement>document.getElementById('delayTime1').querySelector('.ui-minute-picker span:nth-child(2)'); minutes.style.display = 'inline'; } else { let minutes = <HTMLElement>document.getElementById('delayTime1').querySelector('.ui-minute-picker span:nth-child(2)'); minutes.style.display = 'none'; } } }
delayOnClick1($event: any){ let element = $event.target; // console.log("dom节点：", element); if (element.tagName == "A") { let judged = element.className; var patt1 = new RegExp("ui-state-default"); var patt2 = new RegExp("ui-state-highlight"); var result1 = patt1.test(judged); var result2 = patt2.test(judged); if (result1 && result2) { let starts = this.dataScore.editTaskCenterList.delayTime1; let dmhours = parseInt(document.getElementById('delayTime1').querySelector('.ui-hour-picker span:nth-child(3)').innerHTML);//dom小时 let dmminutes = parseInt(document.getElementById('delayTime1').querySelector('.ui-minute-picker span:nth-child(3)').innerHTML);//dom分钟 let xthours = new Date().getHours(); //系统小时 let xtminutes = new Date().getMinutes(); //系统分钟 if (dmhours < xthours) { this.dataScore.editTaskCenterList.delayTime1 = new Date(starts.setHours(xthours, xtminutes)) } if (dmminutes < xtminutes) { this.dataScore.editTaskCenterList.delayTime1 = new Date(starts.setHours(xthours, xtminutes)) } } } }
