解决ng-zorr-antd 日期控件动态触发问题

2018-11-30  本文已影响0人  niccky

问题概述

项目开发过期中,有时候需要通过点击某个物件来触发日期控件操作而不是直接在页面上显示日期控件。但可惜的是,ng-zorro-antd 没有提供这样的操作方法,但这不影响使用方式来弥补这一功能缺失。

通过查看日期组件的源码得知,日期弹出框的弹出是通过 nzOpen 来控件的,为此可以通过动态修改 nzOpen 这个属性来处理这个问题。
示例代码如下:

html 部分

<nz-range-picker #picker formControlName="dateRange" nzFormat="yyyy-MM-dd HH:mm" [nzDisabledDate]="disabledDate" (ngModelChange)="dateModelChange(m)"
  nzShowTime
  (nzOnOk)="close(picker)"
  (click)="open(picker)"
>
</nz-range-picker>                        

ts 部分

close = picker => picker.nzOpen = false;
open = picker => picker.nzOpen = true;

使用上面这种方式后,还有是问题。
场景如下:

<nz-range-picker #picker></nz-range-picker>
<span (click)="open(picker)">open</span>


...
open(ctl){
  ...
  ctl.nzOpen = true;
  ...
}

会发现上面这种方式,会导致日期选择框跑到外面去了。在日期弹出框上选择完对应的日期后,确定的按钮竟然不见了...
换另外一种解决方法,如下:

open(ctl:any){
  ...
  ctl && ctl.picker.showOverlay();//调用后,会自动更新弹出框显示在正确的位置
  ...
}

...完...

上一篇下一篇

猜你喜欢

热点阅读