Merge pull request #29 from alexbyk/for_origin

bug fixes, new features

.gitignore

@@ -2,3 +2,9 @@ aot
 node_modules
 npm-debug.log
 **/*.ngfactory.*
+**/*.js
+**/*.js.map
+**/*.json
+index.js
+index.js.map
+index.metadata.json

README.md

@@ -27,19 +27,21 @@ import { DatepickerModule as YourAlias } from 'angular2-material-datepicker'
 ```
 Call the component from within a template
 ```
-<material-datepicker></material-datepicker>
+<material-datepicker [(date)]="yourModelDate"></material-datepicker>
 ```
 and you're set!
 
 ### API
-The datepicker component can be called with no arguments. See the [Angular 2 Documentation](https://angular.io/docs/ts/latest/cookbook/component-communication.html) for how to communicate with child components. If you use an event emitter, the datepicker component has an emitter called `onSelect`.
+The datepicker component can be called with no arguments. See the [Angular 2 Documentation](https://angular.io/docs/ts/latest/cookbook/component-communication.html) for how to communicate with child components. If you use an event emitter, the datepicker component has an emitter called `onSelect` (when the date is picked), and `dateChange` (for two-way binding).
 
 Optional parameters are listed below.
 
 | Parameter | Type | Description |
 |---|---|---|
 | `accentColor` | string  | Replaces the default blue accent color  |
 |`altInputStyle` | boolean | If `true`, changes the input styling to primarily use the accent color |
+|`disabled` | boolean | If `true`, adds "disabled" attribute to input |
+|`placeholder` | string | This text will be shown if the date is empty |
 | `date` | Date | The source of truth for the selected date. If passed, the date will automatically be displayed in the input field and clicking on the input field will bring up the respective month. |
 | `dateFormat` | string | By default, the date will be shown in `YYYY-MM-DD` (ISO 8601 standard). Other formats include `MM-DD-YYYY` and `DD-MM-YYYY`. This string is *not* case sensitive. |
 | `fontFamily` | string | By default, the element will use `'Helvetica Neue', 'Helvetica', 'Arial', 'Calibri', 'Roboto'` in that order. Passing in this value will override these defaults.|

integration-test/app.component.ts

@@ -4,16 +4,37 @@ import { Component, Input } from '@angular/core';
   selector: 'my-app',
   template: `
       <material-datepicker
-        [date]="date"
-        dateFormat="mm-dd-yyyy"
+        [(date)]="date"
+        (onSelect)="onSelect($event)"
+        dateFormat="YYYY-MM-DD"
       ></material-datepicker>
+
+      <button (click)="setToday()">today</button>
+      <button (click)="clearDate()">reset</button>
+      <hr>
+      {{ date }}
+      <p>
+      Mirror(disabled, DD-MM-YYYY):
+      <material-datepicker
+        placeholder="nothing is selected"
+        disabled="true"
+        [(date)]="date"
+        dateFormat="DD-MM-YYYY"
+      ></material-datepicker>
+
     `
 })
 export class AppComponent {
-  @Input() date: Date;
+  date: Date;
+  disabled: boolean;
 
-  constructor() {
+  onSelect(date: Date) {
+    console.log("onSelect: ", date);
+  }
+  clearDate() {
+    this.date = null;
+  }
+  setToday() {
     this.date = new Date();
-    setTimeout(this.date = new Date(2016, 8), 3000);
   }
 }

integration-test/app.module.ts

@@ -1,13 +1,15 @@
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
 
 import { AppComponent }   from './app.component';
 import { DatepickerModule } from '../src/datepicker.module';
 
 @NgModule({
   imports: [
     BrowserModule,
-    DatepickerModule
+    DatepickerModule,
+    FormsModule,
   ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]

package.json

@@ -11,33 +11,25 @@
     "material"
   ],
   "devDependencies": {
-    "@angular/common": "~2.1.0",
-    "@angular/compiler": "~2.1.0",
-    "@angular/compiler-cli": "^2.1.0",
-    "@angular/core": "~2.1.0",
-    "@angular/forms": "~2.1.0",
-    "@angular/platform-browser": "~2.1.0",
-    "@angular/platform-browser-dynamic": "~2.1.0",
-    "@angular/platform-server": "~2.1.0",
-    "@angular/router": "~3.0.1",
+    "@angular/common": "~2.1.1",
+    "@angular/compiler": "~2.1.1",
+    "@angular/compiler-cli": "^2.1.1",
+    "@angular/core": "~2.1.1",
+    "@angular/forms": "~2.1.1",
+    "@angular/platform-browser": "~2.1.1",
+    "@angular/platform-browser-dynamic": "~2.1.1",
+    "@angular/platform-server": "~2.1.1",
     "@types/es6-shim": "^0.31.32",
     "calendar": "^0.1.0",
     "concurrently": "^3.0.0",
     "core-js": "^2.4.1",
     "es6-shim": "^0.35.1",
     "lite-server": "^2.2.2",
     "reflect-metadata": "^0.1.8",
-    "rxjs": "5.0.0-beta.12",
     "systemjs": "0.19.39",
     "typescript": "^2.0.3",
     "zone.js": "^0.6.25"
   },
-  "peerDependencies": {
-    "@angular/common": "~2.1.0",
-    "@angular/compiler": "~2.1.0",
-    "@angular/core": "~2.1.0",
-    "@angular/forms": "~2.1.0"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/koleary94/Angular-2-Datepicker"
@@ -48,5 +40,8 @@
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "ngc": "node_modules/.bin/ngc -p tsconfig-aot.json && rm integration-test/*.metadata.json"
+  },
+  "dependencies": {
+    "rxjs": "latest"
   }
 }