[ Angular2 Tips ] jquery-datetimepicker 를 사용해보자.

angular2 datetimepicker 를 검색해보면

등 여러가지 모듈을 찾을 수 있다. 링크된 페이지에 설명된 대로 설정하면 Angular2에서 쉽게 사용할 수 있지만, 왠지 부족하게 느껴진다. 디자인이나 사용성이 내가 원하는 것과는 거리가 있다.

jquery datetimepicker 가 사용성이 가장 좋다고 생각했는데, 이건 angular2 에서 바로 npm install, import 해서 사용할 수 있게 만들어져있지가 않다. angular cli 에서 이 플러그인을 사용하는 방법을 알아보자.

프로젝트 생성

일단, 테스트를 위한 프로젝트를 생성한다. 폴더이름은 picker-test 이다.

$ ng new picker-test
$ cd picker-test

PickerComponent 를 생성한다.

$ ng generate component picker --flat -is -it
또는
$ ng g c picker --flat -is -it

AppComponent 에 PickerComponet 를 삽입해준다.

app.component.html

<h1>
  {{title}}
</h1>
<app-picker></app-picker>

 

jquery-datetimepicker  설치

jquery 와 jquery-datetimepicker 를 설치해준다.

$ npm install jquery jquery-datetimepicker --save

이것으로 끝나면 좋겠는데, 그렇지가 않다. 프로젝트 폴더 안에있는 .angular-cli.json 의 styles와 scripts 항목에 이 플러그인의 css 와 js 파일을 등록해주어야한다.

. angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "picker"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "../node_modules/jquery-datetimepicker/jquery.datetimepicker.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/jquery-datetimepicker/build/jquery.datetimepicker.full.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

 

Date time picker  작동시켜보기

PickerComponent 에 date input field 를 만들어서 플러그인을 적용해보자.

picker.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

declare var jQuery;

@Component({
  selector: 'app-picker',
  template: `
    <input type="text" #date>
  `,
  styles: []
})
export class PickerComponent implements OnInit {
  @ViewChild('date') element: ElementRef;
  
  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit(){
    console.log(this.element);
    jQuery(this.element.nativeElement).datetimepicker();
  }

}

 

Validation 은 FormControl 의 기능을 활용하면 되는데, 직접 만들어쓰려면 다음 블로그글을 참고하면 도움이 될 것이다.

Angular2 Material 을 사용하면 이런 문제를 고민하지 않아도 된다. Angular 2 를 위해 만들어진 레디메이드 UI 가 준비되어있으니 말이다. 하지만, 아직 alpha 버전이다. 참고하기 바란다.

 

댓글 남기기