달력

5

« 2024/5 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

'월간 달력'에 해당되는 글 1

  1. 2019.01.08 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/

 

 

반응형
:
Posted by 리샤씨


반응형
반응형