update material2

demo/main.ts

@@ -1,11 +1,11 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { AppModule } from './app.module';
+/*import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
-}
+}*/
 
 platformBrowserDynamic().bootstrapModule(AppModule);

package.json

@@ -13,16 +13,19 @@
     "material"
   ],
   "devDependencies": {
-    "@angular/common": "~2.2.1",
-    "@angular/compiler": "~2.2.1",
-    "@angular/compiler-cli": "~2.2.1",
-    "@angular/core": "~2.2.1",
-    "@angular/forms": "~2.2.1",
-    "@angular/material": "^2.0.0-beta.2",
-    "@angular/platform-browser": "~2.2.1",
-    "@angular/platform-browser-dynamic": "~2.2.1",
-    "@angular/platform-server": "~2.2.1",
-    "@types/es6-shim": "^0.31.32",
+    "@angular/animations": "~4.4.4",
+    "@angular/cdk": "~2.0.0-beta.11",
+    "@angular/common": "~4.4.4",
+    "@angular/compiler": "~4.4.4",
+    "@angular/compiler-cli": "~4.4.4",
+    "@angular/core": "~4.4.4",
+    "@angular/forms": "~4.4.4",
+    "@angular/http": "~4.4.4",
+    "@angular/material": "^2.0.0-beta.11",
+    "@angular/platform-browser": "~4.4.4",
+    "@angular/platform-browser-dynamic": "~4.4.4",
+    "@angular/platform-server": "~4.4.4",
+    "@types/core-js": "^0.9.43",
     "@types/jasmine": "^2.5.38",
     "concurrently": "^3.0.0",
     "core-js": "^2.4.1",
@@ -36,10 +39,11 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "lite-server": "^2.2.2",
     "reflect-metadata": "^0.1.8",
+    "rxjs": "^5.0.0",
     "systemjs": "0.19.39",
     "tslint": "^4.0.2",
     "typescript": "^2.0.10",
-    "zone.js": "^0.6.25"
+    "zone.js": "^0.8.4"
   },
   "repository": {
     "type": "git",
@@ -52,11 +56,11 @@
     "test": "tsc && karma start karma.conf.js",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
-    "ngc": "node_modules/.bin/ngc -p tsconfig-aot.json && rm integration-test/*.metadata.json"
+    "ngc": "node_modules/.bin/ngc -p tsconfig-aot.json"
   },
   "dependencies": {
-    "@angular/material": "^2.0.0-beta.2",
+    "@angular/material": "^2.0.0-beta.11",
     "moment": "^2.17.1",
-    "rxjs": "5.0.0-beta.12"
+    "rxjs": "^5.0.0"
   }
 }

src/ang.datepicker.component.ts

@@ -219,7 +219,7 @@ export class DatePickerComponent implements OnInit, OnChanges {
   }
 
   filterInvalidDays(calendarDays: Array<number>): Array<number> {
-    let newCalendarDays = [];
+    let newCalendarDays: any = [];
     calendarDays.forEach((day: number | Date) => {
       if (day === 0) {
         newCalendarDays.push(0)

src/ang.daterange.picker.component.html

@@ -1,6 +1,6 @@
 <div class="ang-daterange-picker" style="z-index: 1000; min-height: 328px; position: relative; width: 810px;">
 
-    <md-card style="width:100%;min-height:328px;padding-top:1px;">
+    <mat-card style="width:100%;min-height:328px;padding-top:1px;">
 
       <div style="position: absolute; width: 180px; height: 300px;">
         <table style="margin-top: 1.9em; width:100%;">
@@ -9,19 +9,19 @@
           </tr>
           <tr>
             <td>
-              <md-input-container style="width:100%">
+              <mat-input-container style="width:100%">
                 <input mdInput disabled value="" [(ngModel)]="startDateText">
-              </md-input-container>
+              </mat-input-container>
             </td>
           </tr>
           <tr>
             <td>TO</td>
           </tr>
           <tr>
             <td>
-              <md-input-container style="width:100%">
+              <mat-input-container style="width:100%">
                 <input mdInput disabled value="" [(ngModel)]="endDateText">
-              </md-input-container>
+              </mat-input-container>
             </td>
           </tr>
         </table>
@@ -59,6 +59,6 @@
         </ang-datepicker>
       </div>
 
-    </md-card>
+    </mat-card>
 
 </div>

src/ang.daterange.picker.component.ts

@@ -29,12 +29,12 @@ export class DaterangePickerComponent implements OnInit {
 
   }
 
-  onSelectStartDate($event) {
+  onSelectStartDate($event: any) {
     this.startDate = $event.date;
     this.startDateText = $event.dateText;
   }
 
-  onSelectEndDate($event) {
+  onSelectEndDate($event: any) {
     this.endDate = $event.date;
     this.endDateText = $event.dateText;
   }

src/daterange.picker.module.ts

@@ -1,7 +1,8 @@
 import { CommonModule }   from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
 import { NgModule } from '@angular/core';
-import { MaterialModule } from '@angular/material';
+import { MdInputModule, MdCardModule } from '@angular/material';
 
 import { DaterangePickerComponent } from './ang.daterange.picker.component';
 import { DatePickerComponent } from './ang.datepicker.component';
@@ -11,6 +12,6 @@ export * from './ang.daterange.picker.component';
 @NgModule({
   declarations: [ DaterangePickerComponent, DatePickerComponent ],
   exports: [ DaterangePickerComponent ],
-  imports: [ CommonModule, FormsModule, ReactiveFormsModule, MaterialModule ]
+  imports: [ CommonModule, FormsModule, HttpModule, ReactiveFormsModule, MdCardModule, MdInputModule ]
 })
 export class DaterangePickerModule { }

tsconfig-aot.json

@@ -9,12 +9,16 @@
     "removeComments": false,
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true,
-    "types": [ "es6-shim" ]
+    "types": [ "core-js" ],
+    "lib": ["es2015", "es2017", "dom"],
+    "typeRoots": [
+      "./node_modules/@types"
+    ]
   },
-
+  "exclude": [ "node_modules", "**/*.ngfactory.*" ],
   "files": [
-    "integration-test/app.module.ts",
-    "integration-test/main.ts"
+    "./src/daterange.picker.module.ts",
+    "./src/main.ts"
   ],
 
   "angularCompilerOptions": {