angularowl-date-time

How to change default time value in owlDateTime?


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);
}

Solution

  • 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