Question

Angular2 Material Component有一个DatePicker，以默认格式显示日期。

并且仅支持“fa-IR”的本地更改。

如何格式化以显示波斯日期？

Answer 1

以下步骤应该有所帮助：

1 ：在module.ts中加载所有必需的模块：

import { MatDatepickerModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS,MAT_DATE_LOCALE} from '@angular/material';

2 ：使用NPM安装jalali-moment：

 npm install jalali-moment

3 ：将jalali日期导入您的应用：

import * as moment from 'jalali-moment';

如果您使用system.js，则必须在system.config.js中声明它以运行app

4 ：编写自定义类以覆盖默认日期格式机制

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 ：编写一个定义自定义日期格式的常量

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必须添加到您的@NgModule。在@NgModule中修改您的提供商部分，将已添加的课程介绍到您的应用中：

@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 ：将日期选择器添加到您的html页面：

<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：另外，当用户手动更改日期输入时，datepicker会正确弹出显示日期，你必须将下面的代码和方法添加到你将datepicker控件放到其html文件或模板的ts文件中

添加以下mothod来处理输入更改事件

 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;
}

由于datepicker显示的日期有问题，我强制编辑material.umd.js来纠正它。在地址：node_modules/@angular/material/bundles/material.umd.js 在线：10947＆lt; ==＆gt;你也可以搜索＆＃34; MatMonthView.prototype._createWeekCells =＆＃34; 编辑功能的结束行如下

let displayValue = ariaLabel.split('/')[2];
this._weeks[this._weeks.length - 1]
    .push(new MatCalendarCell(i + 1, Number(displayValue), ariaLabel, enabled));

Answer 2

按照以下步骤显示伊朗日历：

从npm下载：npm install ng2-jalali-date-picker --save
在typescript（.ts）或es6文件中导入DpDatePickerModule模块，如下所示： import {DpDatePickerModule} from 'ng2-jalali-date-picker'; Add DpDatePickerModule to your module imports:
将DpDatePickerModule添加到模块导入中： @NgModule({ ... imports: [ ... DpDatePickerModule ] })

如何使用

`<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');

参考以下图书馆供您参考： jalali-date-picker，persiandatepicker

Answer 3

我不建议使用jalali-moment。 Check the bundle size。而且它不是摇树的。

相反，我基于ng-bootstrap jalali编写了自己的MaterialJalaliDateAdapter，并用this repo中的jalali-moment代替了它。结果代码很大，可以在this repo中找到。

您可以像这样使用它：

{ provide: DateAdapter, useClass: MaterialJalaliDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: PERSIAN_DATE_FORMATS },

材料成分波斯日期选择器角度为2

3 个答案: