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

  todayString = this.datePipe.transform(this.today,'yyyy-MM-dd');
  
  dayObject = moment(this.datePipe.transform(this.today,'yyyy-MM-dd'), '');
  dayPickerConfig = {
    drops: 'down',
    format: 'YYYY-MM/DD', 
    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/