[英]How to format date with Angular material datetime picker
I am searching a lot on google.我在谷歌上搜索了很多。 But I have the material datetime picker.
但我有材料日期时间选择器。 So not the date picker, but the datetime picker.
所以不是日期选择器,而是日期时间选择器。 And I want to format the date-time, like in this format:
我想格式化日期时间,就像这种格式:
2021-02-15 23:59:59
But I try to do it without moment.js.但我尝试在没有 moment.js 的情况下做到这一点。 Because it is not good practice.
因为这不是好的做法。 But if it can't be done without moment.js then be it.
但是,如果没有 moment.js 就无法做到,那就这样吧。
So I have this js file:所以我有这个js文件:
const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
parse: {
dateInput: ''
},
display: {
dateInput: 'YYYY-MM-DD HH:mm:ss',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
}
};
@Component({
selector: 'app-widget-editor',
templateUrl: './widget-editor.component.html',
styleUrls: ['./widget-editor.component.css'],
providers: [
{provide: DateAdapter, useClass: AppDateAdapter},
{provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS}
]
})
export class WidgetEditorComponent implements OnInit, AfterContentInit {
@ViewChild('picker') picker;
start: string;
end: string;
interval: string;
duration: string;
yrange: number[];
constructor(private editorService: EditorService ) {}
reOpenCalender() {
let self = this;
setTimeout(() => {
self.picker.open();
} );
}
}
and this is template:这是模板:
<div class="form-group row">
<label for="start" class="editor-label col-sm-4"><strong> Time start:</strong></label>
<input [(ngModel)]="start" format [ngModelOptions]="{standalone: true}" type="text" class="date" id="start" value="start" matInput [ngxMatDatetimePicker]="picker">
<ngx-mat-datetime-picker #picker></ngx-mat-datetime-picker>
<span class="ml-2" (click)= "reOpenCalender()">
<fa-icon [icon]="faCalendarAlt" size="1x" #picker [styles]="{'color': '#B7B7B7'}"
></fa-icon>
</span>
</div>
But the format is still like this:但是格式还是这样的:
2/16/2021, 04:36:32
and not in this format:而不是这种格式:
2021-02-15 23:59:59
So what I have to change?那么我必须改变什么?
Thank you谢谢
here is an answer to your question.这是您问题的答案。
How to change angular material datepicker format 如何更改 angular 材料日期选择器格式
We have to use -我们必须使用 -
import { MAT_DATE_FORMATS } from '@angular/material';
and pass the defined format to provider along with above并将定义的格式与上述一起传递给提供者
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.