角材料组件 - dateTimePicker-午夜12h/24h发行
我已经实现了Angular Material DateTime Picker,并且有奇怪的问题。
它显示24:00:00作为午夜时间
选择同样的问题,即使我将其更改为00
html
<div fxLayout="row" fxLayoutAlign="start start" [formGroup]="filtersFormGroup">
<input class="configuration-input" [ngxMatDatetimePicker]="picker" (focus)="initDatesRange()" placeholder="Choose a date" [formControlName]="dateControl" style="width: 100%"
[min]="minDate" [max]="maxDate" [disabled]="disabled">
<mat-datepicker-toggle matSuffix [for]="picker" (click)="initDatesRange()"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
[touchUi]="touchUi" [color]="color" [enableMeridian]="enableMeridian"
[disableMinute]="disableMinute" [hideTime]="hideTime">
</ngx-mat-datetime-picker>
</div>
ts
import {Component, Input, OnInit, Output} from '@angular/core';
import {ThemePalette} from '@angular/material/core';
import {FormGroup} from '@angular/forms';
@Component({
selector: 'app-form-datetimepicker',
templateUrl: './form-datetimepicker.component.html',
styleUrls: ['./form-datetimepicker.component.scss']
})
export class FormDatetimepickerComponent implements OnInit {
@Input() dateControl: string;
@Input() filtersFormGroup: FormGroup;
minDate:Date;
maxDate:Date;
disabled: false;
showSpinners= false;
showSeconds= false;
stepSecond= 1;
stepMinute=1;
stepHour= 1;
touchUi= false;
color: ThemePalette;
enableMeridian= true;
hideTime= false;
disableMinute= false;
constructor() {
}
ngOnInit(): void {
}
initDatesRange() {
this.minDate = new Date();
this.maxDate = new Date();
this.maxDate.setMinutes(new Date().getMinutes()+1);
}
}
I have implemented angular material datetime picker and I have strange issue.
It shows 24:00:00 as midnight time
On time picking it has same issue, it back to 12 even if I am changing it to 00
HTML
<div fxLayout="row" fxLayoutAlign="start start" [formGroup]="filtersFormGroup">
<input class="configuration-input" [ngxMatDatetimePicker]="picker" (focus)="initDatesRange()" placeholder="Choose a date" [formControlName]="dateControl" style="width: 100%"
[min]="minDate" [max]="maxDate" [disabled]="disabled">
<mat-datepicker-toggle matSuffix [for]="picker" (click)="initDatesRange()"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
[touchUi]="touchUi" [color]="color" [enableMeridian]="enableMeridian"
[disableMinute]="disableMinute" [hideTime]="hideTime">
</ngx-mat-datetime-picker>
</div>
TS
import {Component, Input, OnInit, Output} from '@angular/core';
import {ThemePalette} from '@angular/material/core';
import {FormGroup} from '@angular/forms';
@Component({
selector: 'app-form-datetimepicker',
templateUrl: './form-datetimepicker.component.html',
styleUrls: ['./form-datetimepicker.component.scss']
})
export class FormDatetimepickerComponent implements OnInit {
@Input() dateControl: string;
@Input() filtersFormGroup: FormGroup;
minDate:Date;
maxDate:Date;
disabled: false;
showSpinners= false;
showSeconds= false;
stepSecond= 1;
stepMinute=1;
stepHour= 1;
touchUi= false;
color: ThemePalette;
enableMeridian= true;
hideTime= false;
disableMinute= false;
constructor() {
}
ngOnInit(): void {
}
initDatesRange() {
this.minDate = new Date();
this.maxDate = new Date();
this.maxDate.setMinutes(new Date().getMinutes()+1);
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论