Skip to content
This repository was archived by the owner on Mar 2, 2018. It is now read-only.

Commit c285db0

Browse files
allenhwkimallenhwkim
committed
issue #133, close button
1 parent f8cbad2 commit c285db0

File tree

3 files changed

+92
-70
lines changed

3 files changed

+92
-70
lines changed

‎app/component-test.component.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ var templateStr = `
1111
<fieldset><legend><h2>Attributes and Events</h2></legend>
1212
<ng2-utils-1>
1313
<ng2-datetime-picker
14+
*ngIf="show !== false"
1415
date-format="DD-MM-YYYY hh:mm"
1516
[date-only]="false"
1617
[time-only]="false"
@@ -20,7 +21,9 @@ var templateStr = `
2021
[max-date]="maxDate"
2122
[min-hour]="9"
2223
[max-hour]="17"
24+
[show-close-button]="true"
2325
[disabled-dates]="disabledDates"
26+
(closing$)="show = false"
2427
(selected$)="selectedDate = $event">
2528
</ng2-datetime-picker>
2629
<br/> selected DateTime : {{ selectedDate || defaultValue }}

‎src/ng2-datetime-picker.component.ts‎

Lines changed: 78 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import {
66
ViewEncapsulation,
77
ChangeDetectorRef,
88
EventEmitter,
9-
ViewChild,
10-
AfterViewInit
9+
ViewChild
1110
} from '@angular/core';
1211
import {Ng2Datetime} from './ng2-datetime';
1312

