日期选择框对接查询（ng-zorro-antd）

@AfeiyuO

于 2024-01-12 15:07:57 发布

阅读量409

点赞数 6

分类专栏： Angular 文章标签：前端 angular typescript

本文链接：https://blog.csdn.net/xfy991127/article/details/135553174

版权

Angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了在Angular应用中使用nz-range-picker组件进行日期范围选择，展示了如何处理用户输入、格式化日期以及响应时间变化的代码片段。

摘要由CSDN通过智能技术生成

先上效果图：

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

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
  }