关于前端:angular-810-系统中使用ngzorroantd-852的相关问题

3次阅读

共计 1415 个字符，预计需要花费 4 分钟才能阅读完成。

ng-zorro-ant 是 angular 官网举荐的一款国内的开源组件，通常状况下十分好用，然而遇到一些粗疏的要求的时候，就须要本人入手解决一些问题了。

比方明天就遇到领导要求在日期抉择框中抉择日期当前主动把工夫给选中，如果是一般的工夫框的话，比方这样

就能够间接依照官网给的 api 间接进行批改应用[nzShowTime]

然而很惋惜，应用的是 range-picker，也就是这样

官网尽管在 api 里写上了

nzShowTime 里有 nzDefaultOpenValue 然而实测在代码中退出 nzDefaultOpenValue 对于 range-picker 来说并没有任何作用

所以想通过官网 api 间接搞定是不行的，只能通过事件进行取巧，达到目标

间接上代码:

<nz-range-picker 
[nzShowTime]="{nzFormat:'HH:mm'}"
nzFormat="yyyy-MM-dd HH:mm"
[nzAllowClear]="'false'" 
[(ngModel)]="allDate"
(ngModelChange)="onChange($event)"
(nzOnCalendarChange)="onChange($event,'waite')"
[nzPlaceHolder]="[' 播发开始工夫 ',' 播发完结工夫 ']">
</nz-range-picker>

关注重点，外面有两个事件，一个是 (ngModelChange)，另一个是(nzOnCalendarChange)。依据官网 api 形容，前者是工夫发生变化时的回调，后者是待选日期发生变化的回调，简而言之就是只有工夫和日期扭转了就会触发，后者只会在日期扭转的时候会触发。所以咱们就在(nzOnCalendarChange) 这个事件上做做文章。

目前的状况是，只有选中了工夫，会主动把工夫抉择为此时此刻

所以私聊就是在点击日期的那一刻也就是触发 (nzOnCalendarChange) 事件的时候，把日期的时候改为本人想要的工夫

代码如下

onChange($event,type?){// 日期抉择框
    if(type){this.allDate = []
      this.trueData.startTime = ''this.trueData.endTime =''
      $event[0]=this.Format(moment($event[0]).set({'hours':0,'minute': 0, 'second': 0}))
      if($event.length>1){$event[1]=this.Format(moment($event[1]).set({'hours':23,'minute': 59, 'second': 0}))
      }
    }
    if($event.length>1){this.trueData.startTime = this.Format($event[0])
      this.trueData.endTime = this.Format($event[1])
    }
    this.allDate = $event
  }

Format(time){// 返回指定类型的日期
return moment(time).format('YYYY-MM-DD HH:mm')
}

其中 $event 是事件的返回值，是一个数组，咱们间接批改返回值；moment 是一个开源的 js 库，十分好用。

而后再把值赋给绑定的的 allDate，这样页面的展现和数据就都是咱们想要的了

正文完