@@ -24,7 +23,8 @@ declare var moment: any;
2423
selector : 'ng2-datetime-picker',
2524
template : `
2625
<div class="ng2-datetime-picker">
27-
26+
<div class="close-button" *ngIf="showCloseButton" (click)="close()">X</div>
27+
2828
<!-- Month - Year -->
2929
<div class="month" *ngIf="!timeOnly">
3030
<b class="prev_next prev" (click)="updateMonthData(-12)">&laquo;</b>
@@ -119,35 +119,43 @@ declare var moment: any;
119119
}
120120
121121
.ng2-datetime-picker {
122-
color: #333;
123-
outline-width: 0;
124-
font: normal 14px sans-serif;
125-
border: 1px solid #ddd;
126-
display: inline-block;
127-
background: #fff;
128-
animation: slideDown 0.1s ease-in-out;
129-
animation-fill-mode: both;
122+
color: #333;
123+
outline-width: 0;
124+
font: normal 14px sans-serif;
125+
border: 1px solid #ddd;
126+
display: inline-block;
127+
background: #fff;
128+
animation: slideDown 0.1s ease-in-out;
129+
animation-fill-mode: both;
130+
}
131+
.ng2-datetime-picker .close-button {
132+
position: absolute;
133+
padding: 0 5px;
134+
cursor: pointer;
135+
color: #ff0000;
136+
right: 0;
137+
z-index: 1;
130138
}
131139
.ng2-datetime-picker > .month {
132-
text-align: center;
133-
line-height: 22px;
134-
padding: 10px;
135-
background: #fcfcfc;
136-
text-transform: uppercase;
137-
font-weight: bold;
138-
border-bottom: 1px solid #ddd;
139-
position: relative;
140+
text-align: center;
141+
line-height: 22px;
142+
padding: 10px;
143+
background: #fcfcfc;
144+
text-transform: uppercase;
145+
font-weight: bold;
146+
border-bottom: 1px solid #ddd;
147+
position: relative;
140148
}
141149
.ng2-datetime-picker > .month > .prev_next {
142-
color: #555;
143-
display: block;
144-
font: normal 24px sans-serif;
145-
outline: none;
146-
background: transparent;
147-
border: none;
148-
cursor: pointer;
149-
width: 15px;
150-
text-align: center;
150+
color: #555;
151+
display: block;
152+
font: normal 24px sans-serif;
153+
outline: none;
154+
background: transparent;
155+
border: none;
156+
cursor: pointer;
157+
width: 15px;
158+
text-align: center;
151159
}
152160
.ng2-datetime-picker > .month > .prev_next:hover {
153161
background-color: #333;
@@ -160,64 +168,64 @@ declare var moment: any;
160168
float: right;
161169
}
162170
.ng2-datetime-picker > .days {
163-
width: 210px; /* 30 x 7 */
164-
margin: 10px;
165-
text-align: center;
171+
width: 210px; /* 30 x 7 */
172+
margin: 10px;
173+
text-align: center;
166174
}
167175
.ng2-datetime-picker > .days .day-of-week,
168176
.ng2-datetime-picker > .days .day {
169-
box-sizing: border-box;
170-
-moz-box-sizing: border-box;
171-
border: 1px solid transparent;
172-
width: 30px;
173-
line-height: 28px;
174-
float: left;
177+
box-sizing: border-box;
178+
-moz-box-sizing: border-box;
179+
border: 1px solid transparent;
180+
width: 30px;
181+
line-height: 28px;
182+
float: left;
175183
}
176184
.ng2-datetime-picker > .days .day-of-week {
177-
font-weight: bold;
185+
font-weight: bold;
178186
}
179187
.ng2-datetime-picker > .days .day-of-week.weekend {
180-
color: #ccc;
181-
background-color: inherit;
188+
color: #ccc;
189+
background-color: inherit;
182190
}
183191
.ng2-datetime-picker > .days .day:not(.selectable) {
184-
color: #ccc;
185-
cursor: default;
192+
color: #ccc;
193+
cursor: default;
186194
}
187195
.ng2-datetime-picker > .days .weekend {
188-
color: #ccc;
189-
background-color: #eee;
196+
color: #ccc;
197+
background-color: #eee;
190198
}
191199
.ng2-datetime-picker > .days .day.selectable {
192-
cursor: pointer;
200+
cursor: pointer;
193201
}
194202
.ng2-datetime-picker > .days .day.selected {
195-
background: gray;
196-
color: #fff;
203+
background: gray;
204+
color: #fff;
197205
}
198206
.ng2-datetime-picker > .days .day:not(.selected).selectable:hover {
199-
background: #eee;
207+
background: #eee;
200208
}
201209
.ng2-datetime-picker > .days:after {
202-
content: '';
203-
display: block;
204-
clear: left;
205-
height: 0;
210+
content: '';
211+
display: block;
212+
clear: left;
213+
height: 0;
206214
}
207215
.ng2-datetime-picker .hourLabel,
208216
.ng2-datetime-picker .minutesLabel {
209-
display: inline-block;
210-
width: 40px;
211-
text-align: right;
217+
display: inline-block;
218+
width: 40px;
219+
text-align: right;
212220
}
213221
.ng2-datetime-picker input[type=range] {
214-
width: 200px;
222+
width: 200px;
215223
}
216224
`
217225
],
218226
encapsulation: ViewEncapsulation.None
219227
})
220-
export class Ng2DatetimePickerComponent implements AfterViewInit {
228+
export class Ng2DatetimePickerComponent {
221229
@Input('date-format') dateFormat: string;
222230
@Input('date-only') dateOnly: boolean;
223231
@Input('time-only') timeOnly: boolean;
@@ -231,6 +239,7 @@ export class Ng2DatetimePickerComponent implements AfterViewInit {
231239
@Input('min-hour') minHour: number;
232240
@Input('max-hour') maxHour: number;
233241
@Input('disabled-dates') disabledDates: Date[];
242+
@Input('show-close-button') showCloseButton: boolean;
234243

235244
@Output('selected$') selected$:EventEmitter<any> = new EventEmitter();
236245
@Output('closing$') closing$:EventEmitter<any> = new EventEmitter();
@@ -250,15 +259,15 @@ export class Ng2DatetimePickerComponent implements AfterViewInit {
250259
this.el = elementRef.nativeElement;
251260
}
252261

253-
public ngAfterViewInit ():void {
254-
let stopPropagation = (e: Event) => e.stopPropagation();
255-
if (!this.dateOnly) {
256-
this.hours.nativeElement.addEventListener('keyup', stopPropagation);
257-
this.hours.nativeElement.addEventListener('mousedown', stopPropagation);
258-
this.minutes.nativeElement.addEventListener('keyup', stopPropagation);
259-
this.minutes.nativeElement.addEventListener('mousedown', stopPropagation);
260-
}
261-
}
262+
// public ngAfterViewInit ():void {
263+
// let stopPropagation = (e: Event) => e.stopPropagation();
264+
// if (!this.dateOnly) {
265+
// this.hours.nativeElement.addEventListener('keyup', stopPropagation);
266+
// this.hours.nativeElement.addEventListener('mousedown', stopPropagation);
267+
// this.minutes.nativeElement.addEventListener('keyup', stopPropagation);
268+
// this.minutes.nativeElement.addEventListener('mousedown', stopPropagation);
269+
// }
270+
// }
262271

263272
public get year ():number {
264273
return this.selectedDate.getFullYear();
@@ -353,7 +362,6 @@ export class Ng2DatetimePickerComponent implements AfterViewInit {
353362
return Ng2Datetime.formatDate(this.selectedDate, this.dateFormat, this.dateOnly);
354363
};
355364
this.selected$.emit(this.selectedDate);
356-
this.closing$.emit(true);
357365
};
358366

359367
/**
@@ -379,4 +387,7 @@ export class Ng2DatetimePickerComponent implements AfterViewInit {
379387
return false;
380388
}
381389

390+
public close() {
391+
this.closing$.emit(true);
392+
}
382393
}

‎src/ng2-datetime-picker.directive.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -224,8 +224,14 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
224224

225225
this.componentRef = this.viewContainerRef.createComponent(factory);
226226
this.ng2DatetimePickerEl = this.componentRef.location.nativeElement;
227-
this.ng2DatetimePickerEl.addEventListener('mousedown', (event) => this.clickedDatetimePicker = true);
228-
this.ng2DatetimePickerEl.addEventListener('mouseup', (event) => this.clickedDatetimePicker = false);
227+
this.ng2DatetimePickerEl.addEventListener('mousedown', (event) => {
228+
console.log('mouse down.............');
229+
this.clickedDatetimePicker = true
230+
});
231+
this.ng2DatetimePickerEl.addEventListener('mouseup', (event) => {
232+
console.log('mouse up.............');
233+
this.clickedDatetimePicker = false
234+
});
229235

230236
let component = this.componentRef.instance;
231237
component.defaultValue = <Date>this.defaultValue || <Date>this.el['dateValue'];
@@ -238,12 +244,13 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
238244
component.minHour = <number>this.minHour;
239245
component.maxHour = <number>this.maxHour;
240246
component.disabledDates = this.disabledDates;
247+
component.showCloseButton = this.closeOnSelect === "false";
241248

242249
this.styleDatetimePicker();
243250

244251
component.selected$.subscribe(this.dateSelected);
245252
component.closing$.subscribe(() => {
246-
this.closeOnSelect !== "false" && this.hideDatetimePicker();
253+
this.hideDatetimePicker();
247254
});
248255

249256
//Hack not to fire tab keyup event
@@ -254,6 +261,7 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
254261
dateSelected = (date) => {
255262
this.el.tagName === 'INPUT' && this.inputElValueChanged(date);
256263
this.valueChanged.emit(date);
264+
this.closeOnSelect !== "false" && this.hideDatetimePicker();
257265
};
258266

259267
hideDatetimePicker = (event?): any => {

0 commit comments

Comments
 (0)