使用ngModelChange时，当用户第一次使用日期选择器选择日期时，它不会更改日期

Question

I am using two date picker From date and To date , actually what i want is that when user picks a date (From date picker) and that date is greater then the value of (To date picker) its should then assign the (From date picker) value to (To date picker) as well and vice versa.

I am using the following code but its not working properly

Component File

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

Hopefully I have understood you correctly, that is my solution:

HTML:

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

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

TS Component:

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;

    }
  }
}

Let me know if it worked for you as well.