如何创建日期计数计时器从日期选择器输入中选择日期并显示所选日期与当前日期的差异

Question

** 这是我的 Typescript 文件 **

        import { Component, OnInit } from '@angular/core';
        import { interval, Subscription } from 'rxjs';

        @Component({
           selector: 'app-timer-app',
           templateUrl: './timer-app.component.html',
           styleUrls: ['./timer-app.component.css']
       })
       export class TimerAppComponent implements OnInit {

       model = new Date() //'2021 08 12  00:00:00'
       constructor() { }

       private timeinterval = interval
       private subscription!: Subscription;

       public dateNow = new Date();
       public dDay = this.model.getTime();
       milliSecondsInASecond = 1000;
       hoursInADay = 24;
       minutesInAnHour = 60;
       SecondsInAMinute  = 60;

      public timeDifference: any;
      public secondsToDday:any;
      public minutesToDday:any;
      public hoursToDday:any;
      public daysToDday:any;


      private getTimeDifference () {
          this.timeDifference = this.dDay - new  Date().getTime();
          this.allocateTimeUnits(this.timeDifference);
     }

     private allocateTimeUnits (timeDifference: any) {
        this.secondsToDday = Math.floor((timeDifference) / 
        (this.milliSecondsInASecond) 
         % this.SecondsInAMinute);
         this.minutesToDday = Math.floor((timeDifference) / 
       (this.milliSecondsInASecond * 
        this.minutesInAnHour) % this.SecondsInAMinute);
       this.hoursToDday = Math.floor((timeDifference) / (this.milliSecondsInASecond * 
        this.minutesInAnHour * this.SecondsInAMinute) % this.hoursInADay);
        this.daysToDday = Math.floor((timeDifference) / (this.milliSecondsInASecond * 
        this.minutesInAnHour * this.SecondsInAMinute * this.hoursInADay));
   }

    ngOnInit() {
        this.stratInterval();
   }

    ngOnDestroy() {
        this.subscription.unsubscribe();
   }
   stopInterval(){
       this.subscription.unsubscribe();
  }
    stratInterval(){
       this.subscription = this.timeinterval(1000)
      .subscribe(x => { this.getTimeDifference(); });
  }

}

• 当我运行应用程序时，默认情况下会加载并显示日期（当前日期），当我选择其他日期时，我无法在倒数计时器 html 文件中更改它仍然默认日期选择器的值，但我想选择从选定日期到当前日期的日期和开始倒计时 *

** 这是我的 Html 文件 **

  <div class="container">
       <h1 class="text-success">Date Picker App</h1>
        <form class="form-inline">
            <div class="form-group">
                <div class="input-group">
                    <input class="form-control" placeholder="yyyy-mm-dd"
                       name="dp" [(ngModel)]="model" ngbDatepicker 
                        #d="ngbDatepicker">
                     <div class="input-group-append">
                        <button class="btn btn-outline-secondary calendar" 
                       (click)="d.toggle()" type="button"></button>
                     </div>
               </div>
           </div>
      </form>   
 </div>

 <!--Count Down Timer DIsplay -->

   <div class="container mt-5">
  
       <div class="timer" *ngIf="model">
           <h2>Time Left</h2>
           <span id="days"> {{daysToDday}} </span> Day(s)
           <span id="hours"> {{hoursToDday}} </span>Hrs 
           <span id="minutes"> {{minutesToDday}} </span>Min
           <span id="seconds"> {{secondsToDday}} </span>S <br>
           <div class="mt-3">
               <button  (click)="stopInterval()" class="btn btn-danger btn- 
               sm">Stop</button>
               <button  (click)="stratInterval()" class="btn btn-info btn-sm 
               "id="resetbtn">Restart</button>
          </div>
     </div>
 </div>

** 我已经尝试了许多选项和逻辑，但它不起作用请任何人都可以指导我如何实现这个**

** 这是结果截图 **

Answer 1

问题是你的getTimeDifference函数是根据dDay计算时差的：

this.timeDifference = this.dDay - new Date().getTime();

但dDay 只设置一次（声明变量的地方）：

public dDay = this.model.getTime();

在日期选择器中选择新日期时，变量model 会更新，但dDay 永远不会更新，它的值是原始日期。如果您将以下行添加到您的 getTimeDifference 函数中：

this.dDay = this.model.getTime();

然后dDay 将在选择一个后更新为新日期。 getTimeDifference 函数变为：

private getTimeDifference() {
  this.dDay = this.model.getTime(); // new line to update dDay
  this.timeDifference = this.dDay - new Date().getTime();
  this.allocateTimeUnits(this.timeDifference);
}

请参阅this StackBlitz 进行演示。现在，当您选择新日期时，倒数计时器会相应更新。