Merge branch 'master' of https://github.com/ng2-ui/ng2-datetime-picker

Author: mmanneva

ISSUE_TEMPLATE.md

@@ -4,8 +4,8 @@ _Please be specific with an example. An issue with no example or unclear require
 **Steps to reproduce and a minimal demo**
 
   - _What steps should we try in your demo to see the problem?_
-  - _Plunker example_
-  - _If you cannot reproduce an issue with a plunker example, it's your environmental issue_
+  - _Plunker example(required), MCVE(Minimal/Complete/Verifable Example)_ 
+  - _If you cannot reproduce an issue with a plunker example, it may be your environmental issue_
 
 **Current behavior**
 

README.md

@@ -71,7 +71,7 @@ AngularJS 2 DateTime Picker
           day="31"
           hour="23"
           minute='59'
-          close-on-select="false"  />
+          [close-on-select]="false"  />
 
 For full example, please check `test` directory to see the example of;
 
@@ -139,6 +139,7 @@ is the list of variables that you can override.
   * **months**:          default: January, February
   * **formatDate**:      default: returns YYYY-MM-DD HH:MM
   * **parseDate**:       default: returns date from YYYY-MM-DD HH:MM
+  * **locale**:          default: 'date', 'year', 'month', time', 'hour', 'minute'
 
 ## **ng2-ui** welcomes new members and contributors
 

app/build/app.js

@@ -22,6 +22,7 @@ var templateStr = `
           [show-close-layer]="true"
           date-only="true"/>
         date2: {{date2}}
+        <button id="set-date" (click)="date2 = date2New">Set 2017-12-31</button>
       </ng2-utils-2>
       <pre>{{templateStr | htmlCode:'ng2-utils-2'}}</pre>
     </fieldset>
@@ -33,7 +34,8 @@ var templateStr = `
           date-format="DD-MM-YYYY hh:mm"
           time-only="true"
           minute-step="5"
-          close-on-select="false" />
+          (popupClosed)="onDatetimePickerClosed()"
+          [close-on-select]="false" />
       </ng2-utils-4>
       <pre>{{templateStr | htmlCode:'ng2-utils-4'}}</pre>
     </fieldset>
@@ -57,7 +59,7 @@ var templateStr = `
               required
               formControlName="date" 
               ng2-datetime-picker
-              close-on-select="false"/>
+              [close-on-select]="false"/>
         </form>
         myForm.controls.date.value: {{myForm.controls.date.value}}
         <br/>myForm.value: {{myForm.value | json}}
@@ -79,7 +81,21 @@ var templateStr = `
       </ng2-utils-3>
       <pre>{{templateStr | htmlCode:'ng2-utils-3'}}</pre>
     </fieldset>
-    
+
+    <fieldset id="test6">
+      <legend><h2>Material Design</h2></legend>
+      <ng2-utils-4>
+        <md-input-container>
+          <input mdInput 
+            [(ngModel)]="mdDate"
+            name="mdDate"
+            ng2-datetime-picker
+            date-only="true" 
+            [close-on-select]="false" />
+        </md-input-container>
+      </ng2-utils-4>
+    </fieldset>
+
   </div>
 `;
 
@@ -99,13 +115,12 @@ export class DirectiveTestComponent {
   templateStr: string = templateStr;
 
   myForm: FormGroup; // our form model
-  date1 = null;
-  date1DefaultValue = new Date(2014, 11, 31, 21, 45, 59);
 
   date2 = new Date(2017, 0, 28);
   date2DisabledDates = [new Date(2017, 0, 10), new Date(2017, 0, 20)];
   date2MinDate = new Date(2017, 0, 1);
   date2MaxDate = new Date(2017, 11, 31);
+  date2New = new Date(2017,11,31);
 
   date3 = new Date("Thu Jan 01 2015 00:00:00 GMT-0500 (EST)");
 
@@ -114,6 +129,8 @@ export class DirectiveTestComponent {
     Ng2Datetime.parseDate('2017-01-15T14:22:00-06:00', this.date4TimezoneFormat), this.date4TimezoneFormat
   );
 
+  mdDate: Date = new Date(2017, 0, 28);
+
   constructor(private fb: FormBuilder) { }
 
   ngOnInit() {
@@ -124,4 +141,7 @@ export class DirectiveTestComponent {
     //moment.tz.setDefault('US/Central'); // Set the default timezone that moment will use
   }
 
+  onDatetimePickerClosed() {
+    console.log('datetime picker is closed');
+  }
 }

app/build/app.js.map

@@ -2,6 +2,7 @@
 import 'core-js/es6';
 import 'core-js/es7/reflect';
 import 'zone.js/dist/zone';
+import 'hammerjs';
 
 // The browser platform with a compiler
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -10,6 +11,7 @@ import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule, ReactiveFormsModule }    from "@angular/forms";
 import { LocationStrategy, HashLocationStrategy } from "@angular/common";
+import { MaterialModule } from '@angular/material';
 
 import { AppComponent }   from './app.component';
 
@@ -20,7 +22,15 @@ import { Ng2UtilsModule } from 'ng2-utils';
 import { APP_ROUTER_PROVIDERS, APP_ROUTER_COMPONENTS } from './app.route';
 
 @NgModule({
-  imports: [BrowserModule, APP_ROUTER_PROVIDERS, FormsModule, ReactiveFormsModule, Ng2UtilsModule, Ng2DatetimePickerModule],
+  imports: [
+    BrowserModule, 
+    APP_ROUTER_PROVIDERS,
+    FormsModule,
+    ReactiveFormsModule,
+    Ng2UtilsModule, 
+    Ng2DatetimePickerModule,
+    MaterialModule
+  ],
   declarations: [AppComponent, APP_ROUTER_COMPONENTS],
   providers: [
     { provide: LocationStrategy, useClass: HashLocationStrategy },

app/directive-test.component.ts

@@ -20,17 +20,20 @@ export declare class Ng2DatetimePickerComponent {
     maxHour: number;
     disabledDates: Date[];
     showCloseButton: boolean;
+    showCloseLayer: boolean;
     selected$: EventEmitter<any>;
     closing$: EventEmitter<any>;
     hours: ElementRef;
     minutes: ElementRef;
     el: HTMLElement;
-    monthData: any;
     disabledDatesInTime: number[];
+    locale: any;
+    private _monthData;
     constructor(elementRef: ElementRef, ng2Datetime: Ng2Datetime, cdRef: ChangeDetectorRef);
     year: number;
     month: number;
     day: number;
+    readonly monthData: any;
     today: Date;
     isWeekend(dayNum: number, month?: number): boolean;
     ngOnInit(): void;