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설명:
짧은 이름의 요일명(일/월/화/수/목/금/토)이 화면상에 너무 왼쪽에 붙고   가 적용되지 않아 앞에 눈에 보이지 않는 특수문자를 넣어주었다. (ㄱ => 한자 => 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;
}
적용된 결과는 아래 모습과 같다.
