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,这样页面的展现和数据就都是咱们想要的了
发表回复