ionic2, Angular에서 월간 달력 쓰는 법

1. npm을 사용하여 ng2-jalali-date-picker를 설치한다.

$ npm install ng2-jalali-date-picker --save

 

 

2. app.module.ts에서 ng2-jalali-date-picker module을 import 한다.

import { DpDatePickerModule } from 'ng2-jalali-date-picker';

@NgModule({
   .....
  imports: [
     .....
     DpDatePickerModule
  ]
})

3. html 파일을 작성한다.

<ion-content padding>
  <dp-date-picker #monthPicker
    dir="ltr"
    [(ngModel)]="monthObject"
    [config]="monthPickerConfig"
    mode="month"
    placeholder="month"
    theme="dp-material">
  </dp-date-picker>
</ion-content>

4. ts 파일을 작성한다.

import { Component, ViewChild } from '@angular/core';
import * as moment from 'jalali-moment';
import { DatePipe } from '@angular/common'; 
import { ECalendarSystem, DatePickerComponent } from 'ng2-jalali-date-picker';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('monthPicker') monthPicker: DatePickerComponent;
  datePipe = new DatePipe("en-US");
  today = new Date();

  todayString = this.datePipe.transform(this.today,'yyyy-MM-dd');
  
  monthObject = moment(this.datePipe.transform(this.today,'yyyy-MM'),'');
  monthPickerConfig = {
    drops: 'down',
    format: 'YYYY-MM',
    calendarSystem:ECalendarSystem.gregorian,
    yearFormat:"YYYY",
    monthBtnFormat:"MM",
    disableKeypress:true
  };
}

 

 

참고 : https://www.npmjs.com/package/ng2-jalali-date-picker

https://fingerpich.github.io/jalali-angular-datepicker/