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

결국엔 사용하진 않았지만..

작년 이맘때쯤 일간/주간/월간 달력을 쓰는 하이브리드 앱을 만들어야 할 일이 생겨서 찾았던 date picker이다.

일간/주간/월간 달력 디자인이 같아야 통일성 있을 거 같아서 동시에 사용할 수 있는 달력을 찾기 위해 애먹은 기억이 난다.

외국 꺼라 설정을 해주지 않으면 우리가 일반적으로 쓰는 달력과는 달라져서 설정을 잘해줘야 한다.

하지만 어플 초기에 출장을 가는 바람에.. 

이미 ionic에서 기본으로 제공하는 달력을 사용하고 있어서 실무에서 직접 사용해보진 못했다.

 

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 #weekPicker
    dir="ltr"
    [(ngModel)]="weekObject"
    [config]="weekPickerConfig"
    mode="day" 
    placeholder="week"
    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('weekPicker') weekPicker: DatePickerComponent;
  datePipe = new DatePipe("en-US");
  today = new Date();

  todayString = this.datePipe.transform(this.today,'yyyy-MM-dd');
  
  weekObject = moment(this.datePipe.transform(this.today,'yyyy-MM-dd'), '');
  weekPickerConfig = {
    drops: 'down',
    format: 'YYYY-MM/DD~+6', 
    calendarSystem:ECalendarSystem.gregorian,
    monthFormat:"MMM, YY",
    weekDayFormat:"ddd",
    yearFormat:"YYYY",
    dayBtnFormat:"DD",
    monthBtnFormat:"MMM",
    disableKeypress:true,
    firstDayOfWeek:"su" 
  };
}

 

 

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

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