Home > Mobile >  Angular: when I press 'n' key, in the input field date, I want my day to move to the next
Angular: when I press 'n' key, in the input field date, I want my day to move to the next

Time:06-13

I am working on this project and need help to increase my day by one, when i insert 'n' key here is what I've been doing and still don't have any change

addDays($event) {
    const date = new Date();
    if ($event.key === 'n') {
      // add a day
      date.setDate(date.getDate()   1);
    }
  }

the html:

<input matInput id="datePicker-{{rowIndex}}" [matDatepicker]="datePicker" [(ngModel)]="row.date" required maxlength="10" (change)="isOccurrenceDateValid(rowIndex)" 
             **(keydown)="addDays($event, rowIndex)"**>

CodePudding user response:

Here is a stackblitz demo i just created, check it out

CodePudding user response:

@koyes Here is a little example, I've made some tweak to the previous answer to meet what you need

https://stackblitz.com/edit/angular-ivy-vcbpqw?file=src/app/app.component.html,src/app/app.component.ts,src/app/app.module.ts

<input
    matInput
    [ngModel]="date"
    [matDatepicker]="datePicker"
    required
    maxlength="10"
    
    [readonly]="true"
    (keydown.n)="nextDay($event)"
  />
nextDay(event: any) {
    event.stopPropagation();
    this.date = new Date(this.date.setDate(this.date.getDate()   1));
  }
  • Related