CODEWITHSUNDEEP
angularformsng-bootstrap
user8944795
user8944795

Reputation:

I am using ng-bootstrap and ngbDatepicker for the calender and I want to add one day to endDate when i choose start date from calender

I am working on ngbDatepicker and I want to add one day to the calendar when I choose the start date. my start and end date is in below format:

 public startDate: NgbDate;
 public endDate: NgbDate;

and when I choose start date i get date in the format of:

startDate :{year:2018,month:4,date:10}

my html code is:

<input required class="form-control" placeholder="dd-MM-YYYY" name="startDate" required ngbDatepicker #d="ngbDatepicker"
            formControlName="startDate" [minDate]="minDate" [readonly]="true" [formControl]="formModel.controls.startDate"
            [ngClass]="{'has-error':!formModel.controls['startDate'].valid && formModel.controls['startDate'].touched}"
          />
                 <input required class="form-control" placeholder="dd-MM-YYYY" name="endDate" ngbDatepicker #d2="ngbDatepicker" [formControl]="formModel.controls.endDate"
            [minDate]="minDate" [readonly]="true" [ngClass]="{'has-error':!formModel.controls['endDate'].valid  && formModel.controls['endDate'].touched}"
          />

and ts code is :

  this.formModel.valueChanges.subscribe((e: any) => {
  var dateStart = e.startDate;
});

here dateStart is in format :

  {year:2018,month:4,date:10}

Upvotes: 0

Views: 1016

Answers (1)

Eliseo
Eliseo

Reputation: 58019

//create a change only for 'startDate', then, the argument is the  startDate itselft

this.formModel.get('startDate').valueChanges.subscribe((value: any) => {

  //create a javascript type Date, in typescript don't use "var", use "let"
  let date:any=new Date('' + value.year + '-' + value.month + '-' + value.day);

  //Add one day
  date=new Date(date.getTime()+24*60*60*1000);

  //create a ngbDateStructure, 
  //see that javaScript getMonth() return 0 to January,1 to Febrary.. 
  let endDate={ year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() }

  //change the value of endDate
  this.formModel.get('endDate').setValue(endDate);
}

NOTE: in ng-bootstrap is day, not date

Upvotes: 1

Related Questions