如何解决如何在owlDateTime中更改默认时间值?
简介 所以我在Angular 9中使用owlDateTime来让用户选择时间范围:从该日期和时间到该日期和时间。我正在使用常规范围模式,反应形式:
<input matInput formControlName="dateTimeRangeControl"
[owlDateTime]="dt"
[owlDateTimeTrigger]="dt"
[selectMode]="'range'"
[max]="validCurrentDate">
问题 当用户在日历中选择两个日期时,对应的时间设置为当前时间。因此范围结束看起来像这样:[“ 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);
}
解决方法
您可以使用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搜索
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。