import { Component } from '@angular/core';
//DATE PICKER
// Custom DateAdapter
import { MatDatepickerModule, MatNativeDateModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
const MY_DATE_FORMATS = {
parse: {
dateInput: { month: 'short', year: 'numeric', day: 'numeric' }
},
display: {
dateInput: 'input',
monthYearLabel: { year: 'numeric', month: 'short' },
dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
monthYearA11yLabel: { year: 'numeric', month: 'long' },
}
};
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
matDatepicker;
date;
ngOnInit(){
this.date = new Date();
}
changer($event){
this.matDatepicker =$event;
console.log("******date selectionner",this.matDatepicker);
console.log(this.matDatepicker.getTime()*0.001); //timestamps de la date picker
}
}
<mat-form-field>
<input
matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker (selectedChanged)="changer($event)"></mat-datepicker>
</mat-form-field>
{{ matDatepicker}}
我想在法语区域设置中显示角度材料日期选择器组件。如何做到这一点?
请参阅日期选择器的文档:https://github.com/angular/material2/blob/master/src/lib/datepicker/datepicker.md#setting-the-locale-code
如果要在运行时更改它,可以像这样注入DateAdapter
:
constructor(private dateAdapter: DateAdapter<Date>) {
this.dateAdapter.setLocale('fr');
}