时间段查询

src/app/my/integration-detail/integration-detail.component.html

@@ -5,7 +5,18 @@
     <li (click)="queryLists(2)"><span [ngClass]="{'actived':status===2}">兑换</span></li>
   </ul>
   <ul class="dateContent">
-    <li>2022年</li>
+   
+    <li>
+      <ListItem
+      DatePicker
+      [mode]="'month'"
+      [(ngModel)]="searchDateFormat"
+      (onOk)="onOk($event)"
+    >
+    {{searchDate}} <i class="iconfont icon-xiangxia" style="margin-left: 10px;"></i>
+     
+    </ListItem>
+    </li>
   </ul>
   <ul class="detailLists">
     <li *ngFor="let item of lists">

src/app/my/integration-detail/integration-detail.component.scss

@@ -19,9 +19,9 @@
 .dateContent{
     background-color: #f9f9f9;
     li{
-        height: 34px;
-        padding-left: 20px;
-        line-height: 34px;
+        height: 44px;
+        line-height: 44px;
+        display: flex;
     }
 }
 .detailLists{

src/app/my/integration-detail/integration-detail.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit  } from '@angular/core';
 import { MyService } from '../my.service';
 
 @Component({
@@ -10,6 +10,8 @@ export class IntegrationDetailComponent implements OnInit {
   integralGrantInfos:Array<any>;
   lists:Array<any>;
   status:number = 0;
+  searchDate:string = '2022年';
+  searchDateFormat:Date = new Date(2022, 1);
   constructor(private myService:MyService) { }
 
   ngOnInit() {
@@ -31,4 +33,20 @@ export class IntegrationDetailComponent implements OnInit {
     })
   }
 
+  currentDateFormat(date, format: string = 'yyyy-mm'): any {
+    const pad = (n: number): string => (n < 10 ? `0${n}` : n.toString());
+    return format
+      .replace('yyyy', date.getFullYear())
+      .replace('mm', pad(date.getMonth() + 1))
+      .replace('dd', pad(date.getDate()))
+      .replace('HH', pad(date.getHours()))
+      .replace('MM', pad(date.getMinutes()))
+      .replace('ss', pad(date.getSeconds()));
+  }
+
+  onOk(result: Date) {
+    this.searchDate = this.currentDateFormat(result);
+    this.searchDateFormat = result;
+    this.queryPractitionerIntegralList(this.searchDate + '-01')
+  }
 }

src/styles.scss

@@ -288,3 +288,9 @@ footer.fixed{
   font-size: 16px!important;
 }
 
+.date-picker-list .am-list-body,.date-picker-list .am-list-item:not(:last-child) .am-list-line{
+ border: none;
+}
+.am-list-item{
+  background-color: #f9f9f9;
+}
\ No newline at end of file