我在我的 Angular 元素中使用了 angular2-date-picker 插件,我想显示当前时间 - 5 分钟,所以我在我的 component.ts 文件中写了 modifyDate()
组件.ts:
modifyDate() {
let modifiedDate=new Date();
modifiedDate.setMinutes(modifiedDate.getMinutes()-5);
console.log("modified: "+modifiedDate);
return modifiedDate;
}
//datetime picker
startDate: Date =this.modifyDate();
settings = {
bigBanner: true,
timePicker: true,
format: 'dd-MM-yyyy hh:mm a',
defaultOpen: false,
closeOnSelect:false
};
有component.html文件:
<angular2-date-picker class="form-control" id="datetimepicker" (onDateSelect)="onDateSelect($event)" name="datetime" [(ngModel)]="startDate" [settings]="settings"></angular2-date-picker>
构建完上面的代码后,在我的 DOM 中我得到了下一行:
如您所见,在标记中,ng-reflect-model 分配了正确的数据,但在下面,在元素中,无论如何我都会得到一个当前日期时间,因此,在我的应用程序中显示的是当前时间。你能提出任何解决方案吗?
最佳答案
无法重现您面临的问题。也许缺少让它工作的东西......
相关HTML:
<angular2-date-picker [(ngModel)]="date" [settings]="settings" name="angular-calendar" (onDateSelect)="onDateSelect($event)"
ngDefaultControl></angular2-date-picker>
<br/>
<p>
Time from selection: <mark> {{date | date:'EE, MMM d, y, H:mm:ss zzzz' }}</mark>
</p>
<p>
minus 5 minutes: <mark>{{newVar}}</mark>
</p>
相关TS:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 6';
date = new Date();
newVar: string = '';
datePulled:boolean=false;
settings = {
bigBanner: true,
timePicker: true,
format: 'dd-MM-yyyy',
defaultOpen: true
}
constructor() {
/* Update #2 */
if(!this.datePulled){
let someVar = new Date(this.date);
someVar.setMinutes(someVar.getMinutes() - 5);
this.date = someVar;
this.datePulled = true;
}
}
onDateSelect(evt) {
if(!this.datePulled){
let someVar = new Date(this.date);
someVar.setMinutes(someVar.getMinutes() - 5);
/* Update #1 */
this.date = someVar;
this.newVar = someVar.toString();
console.log(evt, ' & date:', this.newVar);
this.datePulled = true;
}
}
}
更新#1:根据请求者的意见,原先选择的日期后退了5分钟
更新 #2:根据请求者的评论,页面加载时加载的日期也后退了 5 分钟
更新 #3:根据请求者的评论,timepicker 现在设置为 true;
关于html - angular2-date-picker - 仅显示当前日期时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56558066/