日期选择框对接查询(ng-zorro-antd)

先上效果图:

下面是代码实现过程,真的是浅水淹死人。

html页面

<nz-range-picker 
    name="publishTimeRange" 
    nzFormat="yyyy-MM-dd" 
    [(ngModel)]="publishTimeRange" 
    (ngModelChange)="hdTimeChange($event)"
>
</nz-range-picker>

ts页面

  /** 上传日期 */
  publishTimeRange: any[] = [];
  

  //参数
  startTime = '';
  endTime = '';



  /*查询方法*/
  query() {
    if(this.publishTimeRange.length == 2){
      this.startTime = this.filterTime(this.publishTimeRange[0]),
      this.endTime = this.filterTime(this.publishTimeRange[1])
    }else{
      this.startTime = '',
      this.endTime = ''
    }
  }



  // 时间转换
  filterTime(time:any) {
    var date = new Date(time);
    var y:any = date.getFullYear();
    var m:any = date.getMonth() + 1;
    var h:any = date.getHours();
    var minute:any = date.getMinutes();
    var s:any = date.getSeconds();
    m = m < 10 ? "0" + m : m;
    var d:any = date.getDate();
    d = d < 10 ? "0" + d : d;
    h = h < 10 ? "0" + h : h;
    minute = minute < 10 ? "0" + minute : minute;
    s = s < 10 ? "0" + s : s;
    return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
  }

  //时间出发事件
  hdTimeChange(e:any){
      this.publishTimeRange = e
  }

猜你喜欢

转载自blog.csdn.net/xfy991127/article/details/135553174
今日推荐