Material angular 2 中的组件波斯语日期选择器
Material component persian datepicker in angular 2
Angular2 Material 组件有一个以默认格式显示日期的 DatePicker。
并且只支持本地更改为"fa-IR"。
如何设置格式以显示波斯日期?
按照以下步骤显示伊朗日历:
- 从 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
以下步骤应该有所帮助:
1: 在module.ts:
中加载所有需要的模块
import { MatDatepickerModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS,MAT_DATE_LOCALE} from '@angular/material/datepicker';
2:使用 NPM 安装 jalali-moment:
npm install jalali-moment
3: 在您的应用中导入 jalali 日期:
import * as moment from 'jalali-moment';
如果使用system.js,必须在system.config.js到运行app中声明
4: 写一个自定义的class来覆盖默认的日期格式机制
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
中编辑您的提供商部分,将添加的 class 引入您的应用程序:
@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 弹出正确显示日期,您必须将以下代码和方法添加到 ts 文件中,您将 datepicker 控件放到它的 html 文件或模板
添加以下方法来处理输入更改事件
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;
}
由于日期选择器显示的日期有问题,我不得不编辑 material.umd.js 来更正它。
地址:node_modules/@angular/material/bundles/material.umd.js
在 :10947 <==> 也可以搜索 "MatMonthView.prototype._createWeekCells ="
编辑函数的结束行如下
let displayValue = ariaLabel.split('/')[2];
this._weeks[this._weeks.length - 1]
.push(new MatCalendarCell(i + 1, Number(displayValue), ariaLabel, enabled));
我不推荐使用 jalali-moment
。 Check the bundle size。而且它不是 tree-shakable。
相反,我在 ng-bootstrap jalali and by replacing it with the jalali-moment
from this repo. The result code is big and is available in this repo 的基础上编写了自己的 MaterialJalaliDateAdapter
。
你可以这样使用它:
{ provide: DateAdapter, useClass: MaterialJalaliDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: PERSIAN_DATE_FORMATS },
Angular2 Material 组件有一个以默认格式显示日期的 DatePicker。
并且只支持本地更改为"fa-IR"。
如何设置格式以显示波斯日期?
按照以下步骤显示伊朗日历:
- 从 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
以下步骤应该有所帮助:
1: 在module.ts:
中加载所有需要的模块import { MatDatepickerModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS,MAT_DATE_LOCALE} from '@angular/material/datepicker';
2:使用 NPM 安装 jalali-moment:
npm install jalali-moment
3: 在您的应用中导入 jalali 日期:
import * as moment from 'jalali-moment';
如果使用system.js,必须在system.config.js到运行app中声明
4: 写一个自定义的class来覆盖默认的日期格式机制
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
中编辑您的提供商部分,将添加的 class 引入您的应用程序:
@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 弹出正确显示日期,您必须将以下代码和方法添加到 ts 文件中,您将 datepicker 控件放到它的 html 文件或模板
添加以下方法来处理输入更改事件
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;
}
由于日期选择器显示的日期有问题,我不得不编辑 material.umd.js 来更正它。 地址:node_modules/@angular/material/bundles/material.umd.js 在 :10947 <==> 也可以搜索 "MatMonthView.prototype._createWeekCells =" 编辑函数的结束行如下
let displayValue = ariaLabel.split('/')[2];
this._weeks[this._weeks.length - 1]
.push(new MatCalendarCell(i + 1, Number(displayValue), ariaLabel, enabled));
我不推荐使用 jalali-moment
。 Check the bundle size。而且它不是 tree-shakable。
相反,我在 ng-bootstrap jalali and by replacing it with the jalali-moment
from this repo. The result code is big and is available in this repo 的基础上编写了自己的 MaterialJalaliDateAdapter
。
你可以这样使用它:
{ provide: DateAdapter, useClass: MaterialJalaliDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: PERSIAN_DATE_FORMATS },