如何更改 owlDateTime 中的默认时间值？

Question

简介所以我在 Angular 9 中使用 owlDateTime 让用户 select 时间范围：从那个日期和时间到那个日期和时间。我正在使用常规范围模式，反应形式：

<input matInput formControlName="dateTimeRangeControl"
                 [owlDateTime]="dt"
                 [owlDateTimeTrigger]="dt"
                 [selectMode]="'range'"
                 [max]="validCurrentDate">

问题当用户 selects 日历中的两个日期时，相应的时间设置为当前时间。所以范围结束看起来像这样：[“2020-08-10T10:00”，“2020-08-11T10:00”]。同时在两个领域。如何更改此默认时间值？所以它不是设置为当前时间，而是例如设置为当前时间 + 2 小时？

TS

 ngOnInit(): void {
    this.form = this.formBuilder.group({
     ...
     dateTimeRangeControl: [[]],
    });
  }

submit(): void {
  this.backEndService.post(this.form.value);
}

Answer 1

您可以使用 setHours() 和 getHours() 方法简单地设置您的时间。

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

根据您的更新，我了解到日期选择器本身设置值。这个配置应该有帮助，

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

我的参考在这里，在本页搜索关键词Use with @angular/forms

如何更改 owlDateTime 中的默认时间值？

How to change default time value in owlDateTime?

angular

owl-date-time