<input mdc-datetime-picker="" date="true" time="true" type="text" id="datetime"

placeholder="Date" show-todays-date="" minutes="true" min-date="date" show-icon="true"

ng-model="dateTime" class=" dtp-no-msclear dtp-input md-input">

import {MAT_DATE_LOCALE} from '@angular/material';

​

providers: [{ provide: MAT_DATE_LOCALE, useValue: 'he-HE' }]

// in the app.module.ts

import { Component } from '@angular/core';

​

@Component({

  selector: 'app-timepicker',

  template: `

    <mat-form-field>

      <input matInput [matTimepicker]="timepicker" placeholder="Select time" [(ngModel)]="selectedTime">

      <mat-icon matSuffix (click)="timepicker.open()">access_time</mat-icon>

      <mat-timepicker #timepicker></mat-timepicker>

    </mat-form-field>

  `

})

export class TimepickerComponent {

  selectedTime: Date;

}

<input [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="Date Time">

<owl-date-time #dt1></owl-date-time>

<input matInput [matDatepicker]="picker">

<mat-hint>MM/DD/YYYY</mat-hint>

<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>

<mat-datepicker #picker></mat-datepicker>

As you are using Angular Reactive forms, you can listen for changes in the dateOne form control value through the valueChanges observable and set the dateTwo form control value.

​

this.form.get('dateOne')?.valueChanges.subscribe(date => {

  const dateTwo = formatDate(new Date()+ 7, 'MM/dd/yyyy', 'en');

  this.form.get('dateTwo')?.setValue(dateTwo);

});