소개

Mobiscroll을 새로 설치하면 베타 버전의 Version4가 다운로드됩니다. (2017/12/16 현재)

Ionic/Angular를 확장하는 웹 컴포넌트 mobiscroll

V3 시대의 과거 프로젝트 코드를 그대로 V4로 움직이려고 했는데,
에러가 대량으로 나와 버려, 최소한입니다만, V4에서의 변경점을 확인했습니다.

Version4 신규 도입의 방법

npm install -g @mobiscroll/cli
mobiscroll config ionic

이미 라이선스가 구매된 경우 아래 명령을 사용하여 정품 인증이 완료됩니다.

npm login --registry=https://npm.mobiscroll.com --scope=@mobiscroll

위 명령을 입력한 후,

Username:
Password:
Email:

를 확인하고 있으므로 모든 것을 입력하면 인증이 완료됩니다.

Version4에서는 사용자 지정 태그로 구성 요소를 사용할 수 있습니다.

Version3에서는 HTML5 표준 요소에 대한 속성으로 구성 요소가 작동했지만,
Version4에서는, 완전한 웹 컴퍼넌트로서 커스텀 태그 구현이 되어 왔습니다.

home.html#Version3.x

<input mbsc-numpad-decimal [options]="myOptions" [(ngModel)]="birthday">

home.html#Version4.x

<mbsc-numpad-time [options]="myOptions" [(ngModel)]="birthday"></mbsc-numpad-time>

TS의 설명은 변경되지 않습니다.

home.ts

import { Component } from '@angular/core';
import { MbscDatetimeOptions } from '@mobiscroll/angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor() {}

  birthday : null;
  myOptions: MbscDatetimeOptions = {
    display: 'center',
    timeFormat:'hh:ii'
  };
}

Numpad - Mobiscroll 4 API Documentation - Mobiscroll for Angular

다음은 날짜 선택 UI.

<mbsc-date [(ngModel)]="birthday" [options]="mbscDateOptions"></mbsc-date>

/**
 * MobileScroll Date オプション
 */
mbscDateOptions: MbscDatetimeOptions = {
  display: "center",
  lang: 'ja',
  animate: 'fade',
  dateFormat: 'yy/m/d(D)',
  buttons: [
    'cancel',
    { handler: "set", text: "反映する" }
  ]
};

Date & Time - Mobiscroll 4 API Documentation - Mobiscroll for Angular

편리!