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

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(); });
  }

}

当我运行应用程序然后默认加载和显示日期（当前日期）并且当我 select 另一个日期我无法更改我的倒计时 html 文件它仍然 defulat 日期选择器的值，但我想 select 日期和从 selected 日期到当前日期的日期开始倒计时 *

** 这是我的 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 将在 selected 后更新为新日期。 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 进行演示。现在，当您 select 一个新日期时，倒数计时器会相应更新。

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

How to Create Date Count timer selecting date from the date picker input and show the difference of selected date to current date

html

datepicker

ng-bootstrap

ngmodel

angular12