Merge pull request #2 from koleary94/develop

Alpha release

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/.idea

app/app.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+  selector: 'my-app',
+  template: '<datepicker></datepicker>'
+})
+export class AppComponent { }

app/app.module.ts

@@ -0,0 +1,20 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent }   from './app.component';
+import { DatepickerComponent } from './datepicker/datepicker.component';
+
+
+@NgModule({
+  imports:      [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [
+    AppComponent,
+    DatepickerComponent
+  ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }

app/datepicker/calendar.ts

@@ -0,0 +1,79 @@
+/*!
+ * calendar: a port of the calendar module from Python
+ * Copyright(c) 2011 Luciano Ramalho <[email protected]>
+ * MIT Licensed
+ */
+
+// const CalendarException = message => {
+//    this.message = message;
+//    this.toString = function() {
+//        return this.message
+//    };
+// }
+
+export class Calendar {
+    firstWeekDay: number;
+
+    constructor(firstWeekDay = 0) {
+        this.firstWeekDay = firstWeekDay; // 0 = Sunday
+    }
+
+    weekStartDate(date) {
+        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) {
+        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 = [],
+            i = 0,
+            date = this.weekStartDate(new Date(year, month, 1));
+        do {
+            for (i=0; i<7; i++) {
+                week.push(dayFormatter ? dayFormatter(date) : date);
+                date = new Date(date.getTime());
+                date.setDate(date.getDate() + 1);
+            }
+            weeks.push(weekFormatter ? weekFormatter(week) : week);
+            week = [];
+        } while ((date.getMonth()<=month) && (date.getFullYear()===year));
+        return weeks;
+    }
+
+    monthDays(year, month) {
+        var getDayOrZero = function getDayOrZero(date) {
+            return date.getMonth() === month ? date : 0;
+        };
+        return this.monthDates(year, month, getDayOrZero);
+    }
+
+    monthText(year, month) {
+        if (typeof year === "undefined") {
+            var now = new Date();
+            year = now.getFullYear();
+            month = now.getMonth();
+        };
+        var getDayOrBlank = function getDayOrBlank(date) {
+            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(" ") });
+        return weeks.join("\n");
+    }
+}
+
+const months = "JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC".split(" ");
+for (var i=0; i<months.length; i++) {
+    Calendar[months[i]] = i;
+}

app/datepicker/datepicker.component.html

@@ -0,0 +1,88 @@
+<div
+  class="datepicker"
+  [ngStyle]="{'font-family': fontFamily}"
+>
+  <input
+    class="datepicker__input"
+    (click)="onInputClick()"
+    [(ngModel)]="inputText"
+    readonly="true"
+  >
+  <div
+    class=datepicker__calendar
+    *ngIf="showCalendar"
+  >
+    <div class="datepicker__calendar__nav">
+      <div
+        class="datepicker__calendar__nav__arrow"
+        (click)="onArrowLeftClick()"
+      >
+      <svg class="datepicker__calendar__nav__chevron" x="0px" y="0px" viewBox="0 0 50 50">
+        <g>
+        	<path d="M39.7,7.1c0.5,0.5,0.5,1.2,0,1.7L29,19.6c-0.5,0.5-1.2,1.2-1.7,1.7L16.5,32.1c-0.5,0.5-1.2,0.5-1.7,0l-2.3-2.3
+        		c-0.5-0.5-1.2-1.2-1.7-1.7l-2.3-2.3c-0.5-0.5-0.5-1.2,0-1.7l10.8-10.8c0.5-0.5,1.2-1.2,1.7-1.7L31.7,0.8c0.5-0.5,1.2-0.5,1.7,0
+        		l2.3,2.3c0.5,0.5,1.2,1.2,1.7,1.7L39.7,7.1z"/>
+        </g>
+        <g>
+        	<path d="M33.4,49c-0.5,0.5-1.2,0.5-1.7,0L20.9,38.2c-0.5-0.5-1.2-1.2-1.7-1.7L8.4,25.7c-0.5-0.5-0.5-1.2,0-1.7l2.3-2.3
+        		c0.5-0.5,1.2-1.2,1.7-1.7l2.3-2.3c0.5-0.5,1.2-0.5,1.7,0l10.8,10.8c0.5,0.5,1.2,1.2,1.7,1.7l10.8,10.8c0.5,0.5,0.5,1.2,0,1.7
+        		L37.4,45c-0.5,0.5-1.2,1.2-1.7,1.7L33.4,49z"/>
+        </g>
+      </svg>
+      </div>
+      <div class="datepicker__calendar__nav__header">
+        {{ currentMonth }} {{ currentYear }}
+      </div>
+      <div
+        class="datepicker__calendar__nav__arrow"
+        (click)="onArrowRightClick()"
+      >
+        <svg class="datepicker__calendar__nav__chevron" x="0px" y="0px" viewBox="0 0 50 50">
+          <g>
+            <path d="M8.4,7.1c-0.5,0.5-0.5,1.2,0,1.7l10.8,10.8c0.5,0.5,1.2,1.2,1.7,1.7l10.8,10.8c0.5,0.5,1.2,0.5,1.7,0l2.3-2.3
+          		c0.5-0.5,1.2-1.2,1.7-1.7l2.3-2.3c0.5-0.5,0.5-1.2,0-1.7L29,13.2c-0.5-0.5-1.2-1.2-1.7-1.7L16.5,0.8c-0.5-0.5-1.2-0.5-1.7,0
+          		l-2.3,2.3c-0.5,0.5-1.2,1.2-1.7,1.7L8.4,7.1z"/>
+          </g>
+          <g>
+          	<path d="M14.8,49c0.5,0.5,1.2,0.5,1.7,0l10.8-10.8c0.5-0.5,1.2-1.2,1.7-1.7l10.8-10.8c0.5-0.5,0.5-1.2,0-1.7l-2.3-2.3
+          		c-0.5-0.5-1.2-1.2-1.7-1.7l-2.3-2.3c-0.5-0.5-1.2-0.5-1.7,0L20.9,28.5c-0.5,0.5-1.2,1.2-1.7,1.7L8.4,40.9c-0.5,0.5-0.5,1.2,0,1.7
+          		l2.3,2.3c0.5,0.5,1.2,1.2,1.7,1.7L14.8,49z"/>
+          </g>
+        </svg>
+      </div>
+    </div>
+    <div
+      class="datepicker__calendar__content"
+    >
+      <div
+        class="datepicker__calendar__label"
+        *ngFor="let day of dayNames"
+      >
+        {{ day }}
+      </div>
+      <div
+        id="datepicker__calendar__month"
+        class="datepicker__calendar__month"
+        [ngClass]="{'datepicker__calendar__month--animate-left': animateLeft, 'datepicker__calendar__month--animate-right': animateRight}"
+      >
+        <div
+          *ngFor="let day of calendarDays"
+          class="datepicker__calendar__month__day"
+          [ngClass]="{'datepicker__calendar__month__day--current-day': isCurrentDay(day), 'datepicker__calendar__month__day--chosen-day': isChosenDay(day)}"
+          [ngStyle]="{'cursor': day == 0 ? 'initial' : 'pointer'}"
+          (click)="onSelectDay(day)"
+        >
+          <span *ngIf="day != 0">
+            {{ day.getDate() }}
+          </span>
+        </div>
+      </div>
+      <div
+        class="datepicker__calendar__cancel"
+        (click)="onCancel()"
+      >
+        Cancel
+      </div>
+    </div>
+  </div>
+</div>