[하이브리드앱 ionic]시작해보기 14 - 달력에서 선택하는 datepicker, 시작일과 종료일 설정하기

아이오닉 기본 컴포넌트로 ion-datetime 가 있지만

아래와 같이 달력이 아닌 select 형태로 선택하게 되어있어서

datepicker를 이용해서 달력을 만들어보자

 

 

달력에서 시작일과 종료일을 선택해 기간을 저장하도록 하는 달력을 만들고자 한다. 

 

 

 

npm install ion2-calendar moment --save 을 통해 ion2-calendar 를 설치한다.

 

ion2-calendar는 총 3가지의 형태로 날짜선택을 할수있다.

- 기본형(단일날짜선택)

- 멀티선택(다중날짜선택)

- 범위선택(시작일과 종료일 설정)

 

 

그중에서 시작일과 종료일을 설정할수 있도록 하려고 한다.

 

 

 

module.ts

.
.
.
import { CalendarModule } from "ion2-calendar";

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

ion2-calendar를 import 한다

 

 

 

page.html

<ion-calendar [(ngModel)]="dateRange"
              [options]="optionsRange"
              [type]="type"
              [format]="'YYYY-MM-DD'">
</ion-calendar>

달력을 둘 위치에 ion-calender를 위치해준다.

선택한 데이터를 저장할 dateRange

해당옵션을줄 optionsRange

값의 형식 type

날짜형식 format 

 

 

 

page.ts

.
.
.
import { CalendarComponentOptions } from 'ion2-calendar'

@Component({
  .
  .
  .
})
export class ...Page {
  dateRange: { from: string; to: string; };
  type: 'string'; // 'string' | 'js-date' | 'moment' | 'time' | 'object'
  optionsRange: CalendarComponentOptions = {
    pickMode: 'range'
  };
  constructor() { }
  .
  .
  .
}

저장할 데이터는 from과 to 로 나누어 저장하고

type은 string으로 저장한다.

option은 

pickMode : 'range' // 범위선택으로 지정한다.

 

 

 

 

 

이렇게만 하면 오늘날짜부터 선택이 가능한 캘린더가 생성된다 .

 

 

 

옵션지정

 

 

선택할수 있는 날짜의 범위를 지정해주고 싶다면 

 

 dateRange: { from: string; to: string; };
  type: 'string'; // 'string' | 'js-date' | 'moment' | 'time' | 'object'
  optionsRange: CalendarComponentOptions = {
    pickMode: 'range',
    from: new Date(2017, 0, 1),
    to: new Date(2033, 0, 1)
  };

from / to 옵션을 이용해 선택가능한 날짜의 범위를 지정한다. 

 

 

공휴일을 설정해주고 싶다면 옵션에서 daysConfig 로 지정

요일의 이름을 바꾸고 싶다면 weekdays 를 이용한다

 

optionsRange: CalendarComponentOptions = {
    pickMode: 'range',
    weekdays: ['일', '월', '화', '수', '목', '금', '토'],
    from: new Date(2017, 0, 1),
    daysConfig: this.holiday,
  };

 holiday:any =  [
      {
        date: new Date(2019, 7, 15),
        subTitle: '공휴일',
        marked:true
      },{
        date: new Date(2019, 6, 15),
        subTitle: '공휴일',
        marked:true
      }
  ];

 

 

 

 

 

 

 

 

---

 

 

결과값 가져오기 

 

선택한 데이터의 결과를 보기위해 종료일을 선택하면 dateRange의 값을 찍도록 이벤트를 등록해보자 

<ion-calendar [(ngModel)]="dateRange"
              [options]="optionsRange"
              [type]="type"
              [format]="'YYYY-MM-DD'" (selectEnd)="selectfun($event)">
</ion-calendar>

selectEnd 이벤트를 동록해 selectfun 함수가 동작하도록 했다.

 

selectfun($event){
    console.log(this.dateRange)
  }

위의 결과는 

위와 같아서 보기 편하게 년월일을 설정하고 로그로 다시 찍어보면 

let fromy = this.dateRange.from._d.getFullYear();
let fromm = this.dateRange.from._d.getMonth()+1;
let fromd = this.dateRange.from._d.getDate();
let toy = this.dateRange.to._d.getFullYear();
let tom = this.dateRange.to._d.getMonth()+1;
let tod = this.dateRange.to._d.getDate();

console.log(fromy+'.'+fromm+'.'+fromd);
console.log(toy+'.'+tom+'.'+tod);

 

 

 

 

 

 

 

 

 

 

---

 

위와 같은 결과를 얻을 수 있다. 근데 이렇게 하다보면 _d에서 오류가 날때가 있음 그래서 다른방법으로는 

 

시작일 선택할때랑 종료일 선택할때 이벤트를 등록함

  <ion-calendar [(ngModel)]="dateRange"
              [options]="optionsRange"
              [type]="type"
              [format]="'YYYY-MM-DD'" (selectStart)="selectStartDate($event)" (selectEnd)="selectEndDate($event)">
</ion-calendar>

selectStartDate($event){
    this.startday = new Date($event.time);
  }

  selectEndDate($event){
    this.endday = new Date($event.time);
  }

선택한 날짜를 date로 저장하면 아래와 같이 잘 저장됨

 

 

 

이값은 위에서 사용했던 getFullYear / getMomth / getDate를 사용하면 원하는 결과를 얻을 수 있다.

또는 new Date($event.time).toDateString(); 으로 날짜를 가져옴 . 

 

 

 

 

 

 

참고

https://github.com/hsuanxyz/ion2-calendar

hsuanxyz/ion2-calendar