แก้ code ไม่ขึ้น

src/app/pages/pending/pending.component.html

@@ -3,6 +3,54 @@
         <div class="col-sm-12">
             <div class="card">
                 <div class="card-body">
+                    <form class="form-inline">
+                        <div class="form-group hidden">
+                            <div class="input-group">
+                                <input name="datepicker" class="form-control" ngbDatepicker #datepicker="ngbDatepicker"
+                                    [autoClose]="'outside'" (dateSelect)="onDateSelection($event)" [displayMonths]="2"
+                                    [dayTemplate]="t" outsideDays="hidden" [startDate]="fromDate!" tabindex="-1">
+                                <ng-template #t let-date let-focused="focused">
+                                    <span class="custom-day" [class.focused]="focused" [class.range]="isRange(date)"
+                                        [class.faded]="isHovered(date) || isInside(date)"
+                                        (mouseenter)="hoveredDate = date" (mouseleave)="hoveredDate = null">
+                                        {{ date.day }}
+                                    </span>
+                                </ng-template>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="input-group">
+                                <input #dpFromDate class="form-control" placeholder="yyyy-mm-dd" name="dpFromDate"
+                                    [value]="formatter.format(fromDate)"
+                                    (input)="fromDate = validateInput(fromDate, dpFromDate.value)">
+                                <div class="input-group-append">
+                                    <button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()"
+                                        type="button"></button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-group ml-2">
+                            <div class="input-group">
+                                <input #dpToDate class="form-control" placeholder="yyyy-mm-dd" name="dpToDate"
+                                    [value]="formatter.format(toDate)"
+                                    (input)="toDate = validateInput(toDate, dpToDate.value)">
+                                <div class="input-group-append">
+                                    <button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()"
+                                        type="button"></button>
+                                </div>
+                            </div>
+                        </div>
+                            <input class="form-control" type="search" placeholder="Search" aria-label="Search">
+                            <button class="btn btn-outline-success" type="submit">Search</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-body">
                     <table class="table table-striped">
                         <thead>
                             <tr>
@@ -11,14 +59,17 @@
                                 <th scope="col">Name</th>
                                 <th scope="col">Start-Date</th>
                                 <th scope="col">End-Date</th>
+                                <th scope="col">Status</th>
                             </tr>
                         </thead>
                         <tbody>
                             <tr *ngFor="let country of countries">
                                 <th scope="row">{{ country.id }}</th>
+                                <td>{{ country.detail }}</td>
                                 <td>{{ country.name }}</td>
-                                <td>{{ country.sdate | date:'dd-mm-yyyy' }}</td>
-                                <td>{{ country.edate | date:'dd-mm-yyyy' }}</td>
+                                <td>{{ country.sdate | date:'dd-MM-yyyy' }}</td>
+                                <td>{{ country.edate | date:'dd-MM-yyyy' }}</td>
+                                <td>{{ country.status }}</td>
                             </tr>
                         </tbody>
                     </table>
@@ -35,9 +86,9 @@
                             <option [ngValue]="100">100 items per page</option>
                         </select>
                     </div>
-
                 </div>
             </div>
         </div>
     </div>
+
 </div>
\ No newline at end of file

src/app/pages/pending/pending.component.ts

 import { Component, OnInit } from '@angular/core';
+import { NgbDate, NgbCalendar, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
 
 interface Country {
   id?: number;
-  equip: string;
+  detail: string;
   name: string;
   sdate: string;
   edate: string;
+  status: string;
 }
 
-const COUNTRIES: Country[] = [
-  {
-    equip: 'string',
-    name: 'ray',
-    sdate: 'string',
-    edate: 'string'
-  }
-
-];
-
 @Component({
   selector: 'app-pending',
   templateUrl: './pending.component.html',
-  styleUrls: ['./pending.component.scss']
+  styleUrls: ['./pending.component.scss'],
+  styles: [`
+  .form-group.hidden {
+    width: 0;
+    margin: 0;
+    border: none;
+    padding: 0;
+  }
+  .custom-day {
+    text-align: center;
+    padding: 0.185rem 0.25rem;
+    display: inline-block;
+    height: 2rem;
+    width: 2rem;
+  }
+  .custom-day.focused {
+    background-color: #e6e6e6;
+  }
+  .custom-day.range, .custom-day:hover {
+    background-color: rgb(2, 117, 216);
+    color: white;
+  }
+  .custom-day.faded {
+    background-color: rgba(2, 117, 216, 0.5);
+  }
+`]
 })
+
 export class PendingComponent implements OnInit {
   page = 1;
   pageSize = 10;
-  collectionSize = COUNTRIES.length;
-  countries: Country[];
 
-  constructor() {
+  countries: Country[] = [
+    {
+      detail: 'Moniter',
+      name: 'a',
+      sdate: '2021-11-25',
+      edate: '2021-11-25',
+      status: 'waiting',
+    },
+    {
+      detail: 'Mouse',
+      name: 'b',
+      sdate: '2021-11-25',
+      edate: '2021-11-25',
+      status: 'waiting',
+    }
+  ];
+  collectionSize = this.countries.length;
+  hoveredDate: NgbDate | null = null;
+
+  fromDate: NgbDate | null;
+  toDate: NgbDate | null;
+
+  constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter) {
+    this.fromDate = calendar.getToday();
+    this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
     this.refreshCountries();
   }
 
   refreshCountries() {
-    this.countries = COUNTRIES
+    this.countries = this.countries
       .map((country, i) => ({ id: i + 1, ...country }))
       .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
   }
 
+  onDateSelection(date: NgbDate) {
+    if (!this.fromDate && !this.toDate) {
+      this.fromDate = date;
+    } else if (this.fromDate && !this.toDate && date && date.after(this.fromDate)) {
+      this.toDate = date;
+    } else {
+      this.toDate = null;
+      this.fromDate = date;
+    }
+  }
+
+  isHovered(date: NgbDate) {
+    return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
+  }
+
+  isInside(date: NgbDate) {
+    return this.toDate && date.after(this.fromDate) && date.before(this.toDate);
+  }
+
+  isRange(date: NgbDate) {
+    return date.equals(this.fromDate) || (this.toDate && date.equals(this.toDate)) || this.isInside(date) || this.isHovered(date);
+  }
+
+  validateInput(currentValue: NgbDate | null, input: string): NgbDate | null {
+    const parsed = this.formatter.parse(input);
+    return parsed && this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
+  }
+
   ngOnInit(): void {
   }