使用ngModelChange時，當用戶第一次使用日期選擇器選擇日期時，它不會更改日期

Question

我正在使用兩個日期選擇器From date和To date，實際上我想要的是當用戶選擇一個日期（From date picker）並且該日期大於然后（To date picker）的值時，它應該分配（From date）選擇器）的值也設置為（日期選擇器），反之亦然。

我正在使用以下代碼，但無法正常工作

組件文件

if (callFrom == 'from' && claimCharge.Dos_From) {
  if (this.getLengthOfYear(claimCharge.Dos_To)) {
    if (this.checkIfTodayDate(claimCharge.Dos_To)) {
      if (this.getLengthOfDate(claimCharge.Dos_From)) {
        .Dos_To = claimCharge.Dos_From;
      }
    }
  }
}


if (callFrom == 'from' && claimCharge.Dos_From) {
  if (claimCharge.Dos_From >= claimCharge.Dos_To) {
    if (this.getLengthOfYear(claimCharge.Dos_From)) {
      if (claimCharge.Dos_To.toString() != new Date(new Date().setHours(0, 0, 0, 0)).toString() as any) {
        claimCharge.Dos_To = claimCharge.Dos_From;
      }
    }
  }
} 

HTML：

<datetime  [attr.id]="'txtProcedureDOSTo_'+ndx" [timepicker]="false" [datepicker]="datepickerOpts" (ngModelChange)="methodFromAndToCheck(p,'to')" [(ngModel)]="p.Dos_To" ></datetime>
<datetime  [attr.id]="'txtProcedureDOSFrom_'+ndx" [timepicker]="false" [datepicker]="datepickerOpts" (ngModelChange)="methodFromAndToCheck(p,'from')" [(ngModel)]="p.Dos_From"></datetime>

Answer 1

希望我正確理解了您，這是我的解決方案：

HTML：

 <input placeholder="From" [(ngModel)]="from" type="date" (change)="onChange('from')">

 <input placeholder="To" [(ngModel)]="to" type="date" (change)="onChange('to')">

TS組件：

import {Component, OnInit} from '@angular/core'

@Component({
  selector: 'date',
  templateUrl: './date.component.html',
  styleUrls: ['./date.component.css']
})
export class DateComponent implements OnInit {
  from: string;
  to: string;

  ngOnInit(){
    // get current date to set the starting values for inputs
    // d is a type of Date()

    let d = new Date();

    // d.toISOString() returns date in format YYYY-MM-DDTHH:mm:ss.sssZ
    // since input of "date" type uses YYYY-MM-DD format
    // we take first 10 characters with .slice(0,10)

    this.from = d.toISOString().slice(0,10);
    this.to = d.toISOString().slice(0,10);
  }

  onChange(input: string){
    if (input === 'from') {
      // if Date from input "to" is less than from input "from"
      // value of the input "to" is equal to value of the input "from"

      this.to = new Date(this.to) < new Date(this.from) ? this.to = this.from : this.to;

    } else {

      // if Date from input "to" is less than from input "from"
      // value of the input "from" is equal to value of the input "to"

      this.from = new Date(this.to) < new Date(this.from) ? this.from = this.to : this.from;

    }
  }
}

讓我知道它是否對您也有用。