问题
Angular2 Material Component has a DatePicker that shows the date in the default format.
And only support change local to "fa-IR".
How can I format it to show Persian Date?
回答1:
The following steps should help:
1: load all required modules in module.ts:
import { MatDatepickerModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS,MAT_DATE_LOCALE} from '@angular/material';
2: install jalali-moment using NPM:
npm install jalali-moment
3: import jalali date to your app:
import * as moment from 'jalali-moment';
If you use system.js you must declare it in system.config.js to run app
4: write a custom class to override default date format mechanism
export class CustomDateAdapter extends NativeDateAdapter {
constructor(matDateLocale: string) {
super(matDateLocale, new Platform());
}
format(date: Date, displayFormat: object): string {
var faDate = moment(date.toDateString()).locale('fa').format('YYYY/MM/DD');
return faDate;
}
}
5: write a constant defining you custom date format
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' }
}
}
6: MatDatepickerModule
must be added to your @NgModule
. Edit your providers section in @NgModule
to introduce the added class to your app:
@NgModule({
imports: [
MatDatepickerModule,
],
providers: [
{ provide: MAT_DATE_LOCALE, useValue: 'fa-IR' },
{ provide: DateAdapter, useClass: CustomDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
],
})
7: Add the date picker to your html page:
<mat-form-field>
<input #dateInput matInput [matDatepicker]="picker" [(ngModel)]="date" (change)="dateChange($event,dateInput,picker)" placeholder="انتخاب تاریخ">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
8: Also to datepicker pop up show date correctly when user change date input handly you must add below code and method to ts file that you put your datepicker control to its html file or template
add below mothod to handle input change event
public dateChange(event: any, dateInput: any,picker:any) {
var faDate = dateInput.value;
moment.locale('fa');
var enDateMomentFormat = moment(faDate).locale('en');
var enDate = new Date(enDateMomentFormat.toLocaleString());
picker._validSelected = enDate;
picker.startAt = enDate;
}
as date displayed by datepicker had problem, i forced to edit material.umd.js to corrected it. in address: node_modules/@angular/material/bundles/material.umd.js in line :10947 <==> also you can search for "MatMonthView.prototype._createWeekCells =" edit end lines of function as below
let displayValue = ariaLabel.split('/')[2];
this._weeks[this._weeks.length - 1]
.push(new MatCalendarCell(i + 1, Number(displayValue), ariaLabel, enabled));
回答2:
Follow below to steps to show Iranian Calendar:
- Download from npm:
npm install ng2-jalali-date-picker --save
- import the DpDatePickerModule module in typescript (.ts) or es6 files like below:
import {DpDatePickerModule} from 'ng2-jalali-date-picker'; Add DpDatePickerModule to your module imports:
- Add DpDatePickerModule to your module imports:
@NgModule({ ... imports: [ ... DpDatePickerModule ] })
How to use
`<dp-date-picker
dir="rtl"
[(ngModel)]="dateObject"
mode="day"
placeholder="تاریخ"
theme="dp-material">
</dp-date-picker>`
dateObject = "";
//OR if you have initial value you could use following code
import * as moment from 'jalali-moment';
dateObject = moment('1395-11-22','jYYYY,jMM,jDD');
Refer following libraries for your reference: jalali-date-picker , persiandatepicker
来源:https://stackoverflow.com/questions/48581641/material-component-persian-datepicker-in-angular-2