[Angular 2+][DateTimePicker] ng-pick-datetime 컴포넌트 적용

Angular 초보가 Angular 4 에 DateTimePicker 컴포넌트를 붙이면서 공식문서만 보고 하려니 삽질이 하늘을 찔렀다.

모듈명: ng-pick-datetime
링크: https://danielykpan.github.io/date-time-picker/


JHipster(Angular+SpringBoot) v4.8.0 에 해당 컴포넌트를 아래와 같이 연동했다.
(같은 디자인의 DateTimePicker 가 여러곳에서 사용이 되기에 데이터 양방향 바인딩 가능한 WrapperComponent를 만들었다.)
1004lucifer

[package.json]

"dependencies": {
 "@angular/animations": "4.3.2",
 "@angular/common": "4.3.2",
 "@angular/compiler": "4.3.2",
 "@angular/core": "4.3.2",
 "@angular/forms": "4.3.2",
 "@angular/http": "4.3.2",
 "@angular/platform-browser": "4.3.2",
 "@angular/platform-browser-dynamic": "4.3.2",
 "@angular/router": "4.3.2",
 "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.1",
 "bootstrap": "4.0.0-beta",
 "core-js": "2.4.1",
 "font-awesome": "4.7.0",
 "jquery": "3.2.1",
 "ng-jhipster": "0.2.12",
 "ng-pick-datetime": "5.0.0-beta.6",
 "ng2-webstorage": "1.8.0",
 "ngx-cookie": "1.0.0",
 "ngx-infinite-scroll": "0.5.1",
 "reflect-metadata": "0.1.10",
 "rxjs": "5.4.2",
 "swagger-ui": "2.2.10",
 "tether": "1.4.0",
 "zone.js": "0.8.16"
},

PS. 작성 후 'npm install' 이나 'yarn install' 명령어를 통해 해당 패키지를 설치한다.





[vendor.css] node_module CSS가 들어가는 파일

/* after changing this file run 'yarn run webpack:build' */
/*@import '~bootstrap/dist/css/bootstrap.min.css';*/
@import '~ng-pick-datetime/assets/style/picker.min.css';
@import '~font-awesome/css/font-awesome.css';

1004lucifer

[datetimepicker.module.ts] (이름을 custom-datetimepicker.~ 형식으로 바꿀껄 그랬나..)

import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import {DateTimePickerModule} from 'ng-pick-datetime';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {CustomDateTimePickerComponent} from './datetimepicker.component';
import {FormsModule} from '@angular/forms';

@NgModule({
    imports: [
        FormsModule,
        DateTimePickerModule,
        BrowserAnimationsModule
    ],
    declarations: [CustomDateTimePickerComponent],
    exports: [CustomDateTimePickerComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class CustomDatetimepickerModule {
}

[datetimepicker.component.ts]

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';

@Component({
    selector: 'jhi-datetimepicker',
    templateUrl: './datetimepicker.component.html',
    styles: []
})
export class CustomDateTimePickerComponent implements OnInit {

    componentDatetime: Date;
    dateFormat = 'YYYY-MM-DD HH:mm';

    ko = {
        firstDayOfWeek: 0,
        dayNames: [ '일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일' ],
        dayNamesShort: [ '　일', '　월', '　화', '　수', '　목', '　금', '　토' ],
        monthNames: [ '1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월' ],
        monthNamesShort: [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12' ]
    };

    @Input()
    get datetime() {
        return this.componentDatetime;
    }
    set datetime(value) {
        this.componentDatetime = value;
        this.datetimeChange.emit(this.componentDatetime);
    }
    @Output() datetimeChange = new EventEmitter();

    constructor() {
    }

    ngOnInit() {
    }
}

1004lucifer
설명:
짧은 이름의 요일명(일/월/화/수/목/금/토)이 화면상에 너무 왼쪽에 붙고 &nbsp 가 적용되지 않아 앞에 눈에 보이지 않는 특수문자를 넣어주었다. (ㄱ => 한자 => 1번)





[datetimepicker.component.html]

<owl-date-time
    [(ngModel)]="datetime"
    [locale]="ko"
    [dateFormat]="dateFormat"
    [placeHolder]="''"
></owl-date-time>

[적용.module.ts]

@NgModule({
    imports: [
        CustomDatetimepickerModule,
  ...
    ],
    declarations: [...],
 ...
})
export class UseModule {
}

[적용.component.ts]

@Component({
    ...
})
export class UseComponent implements OnInit {

    public startDateTime: Date;

    constructor() {
    }

    ngOnInit() {
    }

}

[적용.component.html]

<div>
<jhi-datetimepicker [(datetime)]="startDateTime"></jhi-datetimepicker>
</div>

PS.
적용한 컴포넌트가 기본적으로 상위의 CSS를 상속받아 Demo 와는 스타일이 약간 변경되었는데 시/분 입력란이 왼쪽으로 치우져처 있어서 아래와 같이 CSS 속성을 추가했다.
1004lucifer
[global.css] 전체 페이지에 적용되는 CSS

.owl-timer-wrapper .owl-timer-input {
    text-align: center;
}

적용된 결과는 아래 모습과 같다.