如何在owlDateTime中更改默认时间值? [英] How to change default time value in owlDateTime?

问题描述

简介所以我在Angular 9中使用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">

问题当用户在日历中选择两个日期时，对应的时间设置为当前时间.因此范围结束看起来像这样:["2020-08-10T10:00"，"2020-08-11T10:00"].两个字段中的时间相同.如何更改此默认时间值?因此，它不是设置为当前时间，而是设置为当前时间+ 2小时?

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

推荐答案

您可以简单地使用 setHours()和 getHours()方法来设置小时数.

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

我的参考文献在这里，在此页面中用关键字与@ angular/forms一起使用

My referance is here, search in this page with keyword Use with @angular/forms

这篇关于如何在owlDateTime中更改默认时间值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！