nz-range-picker 默认展示当前月和上个月

4 篇文章 0 订阅
4 篇文章 0 订阅

现有需求要求今日及以后日期禁用,所以打开控件时还显示下个月就不符合实际需要。

现状:

目标:

解决思路:

看过文档之后,排除了采用官方提供的属性,方法;

发现控件有上个月 (翻页上键)的方法,所以就想我可不可在打开日期面板时就触发翻上个月的方法呢。

 

解决方法:

<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'; // 自定义选择日期之后就不算第一次打开日期选择器了
  }

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值