Merge pull request #23 from koleary94/date-format

Add dateFormat api binding
kevinoleary19 · Oct 11, 2016 · 0af0dc1 · 0af0dc1
2 parents a594854 + 33bee46
commit 0af0dc1
Show file tree

Hide file tree

Showing 24 changed files with 271 additions and 40 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,4 @@
-app
+aot
 node_modules
-index.html
-systemjs.config.js
+npm-debug.log
 **/*.ngfactory.*
diff --git a/.npmignore b/.npmignore
@@ -1,5 +1,7 @@
+aot
 app
-node_modules
 index.html
+node_modules
+npm-debug.log
 systemjs.config.js
 **/*.ngfactory.*
diff --git a/README.md b/README.md
@@ -41,6 +41,7 @@ Optional parameters are listed below.
 | `accentColor` | string  | Replaces the default blue accent color  |
 |`altInputStyle` | boolean | If `true`, changes the input styling to primarily use the accent color |
 | `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.|
 | `rangeStart` | Date | The beginning boundary for selecting a date. For example, passing in `new Date(2015,2)` will prevent the user from being able to get to February 2015. |
 | `rangeEnd` | Date | Same as `rangeStart`, but for the end boundary. e.g. passing in `new Date()` will prevent the user from being able to get to the next month. |

diff --git a/index.html b/index.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>Angular 2 Datepicker</title>
+    <title>Angular QuickStart</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- 1. Load libraries -->

diff --git a/integration-test/app.component.js b/integration-test/app.component.js
diff --git a/integration-test/app.component.js.map b/integration-test/app.component.js.map
diff --git a/integration-test/app.component.ts b/integration-test/app.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+      <material-datepicker
+        [date]="date"
+        dateFormat="mm-dd-yyyy"
+      ></material-datepicker>
+    `
+})
+export class AppComponent {
+  @Input() date: Date;
+
+  constructor() {
+    this.date = new Date();
+    setTimeout(this.date = new Date(2016, 8), 3000);
+  }
+}
diff --git a/integration-test/app.module.js b/integration-test/app.module.js
diff --git a/integration-test/app.module.js.map b/integration-test/app.module.js.map
diff --git a/integration-test/app.module.ts b/integration-test/app.module.ts
@@ -0,0 +1,15 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent }   from './app.component';
+import { DatepickerModule } from '../src/datepicker.module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    DatepickerModule
+  ],
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }
diff --git a/integration-test/main.js b/integration-test/main.js
diff --git a/integration-test/main.js.map b/integration-test/main.js.map
diff --git a/integration-test/main.ts b/integration-test/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+const platform = platformBrowserDynamic();
+
+platform.bootstrapModule(AppModule);
diff --git a/npm-debug.log b/npm-debug.log
@@ -0,0 +1,44 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/Users/kevinoleary/.nvm/versions/node/v5.0.0/bin/node',
+1 verbose cli   '/Users/kevinoleary/.nvm/versions/node/v5.0.0/bin/npm',
+1 verbose cli   'start' ]
+2 info using [email protected]
+3 info using [email protected]
+4 verbose run-script [ 'prestart', 'start', 'poststart' ]
+5 info lifecycle [email protected]~prestart: [email protected]
+6 silly lifecycle [email protected]~prestart: no script for prestart, continuing
+7 info lifecycle [email protected]~start: [email protected]
+8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
+9 verbose lifecycle [email protected]~start: PATH: /Users/kevinoleary/.nvm/versions/node/v5.0.0/lib/node_modules/npm/bin/node-gyp-bin:/Users/kevinoleary/Coding/Angular-2-Datepicker/node_modules/.bin:/Users/kevinoleary/.nvm/versions/node/v5.0.0/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/opt/X11/bin:/usr/local/git/bin
+10 verbose lifecycle [email protected]~start: CWD: /Users/kevinoleary/Coding/Angular-2-Datepicker
+11 silly lifecycle [email protected]~start: Args: [ '-c', 'tsc && concurrently "tsc -w" "lite-server" ' ]
+12 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
+13 info lifecycle [email protected]~start: Failed to exec start script
+14 verbose stack Error: [email protected] start: `tsc && concurrently "tsc -w" "lite-server" `
+14 verbose stack Exit status 1
+14 verbose stack     at EventEmitter.<anonymous> (/Users/kevinoleary/.nvm/versions/node/v5.0.0/lib/node_modules/npm/lib/utils/lifecycle.js:233:16)
+14 verbose stack     at emitTwo (events.js:87:13)
+14 verbose stack     at EventEmitter.emit (events.js:172:7)
+14 verbose stack     at ChildProcess.<anonymous> (/Users/kevinoleary/.nvm/versions/node/v5.0.0/lib/node_modules/npm/lib/utils/spawn.js:24:14)
+14 verbose stack     at emitTwo (events.js:87:13)
+14 verbose stack     at ChildProcess.emit (events.js:172:7)
+14 verbose stack     at maybeClose (internal/child_process.js:818:16)
+14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
+15 verbose pkgid [email protected]
+16 verbose cwd /Users/kevinoleary/Coding/Angular-2-Datepicker
+17 error Darwin 14.4.0
+18 error argv "/Users/kevinoleary/.nvm/versions/node/v5.0.0/bin/node" "/Users/kevinoleary/.nvm/versions/node/v5.0.0/bin/npm" "start"
+19 error node v5.0.0
+20 error npm  v3.3.6
+21 error code ELIFECYCLE
+22 error [email protected] start: `tsc && concurrently "tsc -w" "lite-server" `
+22 error Exit status 1
+23 error Failed at the [email protected] start script 'tsc && concurrently "tsc -w" "lite-server" '.
+23 error This is most likely a problem with the angular2-material-datepicker package,
+23 error not with npm itself.
+23 error Tell the author that this fails on your system:
+23 error     tsc && concurrently "tsc -w" "lite-server"
+23 error You can get their info via:
+23 error     npm owner ls angular2-material-datepicker
+23 error There is likely additional logging output above.
+24 verbose exit [ 1, true ]
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular2-material-datepicker",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "author": "Kevin O'Leary",
   "license": "MIT",
   "keywords": [
@@ -22,9 +22,10 @@
     "@angular/router": "~3.0.1",
     "@types/es6-shim": "^0.31.32",
     "calendar": "^0.1.0",
-    "concurrently": "^2.2.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",
@@ -40,5 +41,11 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/koleary94/Angular-2-Datepicker"
+  },
+  "scripts": {
+    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
+    "lite": "lite-server",
+    "tsc": "tsc",
+    "tsc:w": "tsc -w"
   }
 }
