现有需求要求今日及以后日期禁用,所以打开控件时还显示下个月就不符合实际需要。
现状:
目标:
解决思路:
看过文档之后,排除了采用官方提供的属性,方法;
发现控件有上个月 (翻页上键)的方法,所以就想我可不可在打开日期面板时就触发翻上个月的方法呢。
解决方法:
<dw-range-picker class="range-picker" style="width: 90%;"
dwFormat="yyyy-MM-dd"
[dwAllowClear]="false"
[dwDisabledDate]="disabledDate"
[(ngModel)]="searchOption.date"
(dwOnOpenChange)="openPicker($event)"
(ngModelChange)="chooseDate($event)">
</dw-range-picker>
// 一定要在dwOnOpenChange方法里触发,不然ant-calendar-prev-month-btn元素还未存在,为了防止
异步,还采用了setTimeout。
openPicker(e: any): void {
// isFirst 为Y表示第一次打开日期面板
if (e && this.isFirst === 'Y') {
setTimeout(() => {
const pre: any = document.getElementsByClassName('ant-calendar-prev-month-btn');
pre[0].click();
}, 0);
setTimeout(() => { // 这一段一定要注意,不然会是第一个上翻a标签触发两次。
const next: any = document.getElementsByClassName('ant-calendar-prev-month-btn');
if (next[1]) {
next[1].click();
}
}, 10);
}
}
chooseDate(e: any): void {
// 省略我自己的代码逻辑
this.isFirst = 'N'; // 自定义选择日期之后就不算第一次打开日期选择器了
}