Introduction So I'm using owlDateTime in Angular 9 to let user select time range: from that date and time to that date and time. I'm using regular range mode, reactive form:
<input matInput formControlName="dateTimeRangeControl"
[owlDateTime]="dt"
[owlDateTimeTrigger]="dt"
[selectMode]="'range'"
[max]="validCurrentDate">
The problem When user selects two dates in calendar, corresponding times set to current time. So range ends looking something like this: ["2020-08-10T10:00", "2020-08-11T10:00"]. Same time in both fields. How can I change this default time value? So it is set not to current time, but, for example, to the current time + 2 hours?
TS
ngOnInit(): void {
this.form = this.formBuilder.group({
...
dateTimeRangeControl: [[]],
});
}
submit(): void {
this.backEndService.post(this.form.value);
}
You can simply set your hours using, setHours()
and getHours()
methods.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
styleUrls: ['./app.component.scss'],
templateUrl: './app.component.html',
})
export class AppComponent {
myDate = new Date();
constructor(){
this.myDate.setHours(this.myDate.getHours() + 2);
}
}
According to your update, I understand that date picker setting values by itself. This configuration should help,
component.html
<div class="input-wrapper">
<label>Date Time Range:</label>
<input [(ngModel)]="dateRange " [selectMode]="'range'"
[owlDateTimeTrigger]="dtPicker1" [owlDateTime]="dtPicker1">
<owl-date-time #dtPicker1></owl-date-time>
</div>
component.ts
export class AppComponent {
dateRange = [];
constructor(){
const date = new Date();
this.dateRange = [date, new Date(date.getFullYear(), date.getMonth(), date.getDate())];
}
}
My referance is here, search in this page with keyword Use with @angular/forms