diff --git a/src/calendar.js.map b/src/calendar.js.map
diff --git a/src/calendar.ts b/src/calendar.ts
@@ -18,23 +18,23 @@ export class Calendar {
         this.firstWeekDay = firstWeekDay; // 0 = Sunday
     }
 
-    weekStartDate(date) {
+    weekStartDate(date: any) {
         var startDate = new Date(date.getTime());
         while (startDate.getDay() !== this.firstWeekDay) {
             startDate.setDate(startDate.getDate() - 1);
         }
         return startDate;
     }
 
-    monthDates(year, month, dayFormatter = null, weekFormatter = null) {
+    monthDates(year: any, month: any, dayFormatter:any = null, weekFormatter:any = null) {
         if ((typeof year !== "number") || (year < 1970)) {
             throw ('year must be a number >= 1970');
         };
         if ((typeof month !== "number") || (month < 0) || (month > 11)) {
             throw ('month must be a number (Jan is 0)');
         };
-        var weeks = [],
-            week = [],
+        var weeks: Array<any> = [],
+            week: Array<any> = [],
             i = 0,
             date = this.weekStartDate(new Date(year, month, 1));
         do {
@@ -49,26 +49,26 @@ export class Calendar {
         return weeks;
     }
 
-    monthDays(year, month) {
-        var getDayOrZero = function getDayOrZero(date) {
+    monthDays(year: any, month: any) {
+        var getDayOrZero = function getDayOrZero(date: any) {
             return date.getMonth() === month ? date : 0;
         };
         return this.monthDates(year, month, getDayOrZero);
     }
 
-    monthText(year, month) {
+    monthText(year: any, month: any) {
         if (typeof year === "undefined") {
             var now = new Date();
             year = now.getFullYear();
             month = now.getMonth();
         };
-        var getDayOrBlank = function getDayOrBlank(date) {
+        var getDayOrBlank = function getDayOrBlank(date: any) {
             var s = date.getMonth() === month ? date.getDate().toString() : "  ";
             while (s.length < 2) s = " "+s;
             return s;
         };
         var weeks = this.monthDates(year, month, getDayOrBlank,
-            function (week) { return week.join(" ") });
+            function (week: any) { return week.join(" ") });
         return weeks.join("\n");
     }
 }