1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > Ant Design DatePicker组件DisabledDate传参设置开始日期和结束日期禁用

Ant Design DatePicker组件DisabledDate传参设置开始日期和结束日期禁用

时间:2021-03-08 01:23:10

相关推荐

Ant Design DatePicker组件DisabledDate传参设置开始日期和结束日期禁用

在项目中使用Ant Design(of Angular)的DatePicker组件实现开始时间和结束时间功能时,希望通过nzDisabledDate限制开始和结束时间的选择,查阅API后发现

该参数类型是一个默认入参,返回boolean值的函数。就存在一个问题,存在多组开始和结束日期时,点击开始时间,怎么把对应结束时间传递给函数,从而限制开始日期<结束日期,禁用不符合条件的日期。

于是想通过(nzOnOpenChange)弹出日历和关闭日历的回调事件来获取开始 | 结束日期。

<div *ngFor="let control of controlList; trackBy: trackByIndex>// 开始日期<nz-date-picker[(ngModel)]="control.startDate"(nzOnOpenChange)="inputOpenChange(control)"[nzDisabledDate]="startDisabledDate" ></nz-date-picker>// 结束日期<nz-date-picker [(ngModel)]="control.endDate" (nzOnOpenChange)="inputOpenChange(control)" [nzDisabledDate]="endDisabledDate"></nz-date-picker></div>

ts:

// 日期弹窗打开关闭事件public inputOpenChange(control) {this.disableEndDate = control.endDate;this.disableStartDate = control.startDate;}// 开始时间限制无效日期 public startDisabledDate(current: Date): boolean {// current > 结束时间 为无效(current采用当页日期00:00:00时刻,直接getTime处理会有问题)return differenceInCalendarDays(current, this.disableEndDate) > 0}// 结束时间限制无效日期public endDisabledDate(current: Date): boolean{// current < 开始时间 为无效return differenceInCalendarDays(current, this.disableStartDate) < 0}

希望在nzOnOpenChange时获取开始或结束日期,在nzDisabledDate中使用获取到的日期,进行判断从而禁用无效日期。但是在调试过程中,发现nzDisabledDate事件中的this指向的是nz-date-picker这个组件,导致获取不到我们想要的变量。于是将函数修改为箭头函数,保存外层this指针。

// 开始时间限制无效日期 public startDisabledDate = (current: Date): boolean => {// current > 结束时间 为无效(current采用当页日期00:00:00时刻,直接getTime处理当天比较错误)return differenceInCalendarDays(current, this.disableEndDate) > 0}// 结束时间限制无效日期public endDisabledDate = (current: Date): boolean => {// current < 开始时间 为无效return differenceInCalendarDays(current, this.disableStartDate) < 0}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。