added drawer-like styles for mobile. also added an invisible layer that can be used to close the datepicker. useful in both mobile and desktop

Author: mmanneva

app/directive-test.component.ts

@@ -19,6 +19,7 @@ var templateStr = `
           [disabled-dates]="date2DisabledDates"
           [min-date]="date2MinDate"
           [max-date]="date2MaxDate"
+          [show-close-layer]="true"
           date-only="true"/>
         date2: {{date2}}
       </ng2-utils-2>

src/ng2-datetime-picker.component.ts

@@ -22,6 +22,7 @@ declare var moment: any;
   providers    : [Ng2Datetime],
   selector     : 'ng2-datetime-picker',
   template     : `
+<div class="closing-layer" (click)="close()" *ngIf="showCloseLayer" ></div>
 <div class="ng2-datetime-picker">
   <div class="close-button" *ngIf="showCloseButton" (click)="close()"></div>
   
@@ -106,7 +107,7 @@ declare var moment: any;
   `,
   styles       : [
     `
- @keyframes slideDown {
+@keyframes slideDown {
   0% {
     transform:  translateY(-10px);
   }
@@ -115,6 +116,15 @@ declare var moment: any;
   }
 }
 
+@keyframes slideUp {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
 .ng2-datetime-picker-wrapper {
   position: relative;
 }
@@ -156,7 +166,7 @@ declare var moment: any;
   background: transparent;
   border: none;
   cursor: pointer;
-  width: 15px;
+  width: 25px;
   text-align: center;
 }
 .ng2-datetime-picker > .month > .prev_next:hover {
@@ -235,6 +245,40 @@ declare var moment: any;
 .ng2-datetime-picker input[type=range] {
   width: 200px;
 }
+
+.closing-layer {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0,0,0,0);
+}
+
+@media (max-width: 767px) {
+  .ng2-datetime-picker {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;    
+    animation: slideUp 0.1s ease-in-out;
+  }
+
+  .ng2-datetime-picker .days {
+    margin: 10px auto;
+  }
+
+  .closing-layer {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0,0,0,0.2);
+  }
+}
   `
   ],
   encapsulation: ViewEncapsulation.None
@@ -254,6 +298,7 @@ export class Ng2DatetimePickerComponent {
   @Input('max-hour')          maxHour: number;
   @Input('disabled-dates')    disabledDates: Date[];
   @Input('show-close-button') showCloseButton: boolean;
+  @Input('show-close-layer')  showCloseLayer: boolean;
 
   @Output('selected$')  selected$:EventEmitter<any> = new EventEmitter();
   @Output('closing$')   closing$:EventEmitter<any> = new EventEmitter();
@@ -408,6 +453,7 @@ export class Ng2DatetimePickerComponent {
   }
 
   public close() {
+    console.log('töttöröö');
     this.closing$.emit(true);
   }
 }

src/ng2-datetime-picker.directive.ts

@@ -39,6 +39,7 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
   @Input('min-hour')          minHour: Date | number;
   @Input('max-hour')          maxHour: Date | number;
   @Input('disabled-dates')    disabledDates: Date[];
+  @Input('show-close-layer')  showCloseLayer: boolean;
   @Input() formControlName: string;
 
   @Input('ngModel')        ngModel: any;
@@ -243,6 +244,7 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
     component.maxHour        = <number>this.maxHour;
     component.disabledDates  = this.disabledDates;
     component.showCloseButton = this.closeOnSelect === "false";
+    component.showCloseLayer = this.showCloseLayer;
 
     this.styleDatetimePicker();
 
@@ -263,6 +265,7 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
   };
 
   hideDatetimePicker = (event?): any => {
+    console.log('what');
     if (this.clickedDatetimePicker) {
       return false;
     } else {  /* invoked by function call */