Update Angular Material

README.md

@@ -60,3 +60,5 @@ export class MyComponent {
 
 ### License
 MIT
+
+### Added validations and minor tweaks for use in custom app. Hosting this version for personal needs.

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "ng2-daterange-picker",
-  "version": "1.0.8",
-  "author": "Albert Nadal Garriga",
+  "name": "ng2-datepicker-et",
+  "version": "1.1.2",
+  "author": "Anthony Santiago",
   "license": "MIT",
   "keywords": [
     "angular2",
@@ -13,19 +13,18 @@
     "material"
   ],
   "devDependencies": {
-    "@angular/animations": "5.1.0",
-    "@angular/cdk": "5.0.0",
+    "@angular/animations": "^4.1.0",
+    "@angular/cdk": "2.0.0-beta.12",
     "@angular/cli": "1.6.0",
-    "@angular/common": "5.1.0",
-    "@angular/compiler": "5.1.0",
-    "@angular/compiler-cli": "5.1.0",
-    "@angular/core": "5.1.0",
-    "@angular/forms": "5.1.0",
-    "@angular/http": "5.1.0",
-    "@angular/material": "5.0.0",
-    "@angular/platform-browser": "5.1.0",
-    "@angular/platform-browser-dynamic": "5.1.0",
-    "@angular/router": "5.1.0",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.3.6",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/material": "2.0.0-beta.12",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
     "@types/core-js": "^0.9.43",
     "@types/jasmine": "^2.5.38",
     "concurrently": "^3.0.0",
@@ -48,7 +47,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/albertnadal/ng2-daterange-picker"
+    "url": "https://github.com/asantiago323/ng2-daterange-picker"
   },
   "scripts": {
     "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
@@ -60,7 +59,7 @@
     "ngc": "node_modules/.bin/ngc -p tsconfig-aot.json"
   },
   "dependencies": {
-    "@angular/material": "5.0.0",
+    "@angular/material": "2.0.0-beta.12",
     "moment": "^2.17.1",
     "rxjs": "^5.0.0"
   }

src/ang.daterange.picker.component.html

@@ -1,9 +1,11 @@
-<div class="ang-daterange-picker" style="z-index: 1000; min-height: 328px; position: relative; width: 810px;">
+<div class="ang-daterange-picker" style="z-index: 1000; left: -30em; min-height: 328px; position: relative; width: 810px;">
+
   <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%;">
         <tr>
-          <td>FROM</td>
+          <td>Start Date:</td>
         </tr>
         <tr>
           <td>
@@ -13,25 +15,29 @@
           </td>
         </tr>
         <tr>
-          <td>TO</td>
+          <td>End Date:</td>
         </tr>
         <tr>
           <td>
             <mat-form-field style="width:100%">
               <input matInput disabled value="" [(ngModel)]="endDateText">
+              <mat-hint *ngIf="this.error" style="color: red;">
+                The End Date can not come before the Start Date.
+              </mat-hint>
             </mat-form-field>
           </td>
         </tr>
       </table>
+      <br>
       <div style="bottom:0px;">
         <table style="width:100%">
           <tr>
             <td>
-              <button mat-button [disabled]="!startDateText || !endDateText" color="primary" (click)="onApplySelectedDateRange()">Apply
+              <button mat-raised-button [disabled]="!startDateText || !endDateText || endDate < startDate" color="primary" (click)="onApplySelectedDateRange()">Apply
               </button>
             </td>
             <td>
-              <button mat-button (click)="onCloseContextualMenu()">Cancel
+              <button mat-raised-button color="accent" (click)="onCloseContextualMenu()">Cancel
               </button>
             </td>
           </tr>

src/ang.daterange.picker.component.ts

@@ -14,6 +14,7 @@ export class DaterangePickerComponent implements OnInit {
   public startDateText: string = '';
   public endDateText: string = '';
   private selfComponentRef: ComponentRef<any>;
+  public error: Boolean;
 
   @Output() onCloseDaterangePicker: EventEmitter<any> = new EventEmitter<any>();
   @Output() onSelectedDaterange: EventEmitter<any> = new EventEmitter<any>();
@@ -29,14 +30,25 @@ export class DaterangePickerComponent implements OnInit {
 
   }
 
-  onSelectStartDate($event: any) {
+  onSelectStartDate($event) {
     this.startDate = $event.date;
     this.startDateText = $event.dateText;
+    this.checkDates();
   }
 
-  onSelectEndDate($event: any) {
+  onSelectEndDate($event) {
     this.endDate = $event.date;
     this.endDateText = $event.dateText;
+    this.checkDates();
+  }
+
+  checkDates() {
+    if (this.startDateText !== '' && this.endDate < this.startDate) {
+      // disables the Apply button and displays message
+      this.error = true;
+    } else {
+      this.error = false;
+    }
   }
 
   onApplySelectedDateRange() {

src/daterange.picker.module.ts

@@ -1,18 +1,23 @@
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
-import { NgModule } from '@angular/core';
-import { MatInputModule, MatCardModule, MatFormFieldModule, MatButtonModule } from '@angular/material';
+import { CommonModule } from "@angular/common";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { HttpModule } from "@angular/http";
+import { NgModule } from "@angular/core";
+import { SharedMaterialsModule } from "./shared-material.module";
 
+import { DaterangePickerComponent } from "./ang.daterange.picker.component";
+import { DatePickerComponent } from "./ang.datepicker.component";
 
-import { DaterangePickerComponent } from './ang.daterange.picker.component';
-import { DatePickerComponent } from './ang.datepicker.component';
-
-export * from './ang.daterange.picker.component';
+export * from "./ang.daterange.picker.component";
 
 @NgModule({
-  declarations: [ DaterangePickerComponent, DatePickerComponent ],
-  exports: [ DaterangePickerComponent ],
-  imports: [ CommonModule, FormsModule, HttpModule, ReactiveFormsModule, MatCardModule, MatInputModule, MatFormFieldModule, MatButtonModule ]
+  declarations: [DaterangePickerComponent, DatePickerComponent],
+  exports: [DaterangePickerComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    HttpModule,
+    ReactiveFormsModule,
+    SharedMaterialsModule
+  ]
 })
-export class DaterangePickerModule { }
+export class DaterangePickerModule {}

src/shared-material.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from "@angular/core";
+import {
+  MatButtonModule,
+  MatInputModule,
+  MatCardModule
+} from "@angular/material";
+
+const matModules = [MatButtonModule, MatInputModule, MatCardModule];
+
+@NgModule({
+  declarations: [],
+  exports: [...matModules],
+  imports: [...matModules]
+})
+export class SharedMaterialsModule {}