CODEWITHSUNDEEP
angulardatepickerangular5persian
Afshin Razaghi
Afshin Razaghi

Reputation: 450

Material component persian datepicker in angular 2

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?

Upvotes: 9

Views: 8042

Answers (3)

Vahid
Vahid

Reputation: 7561

I don't recommend using jalali-moment. Check the bundle size. Also it's not tree-shakable.

Instead I've written my own MaterialJalaliDateAdapter based on 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.

You can use it like this:

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

Upvotes: 0

Afshin
Afshin

Reputation: 224

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/datepicker';

2: install jalali-moment using NPM:

 npm install jalali-moment

3: import jalali date in 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 method 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));

Upvotes: 20

Chandrahasan
Chandrahasan

Reputation: 2079

Follow below to steps to show Iranian Calendar:

  1. Download from npm: npm install ng2-jalali-date-picker --save
  2. 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:
  3. 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

Upvotes: 1

Related Questions